@dso-toolkit/core 45.0.1 → 45.1.0

package/dist/cjs/{focus-trap.esm-a85643b0.js → focus-trap.esm-e2addb10.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const index_esm = require('./index.esm-3520a2a6.js');
+const index_esm = require('./index.esm-50325ea2.js');
 
 /*!
-* focus-trap 6.8.1
+* focus-trap 7.0.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -250,6 +250,10 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       optionValue = optionValue.apply(void 0, params);
     }
 
+    if (optionValue === true) {
+      optionValue = undefined; // use default value
+    }
+
     if (!optionValue) {
       if (optionValue === undefined || optionValue === false) {
         return optionValue;
@@ -553,16 +557,16 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   };
 
   var checkClick = function checkClick(e) {
-    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
-      return;
-    }
-
     var target = getActualTarget(e);
 
     if (findContainerIndex(target) >= 0) {
       return;
     }
 
+    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
+      return;
+    }
+
     if (valueOrHandler(config.allowOutsideClick, e)) {
       return;
     }
@@ -623,6 +627,14 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 
 
   trap = {
+    get active() {
+      return state.active;
+    },
+
+    get paused() {
+      return state.paused;
+    },
+
     activate: function activate(activateOptions) {
       if (state.active) {
         return this;
@@ -669,6 +681,12 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         return this;
       }
 
+      var options = _objectSpread2({
+        onDeactivate: config.onDeactivate,
+        onPostDeactivate: config.onPostDeactivate,
+        checkCanReturnFocus: config.checkCanReturnFocus
+      }, deactivateOptions);
+
       clearTimeout(state.delayInitialFocusTimer); // noop if undefined
 
       state.delayInitialFocusTimer = undefined;
@@ -676,16 +694,15 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       state.active = false;
       state.paused = false;
       activeFocusTraps.deactivateTrap(trap);
-      var onDeactivate = getOption(deactivateOptions, 'onDeactivate');
-      var onPostDeactivate = getOption(deactivateOptions, 'onPostDeactivate');
-      var checkCanReturnFocus = getOption(deactivateOptions, 'checkCanReturnFocus');
+      var onDeactivate = getOption(options, 'onDeactivate');
+      var onPostDeactivate = getOption(options, 'onPostDeactivate');
+      var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');
+      var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');
 
       if (onDeactivate) {
         onDeactivate();
       }
 
-      var returnFocus = getOption(deactivateOptions, 'returnFocus', 'returnFocusOnDeactivate');
-
       var finishDeactivation = function finishDeactivation() {
         delay(function () {
           if (returnFocus) {

package/dist/cjs/{index-0a7c679a.js → index-4066351a.js}

@@ -29,6 +29,7 @@ let useNativeShadowDom = false;
 let checkSlotFallbackVisibility = false;
 let checkSlotRelocate = false;
 let isSvgMode = false;
+let renderingRef = null;
 let queuePending = false;
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
@@ -82,6 +83,8 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
 const getHostListenerTarget = (elm, flags) => {
     if (flags & 4 /* TargetDocument */)
         return doc;
+    if (flags & 8 /* TargetWindow */)
+        return win;
     return elm;
 };
 // prettier-ignore
@@ -1177,6 +1180,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 const callRender = (hostRef, instance, elm) => {
     try {
+        renderingRef = instance;
         instance = instance.render() ;
         {
             hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
@@ -1198,8 +1202,10 @@ const callRender = (hostRef, instance, elm) => {
     catch (e) {
         consoleError(e, hostRef.$hostElement$);
     }
+    renderingRef = null;
     return null;
 };
+const getRenderingRef = () => renderingRef;
 const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
@@ -2047,6 +2053,7 @@ exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;
 exports.forceUpdate = forceUpdate;
 exports.getElement = getElement;
+exports.getRenderingRef = getRenderingRef;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/{index.esm-3520a2a6.js → index.esm-50325ea2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 /*!
-* tabbable 5.3.1
+* tabbable 6.0.0
 * @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'];
@@ -36,6 +36,12 @@ var getCandidates = function getCandidates(el, includeContainer, filter) {
  * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
  */
 
+/**
+ * @callback ShadowRootFilter
+ * @param {Element} shadowHostNode the element which contains shadow content
+ * @returns {boolean} true if a shadow root could potentially contain valid candidates.
+ */
+
 /**
  * @typedef {Object} CandidatesScope
  * @property {Element} scope contains inner candidates
@@ -49,6 +55,7 @@ var getCandidates = function getCandidates(el, includeContainer, filter) {
  *  or a boolean stating if it has an undisclosed shadow root
  * @property {(node: Element) => boolean} filter filter candidates
  * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list
+ * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
  */
 
 /**
@@ -91,8 +98,9 @@ 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);
 
-      if (shadowRoot) {
+      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
         //  child candidates found because they're likely slotted elements (elements that are
@@ -203,6 +211,45 @@ var isRadio = function isRadio(node) {
 
 var isNonTabbableRadio = function isNonTabbableRadio(node) {
   return isRadio(node) && !isTabbableRadio(node);
+}; // determines if a node is ultimately attached to the window's document
+
+
+var isNodeAttached = function isNodeAttached(node) {
+  var _nodeRootHost;
+
+  // 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
+  //  is attached, and the one we need to check if it's in the document or not (because the
+  //  shadow, and all nodes it contains, is never considered in the document since shadows
+  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
+  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
+  //  visibility, including all the nodes it contains). The host could be any normal node,
+  //  or a custom element (i.e. web component). Either way, that's the one that is considered
+  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
+  //  tested).
+  // To further complicate things, we have to look all the way up until we find a shadow HOST
+  //  that is attached (or find none) because the node might be in nested shadows...
+  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
+  //  document (per the docs) and while it's a Document-type object, that document does not
+  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
+  //  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));
+  }
+
+  return attached;
 };
 
 var isZeroArea = function isZeroArea(node) {
@@ -217,6 +264,11 @@ var isHidden = function isHidden(node, _ref) {
   var displayCheck = _ref.displayCheck,
       getShadowRoot = _ref.getShadowRoot;
 
+  // NOTE: visibility will be `undefined` if node is detached from the document
+  //  (see notes about this further down), which means we will consider it visible
+  //  (this is legacy behavior from a very long way back)
+  // NOTE: we check this regardless of `displayCheck="none"` because this is a
+  //  _visibility_ check, not a _display_ check
   if (getComputedStyle(node).visibility === 'hidden') {
     return true;
   }
@@ -228,7 +280,7 @@ var isHidden = function isHidden(node, _ref) {
     return true;
   }
 
-  if (!displayCheck || displayCheck === 'full') {
+  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
     if (typeof getShadowRoot === 'function') {
       // figure out if we should consider the node to be in an undisclosed shadow and use the
       //  'non-zero-area' fallback
@@ -259,18 +311,51 @@ var isHidden = function isHidden(node, _ref) {
     } // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
     //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
     //  it might be a falsy value, which means shadow DOM support is disabled
-    // didn't find it sitting in an undisclosed shadow (or shadows are disabled) so now we
-    //  can just test to see if it would normally be visible or not
-    // this works wherever the node is: if there's at least one client rect, it's
-    //  somehow displayed; it also covers the CSS 'display: contents' case where the
-    //  node itself is hidden in place of its contents; and there's no need to search
-    //  up the hierarchy either
+    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
+    //  now we can just test to see if it would normally be visible or not, provided it's
+    //  attached to the main document.
+    // NOTE: We must consider case where node is inside a shadow DOM and given directly to
+    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
+
+
+    if (isNodeAttached(node)) {
+      // this works wherever the node is: if there's at least one client rect, it's
+      //  somehow displayed; it also covers the CSS 'display: contents' case where the
+      //  node itself is hidden in place of its contents; and there's no need to search
+      //  up the hierarchy either
+      return !node.getClientRects().length;
+    } // Else, the node isn't attached to the document, which means the `getClientRects()`
+    //  API will __always__ return zero rects (this can happen, for example, if React
+    //  is used to render nodes onto a detached tree, as confirmed in this thread:
+    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
+    //
+    // It also means that even window.getComputedStyle(node).display will return `undefined`
+    //  because styles are only computed for nodes that are in the document.
+    //
+    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
+    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
+    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
+    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
+    //  considering __everything__ to be visible because of the innability to determine styles.
+    //
+    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
+    //  nodes as visible with the 'none' fallback.__
 
 
-    return !node.getClientRects().length;
+    if (displayCheck !== 'legacy-full') {
+      return true; // hidden
+    } // else, fallback to 'none' mode and consider the node visible
+
   } else if (displayCheck === 'non-zero-area') {
+    // NOTE: Even though this tests that the node's client rect is non-zero to determine
+    //  whether it's displayed, and that a detached node will __always__ have a zero-area
+    //  client rect, we don't special-case for whether the node is attached or not. In
+    //  this mode, we do want to consider nodes that have a zero area to be hidden at all
+    //  times, and that includes attached or not.
     return isZeroArea(node);
-  }
+  } // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
+  //  it's visible
+
 
   return false;
 }; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
@@ -324,6 +409,18 @@ var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(opt
 
   return true;
 };
+
+var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
+  var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
+
+  if (isNaN(tabIndex) || tabIndex >= 0) {
+    return true;
+  } // If a custom element has an explicit negative tabindex,
+  // browsers will not allow tab targeting said element's children.
+
+
+  return false;
+};
 /**
  * @param {Array.<Element|CandidatesScope>} candidates
  * @returns Element[]
@@ -365,7 +462,8 @@ var tabbable = function tabbable(el, options) {
     candidates = getCandidatesIteratively([el], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
       flatten: false,
-      getShadowRoot: options.getShadowRoot
+      getShadowRoot: options.getShadowRoot,
+      shadowRootFilter: isValidShadowRootTabbable
     });
   } else {
     candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
+const index = require('./index-4066351a.js');
 
 /*
  Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["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-header.cjs",[[1,"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],"truncatedContent":[32],"labelText":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["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],"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]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["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-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[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.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"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.cjs",[[1,"dso-icon",{"icon":[1]}]]]], 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-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],"toggleSection":[64]}]]],["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],"truncatedContent":[32],"labelText":[32]}]]],["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-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["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],"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],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[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],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["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-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[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.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"],"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

@@ -5,6 +5,8 @@
     "./components/info-button/info-button.js",
     "./components/selectable/selectable.js",
     "./components/viewer-grid/viewer-grid.js",
+    "./components/accordion/accordion.js",
+    "./components/accordion/components/accordion-section.js",
     "./components/alert/alert.js",
     "./components/attachments-counter/attachments-counter.js",
     "./components/badge/badge.js",

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

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,260 @@
+import { h, Component, Prop, Host, Method, Watch, Element, Event } from '@stencil/core';
+import { createStore } from '@stencil/store';
+export class Accordion {
+  constructor() {
+    this.variant = 'default';
+    /** Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements */
+    this.reverseAlign = false;
+    /** Allows multiple sections to be open at the same time. */
+    this.allowMultipleOpen = false;
+    const { state } = createStore({
+      variant: this.variant || 'default',
+      reverseAlign: this.reverseAlign,
+    });
+    this.accordionState = state;
+  }
+  updateVariant(variant = 'default') {
+    this.accordionState.variant = variant || 'default';
+  }
+  updateReverseAlign(reverseAlign) {
+    this.accordionState.reverseAlign = reverseAlign;
+  }
+  watchAllowMultiple(allowMultipleOpen) {
+    if (!allowMultipleOpen) {
+      const openSections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section[open]'));
+      // By removing the first section, it is kept open;
+      openSections.shift();
+      openSections.forEach(section => this.controlOpenAttribute(section, false));
+    }
+  }
+  async getState() {
+    return this.accordionState;
+  }
+  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
+  async toggleSection(sectionElement, event) {
+    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
+    if (typeof sectionElement === 'number') {
+      sectionElement = sections[sectionElement];
+    }
+    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
+      return;
+    }
+    const sectionIsOpen = this.isSectionOpen(sectionElement);
+    if (this.allowMultipleOpen) {
+      this.controlOpenAttribute(sectionElement, !sectionIsOpen);
+      this.emitToggleEvent(sectionElement, sections, event);
+      return;
+    }
+    if (sectionIsOpen) {
+      this.controlOpenAttribute(sectionElement, false);
+      this.emitToggleEvent(sectionElement, sections, event);
+      return;
+    }
+    await this.closeOpenSections();
+    this.controlOpenAttribute(sectionElement, true);
+    this.emitToggleEvent(sectionElement, sections, event);
+  }
+  /** Closes all sections belonging to this accordion. */
+  async closeOpenSections() {
+    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
+    const openSections = sections.filter(s => this.isSectionOpen(s));
+    openSections.forEach(section => this.controlOpenAttribute(section, false));
+  }
+  render() {
+    return (h(Host, { class: {
+        'dso-accordion': true
+      } },
+      h("slot", null)));
+  }
+  emitToggleEvent(sectionElement, sections, e) {
+    this.dsoToggleSection.emit({
+      originalEvent: e,
+      section: {
+        element: sectionElement,
+        open: this.isSectionOpen(sectionElement),
+      },
+      sections,
+    });
+  }
+  isSectionOpen(sectionElement) {
+    return typeof sectionElement.getAttribute('open') === 'string';
+  }
+  controlOpenAttribute(sectionElement, setAttribute) {
+    if (setAttribute) {
+      sectionElement.setAttribute('open', '');
+    }
+    else {
+      sectionElement.removeAttribute('open');
+    }
+  }
+  static get is() { return "dso-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["accordion.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["accordion.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "AccordionVariant",
+        "resolved": "\"compact\" | \"conclusion\" | \"default\" | undefined",
+        "references": {
+          "AccordionVariant": {
+            "location": "import",
+            "path": "./accordion.interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": true,
+      "defaultValue": "'default'"
+    },
+    "reverseAlign": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements"
+      },
+      "attribute": "reverse-align",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "allowMultipleOpen": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows multiple sections to be open at the same time."
+      },
+      "attribute": "allow-multiple-open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "dsoToggleSection",
+      "name": "dsoToggleSection",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a section is toggled.\n\n`event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\n`event.detail.section` contains the toggled section and its new opened value.\\\n`event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion."
+      },
+      "complexType": {
+        "original": "AccordionSectionToggleEvent",
+        "resolved": "AccordionSectionToggleEvent",
+        "references": {
+          "AccordionSectionToggleEvent": {
+            "location": "import",
+            "path": "./accordion.interfaces"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "getState": {
+      "complexType": {
+        "signature": "() => Promise<AccordionInternalState>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "AccordionInternalState": {
+            "location": "import",
+            "path": "./accordion.interfaces"
+          }
+        },
+        "return": "Promise<AccordionInternalState>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "toggleSection": {
+      "complexType": {
+        "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent | undefined) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          },
+          "MouseEvent": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.",
+        "tags": []
+      }
+    },
+    "closeOpenSections": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Closes all sections belonging to this accordion.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "variant",
+      "methodName": "updateVariant"
+    }, {
+      "propName": "reverseAlign",
+      "methodName": "updateReverseAlign"
+    }, {
+      "propName": "allowMultipleOpen",
+      "methodName": "watchAllowMultiple"
+    }]; }
+}