@dso-toolkit/core 54.2.1 → 55.0.0

package/dist/dso-toolkit/p-91963e3d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread2","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","obj","value","_toPropertyKey","configurable","writable","_toPrimitive","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","String","Number","arg","activeFocusTraps","activateTrap","trapStack","trap","activeTrap","pause","trapIndex","indexOf","splice","deactivateTrap","unpause","isSelectableInput","node","tagName","toLowerCase","select","isEscapeEvent","e","keyCode","isTabEvent","isKeyForward","shiftKey","isKeyBackward","delay","fn","setTimeout","findIndex","arr","idx","every","valueOrHandler","_len","params","Array","_key","getActualTarget","event","shadowRoot","composedPath","internalTrapStack","createFocusTrap","elements","userOptions","doc","document","config","returnFocusOnDeactivate","escapeDeactivates","delayInitialFocus","state","containers","containerGroups","tabbableGroups","nodeFocusedBeforeActivation","mostRecentlyFocusedNode","active","paused","delayInitialFocusTimer","getOption","configOverrideOptions","optionName","configOptionName","findContainerIndex","element","_ref","container","tabbableNodes","contains","includes","find","getNodeForOption","optionValue","_len2","_key2","Error","concat","querySelector","getInitialFocusNode","isFocusable","tabbableOptions","activeElement","firstTabbableGroup","firstTabbableNode","updateTabbableNodes","map","tabbable","focusableNodes","focusable","lastTabbableNode","nextTabbableNode","forward","nodeIdx","n","slice","isTabbable","reverse","group","tryFocus","focus","preventScroll","getReturnFocusNode","previousActiveElement","checkPointerDown","clickOutsideDeactivates","deactivate","returnFocus","allowOutsideClick","preventDefault","checkFocusIn","targetContained","Document","stopImmediatePropagation","checkKeyNav","isBackward","destinationNode","containerIndex","containerGroup","startOfGroupIndex","_ref2","destinationGroupIndex","destinationGroup","lastOfGroupIndex","_ref3","_destinationGroupIndex","_destinationGroup","checkKey","checkClick","addListeners","addEventListener","capture","passive","removeListeners","removeEventListener","checkDomRemoval","mutations","isFocusedNodeRemoved","some","mutation","removedNodes","from","mutationObserver","window","MutationObserver","updateObservedNodes","disconnect","observe","subtree","childList","activate","activateOptions","this","onActivate","onPostActivate","checkCanFocusTrap","finishActivation","then","deactivateOptions","options","onDeactivate","onPostDeactivate","checkCanReturnFocus","clearTimeout","finishDeactivation","pauseOptions","onPause","onPostPause","unpauseOptions","onUnpause","onPostUnpause","updateContainerElements","containerElements","elementsAsArray","Boolean"],"sources":["../../node_modules/focus-trap/dist/focus-trap.esm.js"],"sourcesContent":["/*!\n* focus-trap 7.4.3\n* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE\n*/\nimport { isFocusable, tabbable, focusable, isTabbable } from 'tabbable';\n\nfunction ownKeys(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    enumerableOnly && (symbols = symbols.filter(function (sym) {\n      return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n    })), keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread2(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = null != arguments[i] ? arguments[i] : {};\n    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n      _defineProperty(target, key, source[key]);\n    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n    });\n  }\n  return target;\n}\nfunction _defineProperty(obj, key, value) {\n  key = _toPropertyKey(key);\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n  return obj;\n}\nfunction _toPrimitive(input, hint) {\n  if (typeof input !== \"object\" || input === null) return input;\n  var prim = input[Symbol.toPrimitive];\n  if (prim !== undefined) {\n    var res = prim.call(input, hint || \"default\");\n    if (typeof res !== \"object\") return res;\n    throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n  }\n  return (hint === \"string\" ? String : Number)(input);\n}\nfunction _toPropertyKey(arg) {\n  var key = _toPrimitive(arg, \"string\");\n  return typeof key === \"symbol\" ? key : String(key);\n}\n\nvar activeFocusTraps = {\n  activateTrap: function activateTrap(trapStack, trap) {\n    if (trapStack.length > 0) {\n      var activeTrap = trapStack[trapStack.length - 1];\n      if (activeTrap !== trap) {\n        activeTrap.pause();\n      }\n    }\n    var trapIndex = trapStack.indexOf(trap);\n    if (trapIndex === -1) {\n      trapStack.push(trap);\n    } else {\n      // move this existing trap to the front of the queue\n      trapStack.splice(trapIndex, 1);\n      trapStack.push(trap);\n    }\n  },\n  deactivateTrap: function deactivateTrap(trapStack, trap) {\n    var trapIndex = trapStack.indexOf(trap);\n    if (trapIndex !== -1) {\n      trapStack.splice(trapIndex, 1);\n    }\n    if (trapStack.length > 0) {\n      trapStack[trapStack.length - 1].unpause();\n    }\n  }\n};\nvar isSelectableInput = function isSelectableInput(node) {\n  return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';\n};\nvar isEscapeEvent = function isEscapeEvent(e) {\n  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;\n};\nvar isTabEvent = function isTabEvent(e) {\n  return e.key === 'Tab' || e.keyCode === 9;\n};\n\n// checks for TAB by default\nvar isKeyForward = function isKeyForward(e) {\n  return isTabEvent(e) && !e.shiftKey;\n};\n\n// checks for SHIFT+TAB by default\nvar isKeyBackward = function isKeyBackward(e) {\n  return isTabEvent(e) && e.shiftKey;\n};\nvar delay = function delay(fn) {\n  return setTimeout(fn, 0);\n};\n\n// Array.find/findIndex() are not supported on IE; this replicates enough\n//  of Array.findIndex() for our needs\nvar findIndex = function findIndex(arr, fn) {\n  var idx = -1;\n  arr.every(function (value, i) {\n    if (fn(value)) {\n      idx = i;\n      return false; // break\n    }\n\n    return true; // next\n  });\n\n  return idx;\n};\n\n/**\n * Get an option's value when it could be a plain value, or a handler that provides\n *  the value.\n * @param {*} value Option's value to check.\n * @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.\n * @returns {*} The `value`, or the handler's returned value.\n */\nvar valueOrHandler = function valueOrHandler(value) {\n  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    params[_key - 1] = arguments[_key];\n  }\n  return typeof value === 'function' ? value.apply(void 0, params) : value;\n};\nvar getActualTarget = function getActualTarget(event) {\n  // NOTE: If the trap is _inside_ a shadow DOM, event.target will always be the\n  //  shadow host. However, event.target.composedPath() will be an array of\n  //  nodes \"clicked\" from inner-most (the actual element inside the shadow) to\n  //  outer-most (the host HTML document). If we have access to composedPath(),\n  //  then use its first element; otherwise, fall back to event.target (and\n  //  this only works for an _open_ shadow DOM; otherwise,\n  //  composedPath()[0] === event.target always).\n  return event.target.shadowRoot && typeof event.composedPath === 'function' ? event.composedPath()[0] : event.target;\n};\n\n// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this\n//  current instance use the same stack if `userOptions.trapStack` isn't specified\nvar internalTrapStack = [];\nvar createFocusTrap = function createFocusTrap(elements, userOptions) {\n  // SSR: a live trap shouldn't be created in this type of environment so this\n  //  should be safe code to execute if the `document` option isn't specified\n  var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;\n  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;\n  var config = _objectSpread2({\n    returnFocusOnDeactivate: true,\n    escapeDeactivates: true,\n    delayInitialFocus: true,\n    isKeyForward: isKeyForward,\n    isKeyBackward: isKeyBackward\n  }, userOptions);\n  var state = {\n    // containers given to createFocusTrap()\n    // @type {Array<HTMLElement>}\n    containers: [],\n    // list of objects identifying tabbable nodes in `containers` in the trap\n    // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap\n    //  is active, but the trap should never get to a state where there isn't at least one group\n    //  with at least one tabbable node in it (that would lead to an error condition that would\n    //  result in an error being thrown)\n    // @type {Array<{\n    //   container: HTMLElement,\n    //   tabbableNodes: Array<HTMLElement>, // empty if none\n    //   focusableNodes: Array<HTMLElement>, // empty if none\n    //   firstTabbableNode: HTMLElement|null,\n    //   lastTabbableNode: HTMLElement|null,\n    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined\n    // }>}\n    containerGroups: [],\n    // same order/length as `containers` list\n\n    // references to objects in `containerGroups`, but only those that actually have\n    //  tabbable nodes in them\n    // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__\n    //  the same length\n    tabbableGroups: [],\n    nodeFocusedBeforeActivation: null,\n    mostRecentlyFocusedNode: null,\n    active: false,\n    paused: false,\n    // timer ID for when delayInitialFocus is true and initial focus in this trap\n    //  has been delayed during activation\n    delayInitialFocusTimer: undefined\n  };\n  var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later\n\n  /**\n   * Gets a configuration option value.\n   * @param {Object|undefined} configOverrideOptions If true, and option is defined in this set,\n   *  value will be taken from this object. Otherwise, value will be taken from base configuration.\n   * @param {string} optionName Name of the option whose value is sought.\n   * @param {string|undefined} [configOptionName] Name of option to use __instead of__ `optionName`\n   *  IIF `configOverrideOptions` is not defined. Otherwise, `optionName` is used.\n   */\n  var getOption = function getOption(configOverrideOptions, optionName, configOptionName) {\n    return configOverrideOptions && configOverrideOptions[optionName] !== undefined ? configOverrideOptions[optionName] : config[configOptionName || optionName];\n  };\n\n  /**\n   * Finds the index of the container that contains the element.\n   * @param {HTMLElement} element\n   * @param {Event} [event]\n   * @returns {number} Index of the container in either `state.containers` or\n   *  `state.containerGroups` (the order/length of these lists are the same); -1\n   *  if the element isn't found.\n   */\n  var findContainerIndex = function findContainerIndex(element, event) {\n    var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;\n    // NOTE: search `containerGroups` because it's possible a group contains no tabbable\n    //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)\n    //  and we still need to find the element in there\n    return state.containerGroups.findIndex(function (_ref) {\n      var container = _ref.container,\n        tabbableNodes = _ref.tabbableNodes;\n      return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any\n      //  web components if the `tabbableOptions.getShadowRoot` option was used for\n      //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't\n      //  look inside web components even if open)\n      composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {\n        return node === element;\n      });\n    });\n  };\n\n  /**\n   * Gets the node for the given option, which is expected to be an option that\n   *  can be either a DOM node, a string that is a selector to get a node, `false`\n   *  (if a node is explicitly NOT given), or a function that returns any of these\n   *  values.\n   * @param {string} optionName\n   * @returns {undefined | false | HTMLElement | SVGElement} Returns\n   *  `undefined` if the option is not specified; `false` if the option\n   *  resolved to `false` (node explicitly not given); otherwise, the resolved\n   *  DOM node.\n   * @throws {Error} If the option is set, not `false`, and is not, or does not\n   *  resolve to a node.\n   */\n  var getNodeForOption = function getNodeForOption(optionName) {\n    var optionValue = config[optionName];\n    if (typeof optionValue === 'function') {\n      for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n        params[_key2 - 1] = arguments[_key2];\n      }\n      optionValue = optionValue.apply(void 0, params);\n    }\n    if (optionValue === true) {\n      optionValue = undefined; // use default value\n    }\n\n    if (!optionValue) {\n      if (optionValue === undefined || optionValue === false) {\n        return optionValue;\n      }\n      // else, empty string (invalid), null (invalid), 0 (invalid)\n\n      throw new Error(\"`\".concat(optionName, \"` was specified but was not a node, or did not return a node\"));\n    }\n    var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point\n\n    if (typeof optionValue === 'string') {\n      node = doc.querySelector(optionValue); // resolve to node, or null if fails\n      if (!node) {\n        throw new Error(\"`\".concat(optionName, \"` as selector refers to no known node\"));\n      }\n    }\n    return node;\n  };\n  var getInitialFocusNode = function getInitialFocusNode() {\n    var node = getNodeForOption('initialFocus');\n\n    // false explicitly indicates we want no initialFocus at all\n    if (node === false) {\n      return false;\n    }\n    if (node === undefined || !isFocusable(node, config.tabbableOptions)) {\n      // option not specified nor focusable: use fallback options\n      if (findContainerIndex(doc.activeElement) >= 0) {\n        node = doc.activeElement;\n      } else {\n        var firstTabbableGroup = state.tabbableGroups[0];\n        var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;\n\n        // NOTE: `fallbackFocus` option function cannot return `false` (not supported)\n        node = firstTabbableNode || getNodeForOption('fallbackFocus');\n      }\n    }\n    if (!node) {\n      throw new Error('Your focus-trap needs to have at least one focusable element');\n    }\n    return node;\n  };\n  var updateTabbableNodes = function updateTabbableNodes() {\n    state.containerGroups = state.containers.map(function (container) {\n      var tabbableNodes = tabbable(container, config.tabbableOptions);\n\n      // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes\n      //  are a superset of tabbable nodes\n      var focusableNodes = focusable(container, config.tabbableOptions);\n      return {\n        container: container,\n        tabbableNodes: tabbableNodes,\n        focusableNodes: focusableNodes,\n        firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,\n        lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,\n        /**\n         * Finds the __tabbable__ node that follows the given node in the specified direction,\n         *  in this container, if any.\n         * @param {HTMLElement} node\n         * @param {boolean} [forward] True if going in forward tab order; false if going\n         *  in reverse.\n         * @returns {HTMLElement|undefined} The next tabbable node, if any.\n         */\n        nextTabbableNode: function nextTabbableNode(node) {\n          var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n          // NOTE: If tabindex is positive (in order to manipulate the tab order separate\n          //  from the DOM order), this __will not work__ because the list of focusableNodes,\n          //  while it contains tabbable nodes, does not sort its nodes in any order other\n          //  than DOM order, because it can't: Where would you place focusable (but not\n          //  tabbable) nodes in that order? They have no order, because they aren't tabbale...\n          // Support for positive tabindex is already broken and hard to manage (possibly\n          //  not supportable, TBD), so this isn't going to make things worse than they\n          //  already are, and at least makes things better for the majority of cases where\n          //  tabindex is either 0/unset or negative.\n          // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375\n          var nodeIdx = focusableNodes.findIndex(function (n) {\n            return n === node;\n          });\n          if (nodeIdx < 0) {\n            return undefined;\n          }\n          if (forward) {\n            return focusableNodes.slice(nodeIdx + 1).find(function (n) {\n              return isTabbable(n, config.tabbableOptions);\n            });\n          }\n          return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {\n            return isTabbable(n, config.tabbableOptions);\n          });\n        }\n      };\n    });\n    state.tabbableGroups = state.containerGroups.filter(function (group) {\n      return group.tabbableNodes.length > 0;\n    });\n\n    // throw if no groups have tabbable nodes and we don't have a fallback focus node either\n    if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option\n    ) {\n      throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');\n    }\n  };\n  var tryFocus = function tryFocus(node) {\n    if (node === false) {\n      return;\n    }\n    if (node === doc.activeElement) {\n      return;\n    }\n    if (!node || !node.focus) {\n      tryFocus(getInitialFocusNode());\n      return;\n    }\n    node.focus({\n      preventScroll: !!config.preventScroll\n    });\n    state.mostRecentlyFocusedNode = node;\n    if (isSelectableInput(node)) {\n      node.select();\n    }\n  };\n  var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {\n    var node = getNodeForOption('setReturnFocus', previousActiveElement);\n    return node ? node : node === false ? false : previousActiveElement;\n  };\n\n  // This needs to be done on mousedown and touchstart instead of click\n  // so that it precedes the focus event.\n  var checkPointerDown = function checkPointerDown(e) {\n    var target = getActualTarget(e);\n    if (findContainerIndex(target, e) >= 0) {\n      // allow the click since it ocurred inside the trap\n      return;\n    }\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      // immediately deactivate the trap\n      trap.deactivate({\n        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,\n        //  which will result in the outside click setting focus to the node\n        //  that was clicked (and if not focusable, to \"nothing\"); by setting\n        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused\n        //  on activation (or the configured `setReturnFocus` node), whether the\n        //  outside click was on a focusable node or not\n        returnFocus: config.returnFocusOnDeactivate\n      });\n      return;\n    }\n\n    // This is needed for mobile devices.\n    // (If we'll only let `click` events through,\n    // then on mobile they will be blocked anyways if `touchstart` is blocked.)\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      // allow the click outside the trap to take place\n      return;\n    }\n\n    // otherwise, prevent the click\n    e.preventDefault();\n  };\n\n  // In case focus escapes the trap for some strange reason, pull it back in.\n  var checkFocusIn = function checkFocusIn(e) {\n    var target = getActualTarget(e);\n    var targetContained = findContainerIndex(target, e) >= 0;\n\n    // In Firefox when you Tab out of an iframe the Document is briefly focused.\n    if (targetContained || target instanceof Document) {\n      if (targetContained) {\n        state.mostRecentlyFocusedNode = target;\n      }\n    } else {\n      // escaped! pull it back in to where it just left\n      e.stopImmediatePropagation();\n      tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());\n    }\n  };\n\n  // Hijack key nav events on the first and last focusable nodes of the trap,\n  // in order to prevent focus from escaping. If it escapes for even a\n  // moment it can end up scrolling the page and causing confusion so we\n  // kind of need to capture the action at the keydown phase.\n  var checkKeyNav = function checkKeyNav(event) {\n    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n    var target = getActualTarget(event);\n    updateTabbableNodes();\n    var destinationNode = null;\n    if (state.tabbableGroups.length > 0) {\n      // make sure the target is actually contained in a group\n      // NOTE: the target may also be the container itself if it's focusable\n      //  with tabIndex='-1' and was given initial focus\n      var containerIndex = findContainerIndex(target, event);\n      var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;\n      if (containerIndex < 0) {\n        // target not found in any group: quite possible focus has escaped the trap,\n        //  so bring it back into...\n        if (isBackward) {\n          // ...the last node in the last group\n          destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;\n        } else {\n          // ...the first node in the first group\n          destinationNode = state.tabbableGroups[0].firstTabbableNode;\n        }\n      } else if (isBackward) {\n        // REVERSE\n\n        // is the target the first tabbable node in a group?\n        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {\n          var firstTabbableNode = _ref2.firstTabbableNode;\n          return target === firstTabbableNode;\n        });\n        if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {\n          // an exception case where the target is either the container itself, or\n          //  a non-tabbable node that was given focus (i.e. tabindex is negative\n          //  and user clicked on it or node was programmatically given focus)\n          //  and is not followed by any other tabbable node, in which\n          //  case, we should handle shift+tab as if focus were on the container's\n          //  first tabbable node, and go to the last tabbable node of the LAST group\n          startOfGroupIndex = containerIndex;\n        }\n        if (startOfGroupIndex >= 0) {\n          // YES: then shift+tab should go to the last tabbable node in the\n          //  previous group (and wrap around to the last tabbable node of\n          //  the LAST group if it's the first tabbable node of the FIRST group)\n          var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;\n          var destinationGroup = state.tabbableGroups[destinationGroupIndex];\n          destinationNode = destinationGroup.lastTabbableNode;\n        } else if (!isTabEvent(event)) {\n          // user must have customized the nav keys so we have to move focus manually _within_\n          //  the active group: do this based on the order determined by tabbable()\n          destinationNode = containerGroup.nextTabbableNode(target, false);\n        }\n      } else {\n        // FORWARD\n\n        // is the target the last tabbable node in a group?\n        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {\n          var lastTabbableNode = _ref3.lastTabbableNode;\n          return target === lastTabbableNode;\n        });\n        if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {\n          // an exception case where the target is the container itself, or\n          //  a non-tabbable node that was given focus (i.e. tabindex is negative\n          //  and user clicked on it or node was programmatically given focus)\n          //  and is not followed by any other tabbable node, in which\n          //  case, we should handle tab as if focus were on the container's\n          //  last tabbable node, and go to the first tabbable node of the FIRST group\n          lastOfGroupIndex = containerIndex;\n        }\n        if (lastOfGroupIndex >= 0) {\n          // YES: then tab should go to the first tabbable node in the next\n          //  group (and wrap around to the first tabbable node of the FIRST\n          //  group if it's the last tabbable node of the LAST group)\n          var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;\n          var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];\n          destinationNode = _destinationGroup.firstTabbableNode;\n        } else if (!isTabEvent(event)) {\n          // user must have customized the nav keys so we have to move focus manually _within_\n          //  the active group: do this based on the order determined by tabbable()\n          destinationNode = containerGroup.nextTabbableNode(target);\n        }\n      }\n    } else {\n      // no groups available\n      // NOTE: the fallbackFocus option does not support returning false to opt-out\n      destinationNode = getNodeForOption('fallbackFocus');\n    }\n    if (destinationNode) {\n      if (isTabEvent(event)) {\n        // since tab natively moves focus, we wouldn't have a destination node unless we\n        //  were on the edge of a container and had to move to the next/previous edge, in\n        //  which case we want to prevent default to keep the browser from moving focus\n        //  to where it normally would\n        event.preventDefault();\n      }\n      tryFocus(destinationNode);\n    }\n    // else, let the browser take care of [shift+]tab and move the focus\n  };\n\n  var checkKey = function checkKey(event) {\n    if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {\n      event.preventDefault();\n      trap.deactivate();\n      return;\n    }\n    if (config.isKeyForward(event) || config.isKeyBackward(event)) {\n      checkKeyNav(event, config.isKeyBackward(event));\n    }\n  };\n  var checkClick = function checkClick(e) {\n    var target = getActualTarget(e);\n    if (findContainerIndex(target, e) >= 0) {\n      return;\n    }\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      return;\n    }\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      return;\n    }\n    e.preventDefault();\n    e.stopImmediatePropagation();\n  };\n\n  //\n  // EVENT LISTENERS\n  //\n\n  var addListeners = function addListeners() {\n    if (!state.active) {\n      return;\n    }\n\n    // There can be only one listening focus trap at a time\n    activeFocusTraps.activateTrap(trapStack, trap);\n\n    // Delay ensures that the focused element doesn't capture the event\n    // that caused the focus trap activation.\n    state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {\n      tryFocus(getInitialFocusNode());\n    }) : tryFocus(getInitialFocusNode());\n    doc.addEventListener('focusin', checkFocusIn, true);\n    doc.addEventListener('mousedown', checkPointerDown, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('touchstart', checkPointerDown, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('click', checkClick, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('keydown', checkKey, {\n      capture: true,\n      passive: false\n    });\n    return trap;\n  };\n  var removeListeners = function removeListeners() {\n    if (!state.active) {\n      return;\n    }\n    doc.removeEventListener('focusin', checkFocusIn, true);\n    doc.removeEventListener('mousedown', checkPointerDown, true);\n    doc.removeEventListener('touchstart', checkPointerDown, true);\n    doc.removeEventListener('click', checkClick, true);\n    doc.removeEventListener('keydown', checkKey, true);\n    return trap;\n  };\n\n  //\n  // MUTATION OBSERVER\n  //\n\n  var checkDomRemoval = function checkDomRemoval(mutations) {\n    var isFocusedNodeRemoved = mutations.some(function (mutation) {\n      var removedNodes = Array.from(mutation.removedNodes);\n      return removedNodes.some(function (node) {\n        return node === state.mostRecentlyFocusedNode;\n      });\n    });\n\n    // If the currently focused is removed then browsers will move focus to the\n    // <body> element. If this happens, try to move focus back into the trap.\n    if (isFocusedNodeRemoved) {\n      tryFocus(getInitialFocusNode());\n    }\n  };\n\n  // Use MutationObserver - if supported - to detect if focused node is removed\n  // from the DOM.\n  var mutationObserver = typeof window !== 'undefined' && 'MutationObserver' in window ? new MutationObserver(checkDomRemoval) : undefined;\n  var updateObservedNodes = function updateObservedNodes() {\n    if (!mutationObserver) {\n      return;\n    }\n    mutationObserver.disconnect();\n    if (state.active && !state.paused) {\n      state.containers.map(function (container) {\n        mutationObserver.observe(container, {\n          subtree: true,\n          childList: true\n        });\n      });\n    }\n  };\n\n  //\n  // TRAP DEFINITION\n  //\n\n  trap = {\n    get active() {\n      return state.active;\n    },\n    get paused() {\n      return state.paused;\n    },\n    activate: function activate(activateOptions) {\n      if (state.active) {\n        return this;\n      }\n      var onActivate = getOption(activateOptions, 'onActivate');\n      var onPostActivate = getOption(activateOptions, 'onPostActivate');\n      var checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');\n      if (!checkCanFocusTrap) {\n        updateTabbableNodes();\n      }\n      state.active = true;\n      state.paused = false;\n      state.nodeFocusedBeforeActivation = doc.activeElement;\n      onActivate === null || onActivate === void 0 ? void 0 : onActivate();\n      var finishActivation = function finishActivation() {\n        if (checkCanFocusTrap) {\n          updateTabbableNodes();\n        }\n        addListeners();\n        updateObservedNodes();\n        onPostActivate === null || onPostActivate === void 0 ? void 0 : onPostActivate();\n      };\n      if (checkCanFocusTrap) {\n        checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);\n        return this;\n      }\n      finishActivation();\n      return this;\n    },\n    deactivate: function deactivate(deactivateOptions) {\n      if (!state.active) {\n        return this;\n      }\n      var options = _objectSpread2({\n        onDeactivate: config.onDeactivate,\n        onPostDeactivate: config.onPostDeactivate,\n        checkCanReturnFocus: config.checkCanReturnFocus\n      }, deactivateOptions);\n      clearTimeout(state.delayInitialFocusTimer); // noop if undefined\n      state.delayInitialFocusTimer = undefined;\n      removeListeners();\n      state.active = false;\n      state.paused = false;\n      updateObservedNodes();\n      activeFocusTraps.deactivateTrap(trapStack, trap);\n      var onDeactivate = getOption(options, 'onDeactivate');\n      var onPostDeactivate = getOption(options, 'onPostDeactivate');\n      var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');\n      var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');\n      onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();\n      var finishDeactivation = function finishDeactivation() {\n        delay(function () {\n          if (returnFocus) {\n            tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));\n          }\n          onPostDeactivate === null || onPostDeactivate === void 0 ? void 0 : onPostDeactivate();\n        });\n      };\n      if (returnFocus && checkCanReturnFocus) {\n        checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);\n        return this;\n      }\n      finishDeactivation();\n      return this;\n    },\n    pause: function pause(pauseOptions) {\n      if (state.paused || !state.active) {\n        return this;\n      }\n      var onPause = getOption(pauseOptions, 'onPause');\n      var onPostPause = getOption(pauseOptions, 'onPostPause');\n      state.paused = true;\n      onPause === null || onPause === void 0 ? void 0 : onPause();\n      removeListeners();\n      updateObservedNodes();\n      onPostPause === null || onPostPause === void 0 ? void 0 : onPostPause();\n      return this;\n    },\n    unpause: function unpause(unpauseOptions) {\n      if (!state.paused || !state.active) {\n        return this;\n      }\n      var onUnpause = getOption(unpauseOptions, 'onUnpause');\n      var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');\n      state.paused = false;\n      onUnpause === null || onUnpause === void 0 ? void 0 : onUnpause();\n      updateTabbableNodes();\n      addListeners();\n      updateObservedNodes();\n      onPostUnpause === null || onPostUnpause === void 0 ? void 0 : onPostUnpause();\n      return this;\n    },\n    updateContainerElements: function updateContainerElements(containerElements) {\n      var elementsAsArray = [].concat(containerElements).filter(Boolean);\n      state.containers = elementsAsArray.map(function (element) {\n        return typeof element === 'string' ? doc.querySelector(element) : element;\n      });\n      if (state.active) {\n        updateTabbableNodes();\n      }\n      updateObservedNodes();\n      return this;\n    }\n  };\n\n  // initialize container elements\n  trap.updateContainerElements(elements);\n  return trap;\n};\n\nexport { createFocusTrap };\n//# sourceMappingURL=focus-trap.esm.js.map\n"],"mappings":"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"}

package/dist/dso-toolkit/p-9b14a015.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as s,h as t,F as l,f as o,g as c}from"./p-26cdce1c.js";import{c as a}from"./p-6a1980b4.js";import{c as i}from"./p-6c543986.js";const d=":host{display:block;background-color:#f2f2f2;color:#000;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host(:not([active]):not([fixed])){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";const b=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,null,t("slot",null),!this.fixed&&t("button",{type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"Sluiten")))}};b.style=d;const n='.sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline;margin-inline:-32px;min-height:24px;padding-inline:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}';const r=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=i("DsoSelectable");this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,null,t("div",{class:a("dso-selectable-container",{"has-info-button":s})},t("div",{class:a("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:e=>this.dsoChange.emit(e),onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null)),s&&t(l,null,!this.infoFixed&&t("dso-info-button",{active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active}))),s&&t("dso-info",{id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",null,t("slot",{name:"info"}))))}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return c(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};r.style=n;export{b as dso_info,r as dso_selectable};
+//# sourceMappingURL=p-9b14a015.entry.js.map

package/dist/dso-toolkit/p-9b14a015.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["infoCss","Info","render","h","Fragment","this","fixed","type","onClick","e","dsoClose","emit","icon","class","selectableCss","Selectable","fallbackIdentifier","createIdentifier","async","active","infoActive","componentDidLoad","_a","mutationObserver","disconnect","MutationObserver","forceUpdate","host","observe","childList","setIndeterminate","disconnectedCallback","input","HTMLInputElement","indeterminate","hasInfo","querySelector","clsx","keyboardFocus","id","getIdentifier","value","name","invalid","toString","infoFixed","describedById","undefined","labelledById","disabled","required","checked","onChange","dsoChange","onBlur","onKeyUp","ref","el","htmlFor","onDsoToggle","detail","onDsoClose","identifier"],"sources":["./src/components/info/info.scss?tag=dso-info&encapsulation=shadow","./src/components/info/info.tsx","./src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","./src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active]):not([fixed])) {\r\n  display: none;\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include selectable.root(\"dso-info\", false);\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    @include selectable.invalid();\r\n  }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n  @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n  display: inline-block;\r\n  position: relative;\r\n  padding-inline-start: units.$u4;\r\n\r\n  &.has-info-button {\r\n    padding-inline-end: units.$u4;\r\n  }\r\n\r\n  .dso-selectable-input-wrapper {\r\n    display: inline;\r\n    margin-inline: -#{units.$u4};\r\n    min-height: units.$u3;\r\n    padding-inline: units.$u4;\r\n\r\n    &:focus-within.dso-keyboard-focus {\r\n      @include utilities.focus-outline();\r\n    }\r\n\r\n    input[type=\"radio\"],\r\n    input[type=\"checkbox\"] {\r\n      &:focus + label::before {\r\n        @include selectable.selectableBoxShadow(\r\n          selectable.$border-width,\r\n          var(--dso-selectable-color, selectable.$valid-color)\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndso-info-button {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Element,\r\n  State,\r\n  forceUpdate,\r\n  Watch,\r\n  Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop()\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={(e) => this.dsoChange.emit(e)}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot></slot>\r\n              </label>\r\n            ) : (\r\n              <label></label>\r\n            )}\r\n          </div>\r\n          {hasInfo && (\r\n            <Fragment>\r\n              {!this.infoFixed && (\r\n                <dso-info-button\r\n                  active={this.infoActive}\r\n                  onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n                ></dso-info-button>\r\n              )}\r\n            </Fragment>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"],"mappings":"+IAAA,MAAMA,EAAU,kqB,MCOHC,EAAI,M,uGAmBfC,SACE,OACEC,EAACC,EAAQ,KACPD,EAAA,cACEE,KAAKC,OACLH,EAAA,UAAQI,KAAK,SAASC,QAAUC,GAAMJ,KAAKK,SAASC,KAAKF,IACvDN,EAAA,YAAUS,KAAK,UACfT,EAAA,QAAMU,MAAM,WAAS,Y,aCjCjC,MAAMC,EAAgB,stL,MCsBTC,EAAU,M,8DA0GbV,KAAAW,mBAAqBC,EAAiB,iB,oTAlBjC,M,mBAGG,K,CAShBC,iBAAiBC,GACfd,KAAKe,WAAaD,IAAM,MAANA,SAAM,EAANA,GAAWd,KAAKe,U,CASpCC,mB,OACEC,EAAAjB,KAAKkB,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,aAEvBnB,KAAKkB,iBAAmB,IAAIE,kBAAiB,IAAMC,EAAYrB,KAAKsB,QACpEtB,KAAKkB,iBAAiBK,QAAQvB,KAAKsB,KAAM,CACvCE,UAAW,OAGbxB,KAAKyB,kB,CAGPC,uB,OACET,EAAAjB,KAAKkB,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,Y,CAIzBM,mBACE,KAAMzB,KAAK2B,iBAAiBC,mBAAqB5B,KAAKE,OAAS,WAAY,CACzE,M,CAGFF,KAAK2B,MAAME,gBAAkB7B,KAAK6B,a,CAGpChC,S,MACE,MAAMiC,IAAY9B,KAAKsB,KAAKS,cAAc,iBAE1C,OACEjC,EAACC,EAAQ,KACPD,EAAA,OAAKU,MAAOwB,EAAK,2BAA4B,CAAE,kBAAmBF,KAChEhC,EAAA,OAAKU,MAAOwB,EAAK,+BAAgC,CAAE,qBAAsBhC,KAAKiC,iBAC5EnC,EAAA,SACEI,KAAMF,KAAKE,KACXgC,GAAIlC,KAAKmC,gBACTC,MAAOpC,KAAKoC,MACZC,KAAMrC,KAAKqC,KAAI,gBACDpB,EAAAjB,KAAKsC,WAAO,MAAArB,SAAA,SAAAA,EAAEsB,WAAU,mBACpBT,GAAW9B,KAAKwC,UAAYxC,KAAKyC,cAAgBC,UAAS,kBAC3D1C,KAAK2C,aACtBC,SAAU5C,KAAK4C,SACfC,SAAU7C,KAAK6C,SACfC,QAAS9C,KAAK8C,QACdC,SAAW3C,GAAMJ,KAAKgD,UAAU1C,KAAKF,GACrC6C,OAAQ,IAAOjD,KAAKiC,cAAgB,MACpCiB,QAAS,IAAOlD,KAAKiC,cAAgB,KACrCkB,IAAMC,GAAQpD,KAAK2B,MAAQyB,KAE3BpD,KAAK2C,aACL7C,EAAA,SAAOuD,QAASrD,KAAKmC,iBACnBrC,EAAA,cAGFA,EAAA,eAGHgC,GACChC,EAACC,EAAQ,MACLC,KAAKwC,WACL1C,EAAA,mBACEgB,OAAQd,KAAKe,WACbuC,YAAclD,GAAOJ,KAAKe,WAAaX,EAAEmD,OAAOzC,WAMzDgB,GACChC,EAAA,YACEoC,GAAIJ,GAAW9B,KAAKwC,UAAYxC,KAAKyC,cAAgBC,UACrDzC,MAAOD,KAAKwC,UACZ1B,OAAQd,KAAKe,WACbyC,WAAY,IAAOxD,KAAKe,WAAa,OAErCjB,EAAA,WACEA,EAAA,QAAMuC,KAAK,W,CAQfF,gB,MACN,OAAOlB,EAAAjB,KAAKyD,cAAU,MAAAxC,SAAA,EAAAA,EAAIjB,KAAKW,kB"}

package/dist/dso-toolkit/p-9c2d4a91.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,F as i,g as e}from"./p-26cdce1c.js";const h="*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}:host(:focus){outline:none}";const o=class{constructor(s){t(this,s);this.click=()=>{this.active?this.close():this.open()};this.open=()=>{this.active=true;this.host.addEventListener("keydown",this.keyDownListener);this.host.addEventListener("focusout",this.focusOutListener)};this.close=()=>{this.host.removeEventListener("focusout",this.focusOutListener);this.host.removeEventListener("keydown",this.keyDownListener);this.active=false};this.focusOutListener=t=>{if(!this.host.contains(t.relatedTarget)){this.close()}};this.keyDownListener=t=>{var s;if(!t.defaultPrevented&&t.key==="Escape"){this.close();(s=this.infoButton)===null||s===void 0?void 0:s.setFocus();t.preventDefault()}return};this.active=false;this.label="Toelichting";this.position="right";this.small=undefined;this.secondary=undefined}render(){return s(i,null,s("dso-info-button",{"aria-describedby":"toggle",onClick:this.click,label:this.label,active:this.active,secondary:this.secondary,ref:t=>this.infoButton=t}),s("dso-tooltip",{stateless:true,descriptive:true,id:"toggle",active:this.active,position:this.position,small:this.small},s("slot",null)))}get host(){return e(this)}};o.style=h;export{o as dso_toggletip};
+//# sourceMappingURL=p-9c2d4a91.entry.js.map

package/dist/dso-toolkit/p-9c2d4a91.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toggletipCss","Toggletip","this","click","active","close","open","host","addEventListener","keyDownListener","focusOutListener","removeEventListener","event","contains","relatedTarget","defaultPrevented","key","_a","infoButton","setFocus","preventDefault","render","h","Fragment","onClick","label","secondary","ref","element","stateless","descriptive","id","position","small"],"sources":["./src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","./src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n","import { h, Component, Fragment, Element, Prop, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-toggletip\",\r\n  styleUrl: \"toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Toggletip {\r\n  @Element()\r\n  host!: HTMLDsoToggletipElement;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  /**\r\n   * Toggletip label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting\";\r\n\r\n  /**\r\n   * Toggletip position.\r\n   */\r\n  @Prop()\r\n  position: \"top\" | \"right\" | \"bottom\" | \"left\" = \"right\";\r\n\r\n  /**\r\n   * Set to true for small Toggletip.\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Set to true for secondary Toggletip.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n  private click = () => {\r\n    this.active ? this.close() : this.open();\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (!event.defaultPrevented && event.key === \"Escape\") {\r\n      this.close();\r\n      this.infoButton?.setFocus();\r\n      event.preventDefault();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <dso-info-button\r\n          aria-describedby=\"toggle\"\r\n          onClick={this.click}\r\n          label={this.label}\r\n          active={this.active}\r\n          secondary={this.secondary}\r\n          ref={(element) => (this.infoButton = element)}\r\n        />\r\n        <dso-tooltip stateless descriptive id=\"toggle\" active={this.active} position={this.position} small={this.small}>\r\n          <slot />\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAe,oG,MCORC,EAAS,M,yBAiCZC,KAAAC,MAAQ,KACdD,KAAKE,OAASF,KAAKG,QAAUH,KAAKI,MAAM,EAGlCJ,KAAAI,KAAO,KACbJ,KAAKE,OAAS,KACdF,KAAKK,KAAKC,iBAAiB,UAAWN,KAAKO,iBAC3CP,KAAKK,KAAKC,iBAAiB,WAAYN,KAAKQ,iBAAiB,EAGvDR,KAAAG,MAAQ,KACdH,KAAKK,KAAKI,oBAAoB,WAAYT,KAAKQ,kBAC/CR,KAAKK,KAAKI,oBAAoB,UAAWT,KAAKO,iBAC9CP,KAAKE,OAAS,KAAK,EAGbF,KAAAQ,iBAAoBE,IAC1B,IAAKV,KAAKK,KAAKM,SAASD,EAAME,eAAwB,CACpDZ,KAAKG,O,GAIDH,KAAAO,gBAAmBG,I,MACzB,IAAKA,EAAMG,kBAAoBH,EAAMI,MAAQ,SAAU,CACrDd,KAAKG,SACLY,EAAAf,KAAKgB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,WACjBP,EAAMQ,gB,CAGR,Q,YAzDO,M,WAMD,c,cAMwC,Q,8CAgDhDC,SACE,OACEC,EAAAC,EAAA,KACED,EAAA,sCACmB,SACjBE,QAAStB,KAAKC,MACdsB,MAAOvB,KAAKuB,MACZrB,OAAQF,KAAKE,OACbsB,UAAWxB,KAAKwB,UAChBC,IAAMC,GAAa1B,KAAKgB,WAAaU,IAEvCN,EAAA,eAAaO,UAAS,KAACC,YAAW,KAACC,GAAG,SAAS3B,OAAQF,KAAKE,OAAQ4B,SAAU9B,KAAK8B,SAAUC,MAAO/B,KAAK+B,OACvGX,EAAA,c"}

package/dist/dso-toolkit/p-9d64a2f4.entry.js

@@ -0,0 +1,2 @@
+import{h as e,F as t,r as o,c as i}from"./p-26cdce1c.js";import{c as n}from"./p-6a1980b4.js";const r=({owner:o,ancestors:i,item:s,index:a,level:l,setSize:c})=>{var d,h,p,u;return e("li",{key:s.id,class:n("tree-item",{"has-child":s.hasItems,"is-expanded":!!s.open&&!!((d=s.items)===null||d===void 0?void 0:d.length)}),role:"none"},e("div",{class:"tree-branch-control"},s.hasItems?e("div",{onClick:e=>o.itemClick(e,i,s)},e("dso-icon",{icon:s.open?"minus-square":"plus-square"})):e("dso-icon",null)),e("p",{class:n("tree-content",{active:s.active},{selected:s.selected}),tabindex:l===1&&a===0?0:-1,role:"treeitem","aria-expanded":s.hasItems?""+(!!s.open&&!!((h=s.items)===null||h===void 0?void 0:h.length)):undefined,"aria-current":s.active?"true":undefined,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":s.loading?"true":undefined,"data-item-id":s.id,onClick:e=>o.itemClick(e,i,s)},s.selected&&e("span",{class:"sr-only"},"Resultaat: "),s.href?e("a",{href:s.href,tabindex:"-1"},s.label):e("span",null,s.label),(p=s.icons)===null||p===void 0?void 0:p.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),s.open&&e(t,null,s.hasItems&&!s.items&&s.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},(u=s.items)===null||u===void 0?void 0:u.map(((t,n,a)=>e(r,{owner:o,ancestors:[...i,s],item:t,index:n,level:l+1,setSize:a.length}))))))};const s=':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-left:0}:host ul[role=group]::before{border-left:1px solid #275937;content:"";height:8px;left:44px;position:absolute;top:0;width:0}:host li:not(.has-child)::before{border-top:1px solid #275937;content:"";height:0;left:12px;position:absolute;top:20px;width:16px}:host li:not(.has-child)::after{border-left:1px solid #275937;content:"";height:100%;left:12px;position:absolute;top:8px;width:0}:host li:not(.has-child):last-child::after{height:20px;top:0}:host li.has-child::before{border-top:1px solid #275937;content:"";height:0;left:24px;position:absolute;top:20px;width:4px}:host li.has-child:not(:last-child)::after{border-left:1px solid #275937;content:"";height:calc(100% - 24px);left:12px;position:absolute;top:32px;width:0}:host li.has-child.is-expanded:last-child::after{border-left:1px solid #275937;content:"";height:calc(100% - 32px);left:12px;position:absolute;top:32px;width:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin:8px 8px 8px 0;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0;max-width:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const a=class{constructor(e){o(this,e);this.dsoOpenItem=i(this,"dsoOpenItem",7);this.dsoCloseItem=i(this,"dsoCloseItem",7);this.dsoClickItem=i(this,"dsoClickItem",7);this.keyDownListener=e=>{if(e.defaultPrevented){return}const t=e=>e.length===1&&e.match(/\S/);const o=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(e.target instanceof HTMLParagraphElement)||!(o instanceof HTMLElement)){return}switch(e.key){case"ArrowDown":a.moveFocus(o,e.target,"next");break;case"ArrowUp":a.moveFocus(o,e.target,"previous");break;case"ArrowRight":a.expandItemOrFocusChild(o,e.target);break;case"ArrowLeft":a.collapseItemOrFocusParent(o,e.target);break;case"End":a.moveFocus(o,e.target,"last");break;case"Home":a.moveFocus(o,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(t(e.key)){if(a.setFocusByFirstCharacter(o,e.target,e.key,e.shiftKey)){break}}return}e.preventDefault()};this.itemClick=(e,t,o)=>{if(!(e.target instanceof HTMLElement)){return}const i=e.target.closest(".tree-content");if(i){const n=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(i instanceof HTMLParagraphElement)||!(n instanceof HTMLElement)){return}a.setFocus(n,i);this.dsoClickItem.emit({path:[...t,o],originalEvent:e});return}if(o.open){this.dsoCloseItem.emit([...t,o])}else{this.dsoOpenItem.emit([...t,o])}};this.collection=undefined}async focusItem(e){var t;const o=this.tree;if(!o||e.length===0){return false}const i=e[e.length-1];if(!i){throw new Error("No itemToFocus found")}const n=Array.from((t=o.querySelectorAll("p"))!==null&&t!==void 0?t:[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset["itemId"]===i.id));if(!n){return false}a.setFocus(o,n);return true}static setFocus(e,t){if(t){Array.from(e.querySelectorAll("p")).filter((e=>e.tabIndex===0)).forEach((e=>e.tabIndex=-1));t.tabIndex=0;t.focus()}}static moveFocus(e,t,o){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let n=0;switch(o){case"first":n=0;break;case"previous":n=i.indexOf(t)-1;break;case"next":n=i.indexOf(t)+1;break;case"last":n=i.length-1;break}const r=i[n];if(!r){throw new Error("No focusableItem found")}a.setFocus(e,r)}static expandItemOrFocusChild(e,t){var o;if((t===null||t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){a.moveFocus(e,t,"next")}else{const e=(o=t.previousElementSibling)===null||o===void 0?void 0:o.firstElementChild;if(e instanceof HTMLElement){e.click()}}}static collapseItemOrFocusParent(e,t){var o,i,n;if((t===null||t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){const e=(o=t.previousElementSibling)===null||o===void 0?void 0:o.firstElementChild;if(e instanceof HTMLElement){e.click()}}else{const o=(n=(i=t===null||t===void 0?void 0:t.parentElement)===null||i===void 0?void 0:i.parentElement)===null||n===void 0?void 0:n.previousElementSibling;if(o instanceof HTMLElement){a.setFocus(e,o)}}}static setFocusByFirstCharacter(e,t,o,i){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));if(i){n.reverse()}const r=n.indexOf(t);o=o.toLowerCase();let s=n.find(((e,t)=>{var i;return t>r&&((i=e.textContent)===null||i===void 0?void 0:i.toLowerCase().startsWith(o))}));if(!s){s=n.find(((e,t)=>{var i;return t<r&&((i=e.textContent)===null||i===void 0?void 0:i.toLowerCase().startsWith(o))}))}if(s){a.setFocus(e,s);return true}return false}render(){var t;return e("div",{id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{role:"tree","aria-label":"Objectenboom"},(t=this.collection)===null||t===void 0?void 0:t.map(((t,o)=>e(r,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};a.style=s;export{a as dso_tree_view};
+//# sourceMappingURL=p-9d64a2f4.entry.js.map

package/dist/dso-toolkit/p-9d64a2f4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DsoTreeItem","owner","ancestors","item","index","level","setSize","h","key","id","class","clsx","hasItems","open","_a","items","length","role","onClick","e","itemClick","icon","active","selected","tabindex","_b","undefined","loading","href","label","_c","icons","map","title","Fragment","size","_d","childItem","childIndex","org","treeViewCss","TreeView","this","keyDownListener","event","defaultPrevented","isIndexLetter","str","match","tree","composedPath","find","HTMLElement","className","target","HTMLParagraphElement","moveFocus","expandItemOrFocusChild","collapseItemOrFocusParent","click","setFocusByFirstCharacter","shiftKey","preventDefault","contentElement","closest","eventTarget","setFocus","dsoClickItem","emit","path","originalEvent","dsoCloseItem","dsoOpenItem","async","itemToFocus","Error","elementToFocus","Array","from","querySelectorAll","filter","offsetWidth","offsetHeight","dataset","static","tabIndex","forEach","focus","el","moveTo","focusableItems","indexOf","focusableItem","getAttribute","controlElement","previousElementSibling","firstElementChild","parentTarget","parentElement","char","backwards","reverse","current","toLowerCase","nextItem","textContent","startsWith","render","onKeyDown","ref","element","collection"],"sources":["./src/components/tree-view/tree-item.tsx","./src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","./src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { h, FunctionalComponent, Fragment } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\n\r\ninterface TreeViewItemProps {\r\n  owner: TreeView;\r\n  ancestors: TreeViewItem[];\r\n  item: TreeViewItem;\r\n  index: number;\r\n  level: number;\r\n  setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n  owner,\r\n  ancestors,\r\n  item,\r\n  index,\r\n  level,\r\n  setSize,\r\n}) => (\r\n  <li\r\n    key={item.id}\r\n    class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n    role=\"none\"\r\n  >\r\n    <div class=\"tree-branch-control\">\r\n      {item.hasItems ? (\r\n        <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n          <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n        </div>\r\n      ) : (\r\n        <dso-icon></dso-icon>\r\n      )}\r\n    </div>\r\n    <p\r\n      class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n      tabindex={level === 1 && index === 0 ? 0 : -1}\r\n      role=\"treeitem\"\r\n      aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n      aria-current={item.active ? \"true\" : undefined}\r\n      aria-level={level}\r\n      aria-setsize={setSize}\r\n      aria-posinset={index + 1}\r\n      aria-busy={item.loading ? \"true\" : undefined}\r\n      data-item-id={item.id}\r\n      onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n    >\r\n      {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n      {item.href ? (\r\n        <a href={item.href} tabindex=\"-1\">\r\n          {item.label}\r\n        </a>\r\n      ) : (\r\n        <span>{item.label}</span>\r\n      )}\r\n      {item.icons?.map((icon: TreeViewItemIcon) => (\r\n        <dso-icon icon={icon.icon} title={icon.label}></dso-icon>\r\n      ))}\r\n    </p>\r\n    {item.open && (\r\n      <>\r\n        {item.hasItems && !item.items && item.loading ? (\r\n          <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n        ) : (\r\n          <ul role=\"group\">\r\n            {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n              <DsoTreeItem\r\n                owner={owner}\r\n                ancestors={[...ancestors, item]}\r\n                item={childItem}\r\n                index={childIndex}\r\n                level={level + 1}\r\n                setSize={org.length}\r\n              ></DsoTreeItem>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </>\r\n    )}\r\n  </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n  ul {\r\n    list-style-type: none;\r\n    padding-inline-start: core-tree-view-variables.$indent;\r\n    position: relative;\r\n  }\r\n\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  ul[role=\"tree\"] {\r\n    padding-left: 0;\r\n  }\r\n\r\n  // connects branch or leaf to parent\r\n  ul[role=\"group\"]::before {\r\n    @include core-tree-view-mixins.vertical-line(\r\n      core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n      0,\r\n      core-tree-view-variables.$vspace\r\n    );\r\n  }\r\n\r\n  li:not(.has-child) {\r\n    // horizontal connector for a leaf\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a leaf\r\n    &::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vspace,\r\n        100%\r\n      );\r\n    }\r\n\r\n    // vertical connector for the last leaf\r\n    &:last-child::after {\r\n      height: core-tree-view-variables.$vcenter;\r\n      top: 0;\r\n    }\r\n  }\r\n\r\n  li.has-child {\r\n    // horizontal connector for a branch\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$icon-size,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a branch (not last)\r\n    &:not(:last-child)::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - core-tree-view-variables.$icon-size)\r\n      );\r\n    }\r\n\r\n    // vertical line after a expanded branch (creating dead ends)\r\n    &.is-expanded:last-child::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n      );\r\n    }\r\n  }\r\n\r\n  .tree-branch-control {\r\n    color: colors.$grasgroen;\r\n    display: inline-block;\r\n    font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n    margin: core-tree-view-variables.$vspace core-tree-view-variables.$hspace core-tree-view-variables.$vspace 0;\r\n    vertical-align: top;\r\n\r\n    > div {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  .tree-content {\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    margin: core-tree-view-variables.$vspace 0;\r\n    max-width: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n    a {\r\n      color: scaffolding.$text-color;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        color: scaffolding.$text-color;\r\n        text-decoration: none;\r\n      }\r\n\r\n      &:active {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.selected {\r\n      color: scaffolding.$text-color;\r\n      font-weight: 700;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      color: colors.$mauve;\r\n      font-style: italic;\r\n      font-weight: 700;\r\n\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n\r\n      a {\r\n        color: colors.$mauve;\r\n\r\n        &:hover,\r\n        &:focus {\r\n          text-decoration: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    dso-icon {\r\n      color: colors.$grasgroen;\r\n      font-size: 0.75em;\r\n      margin-left: 0.5em;\r\n      vertical-align: text-bottom;\r\n    }\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Prop, Method } from \"@stencil/core\";\r\n\r\nimport { TreeViewPointerEvent, TreeViewItem } from \"./tree-view.interfaces\";\r\nimport { DsoTreeItem } from \"./tree-item\";\r\n\r\n@Component({\r\n  tag: \"dso-tree-view\",\r\n  styleUrl: \"./tree-view.scss\",\r\n  shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n  private tree?: HTMLElement;\r\n\r\n  /**\r\n   * The collection of TreeViewItems\r\n   */\r\n  @Prop()\r\n  collection!: TreeViewItem[];\r\n\r\n  /**\r\n   * Emitted when a tree view item is opened.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is closed.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is clicked.\r\n   * The `detail` property of the `CustomEvent` will contain an object with:\r\n   * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n   * `originalEvent` = the original click event.\r\n   * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n   * state on the last TreeViewItem in path and clear all other active item states).\r\n   */\r\n  @Event()\r\n  dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n  /**\r\n   * Set focus on the last item in the specified path.\r\n   * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n   * @async\r\n   * @returns Whether the item was found.\r\n   */\r\n  @Method()\r\n  async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n    const tree = this.tree;\r\n\r\n    if (!tree || path.length === 0) {\r\n      return false;\r\n    }\r\n\r\n    const itemToFocus = path[path.length - 1];\r\n    if (!itemToFocus) {\r\n      throw new Error(\"No itemToFocus found\");\r\n    }\r\n\r\n    const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n      .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n    if (!elementToFocus) {\r\n      return false;\r\n    }\r\n\r\n    TreeView.setFocus(tree, elementToFocus);\r\n\r\n    return true;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n    const tree = event\r\n      .composedPath()\r\n      .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n    if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        TreeView.moveFocus(tree, event.target, \"next\");\r\n        break;\r\n      case \"ArrowUp\":\r\n        TreeView.moveFocus(tree, event.target, \"previous\");\r\n        break;\r\n      case \"ArrowRight\":\r\n        TreeView.expandItemOrFocusChild(tree, event.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n        TreeView.collapseItemOrFocusParent(tree, event.target);\r\n        break;\r\n      case \"End\":\r\n        TreeView.moveFocus(tree, event.target, \"last\");\r\n        break;\r\n      case \"Home\":\r\n        TreeView.moveFocus(tree, event.target, \"first\");\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.target.click();\r\n        break;\r\n      default:\r\n        if (isIndexLetter(event.key)) {\r\n          if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n  itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    const contentElement = event.target.closest(\".tree-content\");\r\n\r\n    if (contentElement) {\r\n      const tree = event\r\n        .composedPath()\r\n        .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n      if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n        return;\r\n      }\r\n\r\n      TreeView.setFocus(tree, contentElement);\r\n      this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n      return;\r\n    }\r\n\r\n    if (item.open) {\r\n      this.dsoCloseItem.emit([...ancestors, item]);\r\n    } else {\r\n      this.dsoOpenItem.emit([...ancestors, item]);\r\n    }\r\n  };\r\n\r\n  private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n    if (target) {\r\n      (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n        .filter((item) => item.tabIndex === 0)\r\n        .forEach((item) => (item.tabIndex = -1));\r\n\r\n      target.tabIndex = 0;\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0\r\n    );\r\n\r\n    let index = 0;\r\n    switch (moveTo) {\r\n      case \"first\":\r\n        index = 0;\r\n        break;\r\n      case \"previous\":\r\n        index = focusableItems.indexOf(el) - 1;\r\n        break;\r\n      case \"next\":\r\n        index = focusableItems.indexOf(el) + 1;\r\n        break;\r\n      case \"last\":\r\n        index = focusableItems.length - 1;\r\n        break;\r\n    }\r\n\r\n    const focusableItem = focusableItems[index];\r\n    if (!focusableItem) {\r\n      throw new Error(\"No focusableItem found\");\r\n    }\r\n\r\n    TreeView.setFocus(tree, focusableItem);\r\n  }\r\n\r\n  private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      TreeView.moveFocus(tree, target, \"next\");\r\n    } else {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    } else {\r\n      const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n      if (parentTarget instanceof HTMLElement) {\r\n        TreeView.setFocus(tree, parentTarget);\r\n      }\r\n    }\r\n  }\r\n\r\n  private static setFocusByFirstCharacter(\r\n    tree: HTMLElement,\r\n    el: HTMLElement,\r\n    char: string,\r\n    backwards: boolean\r\n  ): boolean {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0\r\n    );\r\n\r\n    if (backwards) {\r\n      focusableItems.reverse();\r\n    }\r\n\r\n    const current = focusableItems.indexOf(el);\r\n\r\n    char = char.toLowerCase();\r\n    let nextItem = focusableItems.find(\r\n      (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char)\r\n    );\r\n    if (!nextItem) {\r\n      nextItem = focusableItems.find(\r\n        (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char)\r\n      );\r\n    }\r\n\r\n    if (nextItem) {\r\n      TreeView.setFocus(tree, nextItem);\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        id=\"tree\"\r\n        class=\"dso-tree\"\r\n        onKeyDown={(e) => this.keyDownListener(e)}\r\n        ref={(element) => (this.tree = element)}\r\n      >\r\n        <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n          {this.collection?.map((item, index) => (\r\n            <DsoTreeItem\r\n              owner={this}\r\n              ancestors={[]}\r\n              item={item}\r\n              index={index}\r\n              level={1}\r\n              setSize={this.collection.length}\r\n            ></DsoTreeItem>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-9eccd618.js

@@ -0,0 +1,2 @@
+import{c as t}from"./p-26713aef.js";class s{static get state(){if(!this._state){s.initializeStore()}return this._state}static toggle(t){this._state[t]=!this._state[t]}static initializeStore(){const{state:i}=t({});s._state=i}}export{s as A};
+//# sourceMappingURL=p-9eccd618.js.map

package/dist/dso-toolkit/p-9eccd618.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AnnotationService","state","this","_state","initializeStore","static","id","createStore"],"sources":["./src/services/annotation.service.ts"],"sourcesContent":["import { createStore } from \"@stencil/store\";\r\n\r\ninterface AnnotationState {\r\n  [key: string]: boolean;\r\n}\r\n\r\nexport abstract class AnnotationService {\r\n  private static _state: AnnotationState;\r\n\r\n  static get state(): AnnotationState {\r\n    if (!this._state) {\r\n      AnnotationService.initializeStore();\r\n    }\r\n\r\n    return this._state;\r\n  }\r\n\r\n  static toggle(id: string): void {\r\n    this._state[id] = !this._state[id];\r\n  }\r\n\r\n  private static initializeStore(): void {\r\n    const { state } = createStore<AnnotationState>({});\r\n\r\n    AnnotationService._state = state;\r\n  }\r\n}\r\n"],"mappings":"0CAMsBA,EAGTC,mBACT,IAAKC,KAAKC,OAAQ,CAChBH,EAAkBI,iB,CAGpB,OAAOF,KAAKC,M,CAGdE,cAAcC,GACZJ,KAAKC,OAAOG,IAAOJ,KAAKC,OAAOG,E,CAGzBD,yBACN,MAAMJ,MAAEA,GAAUM,EAA6B,IAE/CP,EAAkBG,OAASF,C"}

package/dist/dso-toolkit/p-a4e3638a.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as i,h as s,H as t}from"./p-26cdce1c.js";import{c as n}from"./p-6a1980b4.js";const e=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{background-color:transparent;color:#39870c;border:0;margin-left:8px;padding:0;cursor:pointer;vertical-align:top}button.dso-info-secondary{color:#666}dso-icon{display:block}";const r=class{constructor(s){o(this,s);this.dsoToggle=i(this,"dsoToggle",7);this.active=undefined;this.hover=false;this.secondary=undefined;this.label="Toelichting bij optie"}async setFocus(){var o;(o=this.button)===null||o===void 0?void 0:o.focus()}handleToggle(o){this.active=!this.active;this.dsoToggle.emit({originalEvent:o,active:this.active})}render(){return s(t,{onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},s("button",{type:"button",class:n("btn",{"dso-open":!!this.active,"dso-info-secondary":!!this.secondary}),"aria-expanded":typeof this.active==="boolean"?this.active.toString():undefined,onClick:o=>this.handleToggle(o),ref:o=>this.button=o},s("dso-icon",{icon:this.active||this.hover?"info-active":"info"}),s("span",{class:"sr-only"},this.label)))}};r.style=e;export{r as dso_info_button};
+//# sourceMappingURL=p-a4e3638a.entry.js.map

package/dist/dso-toolkit/p-a4e3638a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["infoButtonCss","InfoButton","async","_a","this","button","focus","handleToggle","e","active","dsoToggle","emit","originalEvent","render","h","Host","onMouseenter","hover","onMouseleave","type","class","clsx","secondary","toString","undefined","onClick","ref","element","icon","label"],"sources":["./src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","./src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include info-button.root();\r\n\r\n  cursor: pointer;\r\n  vertical-align: top;\r\n}\r\n\r\ndso-icon {\r\n  display: block;\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ mutable: true, reflect: true })\r\n  active?: boolean;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.button?.focus();\r\n  }\r\n\r\n  private handleToggle(e: MouseEvent) {\r\n    this.active = !this.active;\r\n    this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n        <button\r\n          type=\"button\"\r\n          class={clsx(\"btn\", { \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n          aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n          onClick={(e) => this.handleToggle(e)}\r\n          ref={(element) => (this.button = element)}\r\n        >\r\n          <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n          <span class=\"sr-only\">{this.label}</span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6FAAA,MAAMA,EAAgB,iX,MCUTC,EAAU,M,+FAUb,M,oCAYA,uB,CAYRC,iB,OACEC,EAAAC,KAAKC,UAAM,MAAAF,SAAA,SAAAA,EAAEG,O,CAGPC,aAAaC,GACnBJ,KAAKK,QAAUL,KAAKK,OACpBL,KAAKM,UAAUC,KAAK,CAAEC,cAAeJ,EAAGC,OAAQL,KAAKK,Q,CAGvDI,SACE,OACEC,EAACC,EAAI,CAACC,aAAc,IAAOZ,KAAKa,MAAQ,KAAOC,aAAc,IAAOd,KAAKa,MAAQ,OAC/EH,EAAA,UACEK,KAAK,SACLC,MAAOC,EAAK,MAAO,CAAE,aAAcjB,KAAKK,OAAQ,uBAAwBL,KAAKkB,YAAY,uBACnElB,KAAKK,SAAW,UAAYL,KAAKK,OAAOc,WAAaC,UAC3EC,QAAUjB,GAAMJ,KAAKG,aAAaC,GAClCkB,IAAMC,GAAavB,KAAKC,OAASsB,GAEjCb,EAAA,YAAUc,KAAMxB,KAAKK,QAAUL,KAAKa,MAAQ,cAAgB,SAC5DH,EAAA,QAAMM,MAAM,WAAWhB,KAAKyB,Q"}

package/dist/dso-toolkit/p-b1627d68.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as i,h as e,F as t,g as l}from"./p-26cdce1c.js";import{v as r}from"./p-5d7f4ff2.js";const d="button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";const o=class{constructor(e){s(this,e);this.dsoActiveChange=i(this,"dsoActiveChange",7);this.checked=false;this.disabled=false;this.accessibleLabel=undefined;this.labelledbyId=undefined;this.hasVisibleLabel=undefined;this.identifier=r()}handleSwitch(s){this.dsoActiveChange.emit({originalEvent:s,checked:!this.checked})}componentWillLoad(){this.hasVisibleLabel=this.host.querySelector("*")!==null}render(){return e(t,null,e("button",Object.assign({id:this.identifier,role:"switch",class:"dso-slider","aria-checked":""+this.checked,disabled:this.disabled,onClick:s=>this.handleSwitch(s)},this.accessibleLabel?{"aria-label":this.accessibleLabel}:{},this.labelledbyId?{"aria-labelledby":this.labelledbyId}:{}),e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"40",height:"20",viewBox:"0 0 40 20"},e("g",{fill:"none","fill-rule":"evenodd"},e("rect",{width:"40",height:"20",fill:"currentColor",rx:"10"}),e("circle",{cy:"10",r:"8",fill:"currentColor"})))),this.hasVisibleLabel&&e("label",{htmlFor:this.identifier},e("slot",null)))}get host(){return l(this)}};o.style=d;export{o as dso_slide_toggle};
+//# sourceMappingURL=p-b1627d68.entry.js.map

package/dist/dso-toolkit/p-b1627d68.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["slideToggleCss","SlideToggle","v4","handleSwitch","e","this","dsoActiveChange","emit","originalEvent","checked","componentWillLoad","hasVisibleLabel","host","querySelector","render","h","Fragment","Object","assign","id","identifier","role","class","disabled","onClick","accessibleLabel","labelledbyId","xmlns","width","height","viewBox","fill","rx","cy","r","htmlFor"],"sources":["./src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","./src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGAAA,MAAMA,EAAiB,6vB,MCSVC,EAAW,M,uFAQZ,M,cAMC,M,0GAqBEC,G,CAQLC,aAAaC,GACnBC,KAAKC,gBAAgBC,KAAK,CACxBC,cAAeJ,EACfK,SAAUJ,KAAKI,S,CAInBC,oBACEL,KAAKM,gBAAkBN,KAAKO,KAAKC,cAAc,OAAS,I,CAG1DC,SACE,OACEC,EAAAC,EAAA,KACED,EAAA,SAAAE,OAAAC,OAAA,CACEC,GAAId,KAAKe,WACTC,KAAK,SACLC,MAAM,aAAY,eACJ,GAAKjB,KAAKI,QACxBc,SAAUlB,KAAKkB,SACfC,QAAUpB,GAAMC,KAAKF,aAAaC,IAC7BC,KAAKoB,gBAAkB,CAAE,aAAcpB,KAAKoB,iBAAoB,GAChEpB,KAAKqB,aAAe,CAAE,kBAAmBrB,KAAKqB,cAAiB,IAEpEX,EAAA,OAAKY,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,aACrEf,EAAA,KAAGgB,KAAK,OAAM,YAAW,WACvBhB,EAAA,QAAMa,MAAM,KAAKC,OAAO,KAAKE,KAAK,eAAeC,GAAG,OACpDjB,EAAA,UAAQkB,GAAG,KAAKC,EAAE,IAAIH,KAAK,oBAIhC1B,KAAKM,iBACJI,EAAA,SAAOoB,QAAS9B,KAAKe,YACnBL,EAAA,c"}

package/dist/dso-toolkit/p-b1b53cb3.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as e,H as r}from"./p-26cdce1c.js";const t="*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-left:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner{height:24px;width:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding:12px 16px}:host([size=medium]) .dso-progress-indicator-spinner{height:32px;width:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner{height:48px;width:48px}:host([size=large]):host([block]){padding:24px 16px}";const i=class{constructor(e){s(this,e);this.label="Resultaten laden: een moment geduld alstublieft.";this.size=undefined;this.block=undefined}render(){return e(r,null,e("span",{class:"dso-progress-indicator-spinner",role:"progressbar","aria-labelledby":"progress-indicator-label"},e("svg",{class:"spinner",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},e("style",null,`\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\n              `),e("circle",{class:"path",fill:"none","stroke-width":"10","stroke-linecap":"butt",cx:"50",cy:"50",r:"45"}))),e("span",{id:"progress-indicator-label",class:"dso-progress-indicator-label"},this.label))}};i.style=t;export{i as dso_progress_indicator};
+//# sourceMappingURL=p-b1b53cb3.entry.js.map

package/dist/dso-toolkit/p-b1b53cb3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["progressIndicatorCss","Progressindicator","render","h","Host","class","role","viewBox","xmlns","fill","cx","cy","r","id","this","label"],"sources":["./src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","./src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n  @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include progress-indicator.small();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.small-block();\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include progress-indicator.medium();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.medium-block();\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include progress-indicator.large();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.large-block();\r\n  }\r\n}\r\n","import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          {/* Keep in sync with /packages/css/src/components/progress-indicator/progress-indicator.scss */}\r\n          <svg class=\"spinner\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <style>\r\n              {`\r\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\r\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n              `}\r\n            </style>\r\n            <circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n          </svg>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAuB,qyB,MCOhBC,EAAiB,M,oCAKpB,mD,yCAgBRC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,QAAME,MAAM,iCAAiCC,KAAK,cAAa,kBAAiB,4BAE9EH,EAAA,OAAKE,MAAM,UAAUE,QAAQ,cAAcC,MAAM,8BAC/CL,EAAA,aACG,gjBAOHA,EAAA,UAAQE,MAAM,OAAOI,KAAK,OAAM,eAAc,KAAI,iBAAgB,OAAOC,GAAG,KAAKC,GAAG,KAAKC,EAAE,SAG/FT,EAAA,QAAMU,GAAG,2BAA2BR,MAAM,gCACvCS,KAAKC,O"}

package/dist/dso-toolkit/p-b6f1ae13.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as o}from"./p-26cdce1c.js";import{c as r}from"./p-6a1980b4.js";const e=":host{display:block}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";const t=class{constructor(o){s(this,o);this.status=undefined}render(){return o("section",{class:r("dso-banner",`alert-${this.status}`),role:"alert"},o("slot",null))}};t.style=e;export{t as dso_banner};
+//# sourceMappingURL=p-b6f1ae13.entry.js.map

package/dist/dso-toolkit/p-b6f1ae13.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["bannerCss","Banner","render","h","class","clsx","this","status","role"],"sources":["./src/components/banner/banner.scss?tag=dso-banner&encapsulation=shadow","./src/components/banner/banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/banner\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-banner {\r\n  @include banner.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-banner\",\r\n  styleUrl: \"banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class Banner {\r\n  /**\r\n   * The status of the banner.\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"warning\" | \"danger\" | \"error\";\r\n\r\n  render() {\r\n    return (\r\n      <section class={clsx(\"dso-banner\", `alert-${this.status}`)} role=\"alert\">\r\n        <slot></slot>\r\n      </section>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"+EAAA,MAAMA,EAAY,+G,MCQLC,EAAM,M,+CAOjBC,SACE,OACEC,EAAA,WAASC,MAAOC,EAAK,aAAc,SAASC,KAAKC,UAAWC,KAAK,SAC/DL,EAAA,a"}

package/dist/dso-toolkit/p-c3178955.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as n,F as e,g as o}from"./p-26cdce1c.js";import{i as a}from"./p-33df9903.js";const s=':host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:"";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}';const r=class{constructor(n){i(this,n);this.dsoSelectPage=t(this,"dsoSelectPage",7);this.sizePositionsMap={small:7,medium:9,large:11};this.availablePositions=undefined;this.totalPages=undefined;this.currentPage=undefined;this.formatHref=i=>"#"+i}sizeChangeHandler(i){this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i.detail])}clickHandler(i,t){this.dsoSelectPage.emit({originalEvent:i,page:t,isModifiedEvent:a(i)})}componentDidLoad(){var i;(i=this.responsiveElement)===null||i===void 0?void 0:i.getSize().then((i=>this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i])))}render(){var i,t,o;if(!this.totalPages){return null}if(this.availablePositions===undefined){return n("dso-responsive-element",{ref:i=>this.responsiveElement=i})}const a=this.availablePositions;const s=(i=this.currentPage)!==null&&i!==void 0?i:0;const r=this.getPages(s,this.availablePositions,this.totalPages);return n("dso-responsive-element",{ref:i=>this.responsiveElement=i},n("ul",{class:"pagination"},n("li",{class:s<=1||s>this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1),"aria-label":"Vorige",onClick:i=>{var t;return s&&this.clickHandler(i,(t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1)}},n("dso-icon",{icon:"chevron-left"}))),r.map((i=>n(e,null,this.showEllipsisBeforeLast(r,i,a)&&n("li",null,n("span",null,"...")),n("li",{key:i,class:s===i?"active":undefined},s===i?n("span",{"aria-current":"page"},i):n("a",{href:this.formatHref(i),onClick:t=>this.clickHandler(t,i)},i)),this.showEllipsisAfterFirst(r,i,a)&&n("li",null,n("span",null,"..."))))),n("li",{class:s<1||s>=this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((o=r[r.indexOf(s)+1])!==null&&o!==void 0?o:this.totalPages),"aria-label":"Volgende",onClick:i=>{var t;return s&&this.totalPages&&this.clickHandler(i,(t=r[r.indexOf(s)+1])!==null&&t!==void 0?t:this.totalPages)}},n("dso-icon",{icon:"chevron-right"})))))}getAvailablePositions(i){if(i%2===0){return i-1}if(i<=3){return 3}return i}getPages(i,t,n){if(n+2<=t){return Array.from({length:n},((i,t)=>t+1))}if(t===3){return[i]}if(t===5){return[1,i,n]}return[1,...this.getPageRange(i,t,n),n]}getPageRange(i,t,n){const e=[];const o=Math.floor(t/2);if(i<=o){for(let i=2;i<=t-4;i++){e.push(i)}}if(i>=o&&i<=n-o){if(o===1){if(i>n-2){e.push(n-2)}e.push(i);if(i<3){e.push(3)}}if(o>1){const t=o-3;for(let a=Math.min(i-t,n-o);a<=Math.max(i+t,o);a++){if(a>2&&a<n-1){e.push(a)}}}}if(i>n-o){for(let i=n-(t-5);i<=n-1;i++){e.push(i)}}return e.filter(((i,t,n)=>n.indexOf(i)===t))}showEllipsisAfterFirst(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===0&&e>n-2&&!i.some((i=>i===2))&&n>=7}showEllipsisBeforeLast(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===i.length-1&&e>n-2&&!i.some((i=>i===e-1))&&n>=7}get host(){return o(this)}};r.style=s;export{r as dso_pagination};
+//# sourceMappingURL=p-c3178955.entry.js.map

package/dist/dso-toolkit/p-c3178955.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["paginationCss","Pagination","this","sizePositionsMap","small","medium","large","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","undefined","h","ref","element","currentPage","pages","getPages","class","href","formatHref","_b","indexOf","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","_c","sizePositions","Array","from","length","_value","i","getPageRange","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","Error","some","p"],"sources":["./src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","./src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n  @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n  visibility: hidden;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size]))\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <ul class=\"pagination\">\r\n          <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              aria-label=\"Vorige\"\r\n              onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n            >\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </a>\r\n          </li>\r\n          {pages.map((page) => (\r\n            <>\r\n              {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                <li>\r\n                  <span>...</span>\r\n                </li>\r\n              )}\r\n\r\n              <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                {currentPage === page ? (\r\n                  <span aria-current=\"page\">{page}</span>\r\n                ) : (\r\n                  <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                    {page}\r\n                  </a>\r\n                )}\r\n              </li>\r\n\r\n              {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                <li>\r\n                  <span>...</span>\r\n                </li>\r\n              )}\r\n            </>\r\n          ))}\r\n          <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n              aria-label=\"Volgende\"\r\n              onClick={(e) =>\r\n                currentPage &&\r\n                this.totalPages &&\r\n                this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n              }\r\n            >\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    if (totalPages + 2 <= availablePositions) {\r\n      // + 2 voor de vorige en volgende knop\r\n      return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n    }\r\n\r\n    if (availablePositions === 3) {\r\n      return [currentPage];\r\n    }\r\n\r\n    if (availablePositions === 5) {\r\n      return [1, currentPage, totalPages];\r\n    }\r\n\r\n    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGAAA,MAAMA,EAAgB,w/B,MCsBTC,EAAU,M,sEACbC,KAAAC,iBAA0D,CAChEC,MAAO,EACPC,OAAQ,EACRC,MAAO,I,uGA0B+BC,GAAS,IAAMA,C,CAYvDC,kBAAkBC,GAChBP,KAAKQ,mBAAqBR,KAAKS,sBAAsBT,KAAKC,iBAAiBM,EAAMG,Q,CAG3EC,aAAaC,EAAeP,GAClCL,KAAKa,cAAcC,KAAK,CACtBC,cAAeH,EACfP,OACAW,gBAAiBA,EAAgBJ,I,CAIrCK,mB,OACEC,EAAAlB,KAAKmB,qBAAiB,MAAAD,SAAA,SAAAA,EAClBE,UACDC,MACEC,GACEtB,KAAKQ,mBAAqBR,KAAKS,sBAAsBT,KAAKC,iBAAiBqB,K,CAIpFC,S,UACE,IAAKvB,KAAKwB,WAAY,CACpB,OAAO,I,CAGT,GAAIxB,KAAKQ,qBAAuBiB,UAAW,CACzC,OAAOC,EAAA,0BAAwBC,IAAMC,GAAa5B,KAAKmB,kBAAoBS,G,CAG7E,MAAMpB,EAAqBR,KAAKQ,mBAEhC,MAAMqB,GAAcX,EAAAlB,KAAK6B,eAAW,MAAAX,SAAA,EAAAA,EAAI,EAExC,MAAMY,EAAkB9B,KAAK+B,SAASF,EAAa7B,KAAKQ,mBAAoBR,KAAKwB,YAEjF,OACEE,EAAA,0BAAwBC,IAAMC,GAAa5B,KAAKmB,kBAAoBS,GAClEF,EAAA,MAAIM,MAAM,cACRN,EAAA,MAAIM,MAAOH,GAAe,GAAKA,EAAc7B,KAAKwB,WAAa,kBAAoBC,WACjFC,EAAA,KACEO,KAAMjC,KAAKkC,YAAWC,EAAAL,EAAMA,EAAMM,QAAQP,GAAe,MAAE,MAAAM,SAAA,EAAAA,EAAI,GAAE,aACtD,SACXE,QAAUzB,IAAC,IAAAM,EAAK,OAAAW,GAAe7B,KAAKW,aAAaC,GAAGM,EAAAY,EAAMA,EAAMM,QAAQP,GAAe,MAAE,MAAAX,SAAA,EAAAA,EAAI,EAAE,GAE/FQ,EAAA,YAAUY,KAAK,mBAGlBR,EAAMS,KAAKlC,GACVqB,EAAAc,EAAA,KACGxC,KAAKyC,uBAAuBX,EAAOzB,EAAMG,IACxCkB,EAAA,UACEA,EAAA,oBAIJA,EAAA,MAAIgB,IAAKrC,EAAM2B,MAAOH,IAAgBxB,EAAO,SAAWoB,WACrDI,IAAgBxB,EACfqB,EAAA,uBAAmB,QAAQrB,GAE3BqB,EAAA,KAAGO,KAAMjC,KAAKkC,WAAW7B,GAAOgC,QAAUzB,GAAMZ,KAAKW,aAAaC,EAAGP,IAClEA,IAKNL,KAAK2C,uBAAuBb,EAAOzB,EAAMG,IACxCkB,EAAA,UACEA,EAAA,uBAKRA,EAAA,MAAIM,MAAOH,EAAc,GAAKA,GAAe7B,KAAKwB,WAAa,kBAAoBC,WACjFC,EAAA,KACEO,KAAMjC,KAAKkC,YAAWU,EAAAd,EAAMA,EAAMM,QAAQP,GAAe,MAAE,MAAAe,SAAA,EAAAA,EAAI5C,KAAKwB,YAAW,aACpE,WACXa,QAAUzB,I,MACR,OAAAiB,GACA7B,KAAKwB,YACLxB,KAAKW,aAAaC,GAAGM,EAAAY,EAAMA,EAAMM,QAAQP,GAAe,MAAE,MAAAX,SAAA,EAAAA,EAAIlB,KAAKwB,WAAW,GAGhFE,EAAA,YAAUY,KAAK,qB,CAQnB7B,sBAAsBoC,GAC5B,GAAIA,EAAgB,IAAM,EAAG,CAE3B,OAAOA,EAAgB,C,CAEzB,GAAIA,GAAiB,EAAG,CAEtB,OAAO,C,CAGT,OAAOA,C,CAGDd,SAASF,EAAqBrB,EAA4BgB,GAChE,GAAIA,EAAa,GAAKhB,EAAoB,CAExC,OAAOsC,MAAMC,KAAK,CAAEC,OAAQxB,IAAc,CAACyB,EAAQC,IAAMA,EAAI,G,CAG/D,GAAI1C,IAAuB,EAAG,CAC5B,MAAO,CAACqB,E,CAGV,GAAIrB,IAAuB,EAAG,CAC5B,MAAO,CAAC,EAAGqB,EAAaL,E,CAG1B,MAAO,CAAC,KAAMxB,KAAKmD,aAAatB,EAAarB,EAAoBgB,GAAaA,E,CAGxE2B,aAAatB,EAAqBrB,EAA4BgB,GACpE,MAAM4B,EAAkB,GAExB,MAAMC,EAAgBC,KAAKC,MAAM/C,EAAqB,GAEtD,GAAIqB,GAAewB,EAAe,CAChC,IAAK,IAAIH,EAAI,EAAGA,GAAK1C,EAAqB,EAAG0C,IAAK,CAChDE,EAAMI,KAAKN,E,EAIf,GAAIrB,GAAewB,GAAiBxB,GAAeL,EAAa6B,EAAe,CAC7E,GAAIA,IAAkB,EAAG,CACvB,GAAIxB,EAAcL,EAAa,EAAG,CAChC4B,EAAMI,KAAKhC,EAAa,E,CAG1B4B,EAAMI,KAAK3B,GAEX,GAAIA,EAAc,EAAG,CACnBuB,EAAMI,KAAK,E,EAIf,GAAIH,EAAgB,EAAG,CACrB,MAAMI,EAAqBJ,EAAgB,EAE3C,IACE,IAAIH,EAAII,KAAKI,IAAI7B,EAAc4B,EAAoBjC,EAAa6B,GAChEH,GAAKI,KAAKK,IAAI9B,EAAc4B,EAAoBJ,GAChDH,IACA,CACA,GAAIA,EAAI,GAAKA,EAAI1B,EAAa,EAAG,CAC/B4B,EAAMI,KAAKN,E,IAMnB,GAAIrB,EAAcL,EAAa6B,EAAe,CAC5C,IAAK,IAAIH,EAAI1B,GAAchB,EAAqB,GAAI0C,GAAK1B,EAAa,EAAG0B,IAAK,CAC5EE,EAAMI,KAAKN,E,EAIf,OAAOE,EAAMQ,QAAO,CAACC,EAAGX,EAAGY,IAAMA,EAAE1B,QAAQyB,KAAOX,G,CAG5CP,uBAAuBb,EAAiBzB,EAAcG,GAC5D,MAAMgB,EAAaM,EAAMA,EAAMkB,OAAS,GACxC,IAAKxB,EAAY,CACf,MAAM,IAAIuC,MAAM,gB,CAGlB,OACEjC,EAAMM,QAAQ/B,KAAU,GACxBmB,EAAahB,EAAqB,IACjCsB,EAAMkC,MAAMC,GAAMA,IAAM,KACzBzD,GAAsB,C,CAIlBiC,uBAAuBX,EAAiBzB,EAAcG,GAC5D,MAAMgB,EAAaM,EAAMA,EAAMkB,OAAS,GACxC,IAAKxB,EAAY,CACf,MAAM,IAAIuC,MAAM,gB,CAGlB,OACEjC,EAAMM,QAAQ/B,KAAUyB,EAAMkB,OAAS,GACvCxB,EAAahB,EAAqB,IACjCsB,EAAMkC,MAAMC,GAAMA,IAAMzC,EAAa,KACtChB,GAAsB,C"}

package/dist/dso-toolkit/p-c464da66.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o}from"./p-26cdce1c.js";import{A as n}from"./p-9eccd618.js";import"./p-26713aef.js";const s="dso-annotation-button{display:block}";const i=class{constructor(o){t(this,o);this.identifier=undefined}componentDidLoad(){this.annotationOutput=document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`)}render(){return o("button",{type:"button",class:"dso-tertiary","aria-controls":this.identifier,"aria-expanded":n.state[this.identifier]?"true":"false",onClick:t=>{var o;return(o=this.annotationOutput)===null||o===void 0?void 0:o._toggleAnnotation(t,this.identifier)}},o("dso-icon",{icon:"label"}),o("span",{class:"sr-only"},"Toelichting bekijken"))}};i.style=s;export{i as dso_annotation_button};
+//# sourceMappingURL=p-c464da66.entry.js.map

package/dist/dso-toolkit/p-c464da66.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["annotationButtonCss","AnnotationButton","componentDidLoad","this","annotationOutput","document","querySelector","identifier","render","h","type","class","AnnotationService","state","onClick","e","_a","_toggleAnnotation","icon"],"sources":["./src/components/annotation-button/annotation-button.scss?tag=dso-annotation-button","./src/components/annotation-button/annotation-button.tsx"],"sourcesContent":["dso-annotation-button {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, h, Prop } from \"@stencil/core\";\r\nimport { AnnotationService } from \"../../services/annotation.service\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // We disable shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n  shadow: false,\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string;\r\n\r\n  private annotationOutput!: HTMLDsoAnnotationOutputElement | null;\r\n\r\n  componentDidLoad() {\r\n    this.annotationOutput = document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={AnnotationService.state[this.identifier] ? \"true\" : \"false\"}\r\n        onClick={(e) => this.annotationOutput?._toggleAnnotation(e, this.identifier)}\r\n      >\r\n        <dso-icon icon=\"label\"></dso-icon>\r\n        <span class=\"sr-only\">Toelichting bekijken</span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"uGAAA,MAAMA,EAAsB,uC,MCSfC,EAAgB,M,mDAS3BC,mBACEC,KAAKC,iBAAmBC,SAASC,cAAc,qCAAqCH,KAAKI,e,CAG3FC,SACE,OACEC,EAAA,UACEC,KAAK,SACLC,MAAM,eAAc,gBACLR,KAAKI,WAAU,gBACfK,EAAkBC,MAAMV,KAAKI,YAAc,OAAS,QACnEO,QAAUC,IAAC,IAAAC,EAAK,OAAAA,EAAAb,KAAKC,oBAAgB,MAAAY,SAAA,SAAAA,EAAEC,kBAAkBF,EAAGZ,KAAKI,WAAW,GAE5EE,EAAA,YAAUS,KAAK,UACfT,EAAA,QAAME,MAAM,WAAS,wB"}

package/dist/dso-toolkit/p-c4e1c7cb.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as r}from"./p-26cdce1c.js";import{c as d}from"./p-6a1980b4.js";const e=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#000}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#000}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";const c=class{constructor(r){o(this,r);this.status=undefined}render(){return r("span",{class:d("dso-badge",{[`badge-${this.status}`]:this.status})},r("slot",null))}};c.style=e;export{c as dso_badge};
+//# sourceMappingURL=p-c4e1c7cb.entry.js.map

package/dist/dso-toolkit/p-c4e1c7cb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","Badge","render","h","class","clsx","this","status"],"sources":["./src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-badge {\r\n  @include badge.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\";\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"+EAAA,MAAMA,EAAW,sgC,MCQJC,EAAK,M,+CAOhBC,SACE,OACEC,EAAA,QAAMC,MAAOC,EAAK,YAAa,CAAE,CAAC,SAASC,KAAKC,UAAWD,KAAKC,UAC9DJ,EAAA,a"}

package/dist/dso-toolkit/p-d4f8e1e0.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as o,g as i}from"./p-26cdce1c.js";import{d as r,h as a,c as n,b as s}from"./p-871bfdf9.js";import{c as p}from"./p-6a1980b4.js";import{d as l}from"./p-1805f5b0.js";var d={name:"maxSize",enabled:true,phase:"main",requiresIfExists:["offset","preventOverflow","flip"],fn:function t(e){var o=e.state,i=e.name,a=e.options;var n=r(o,a);var s=o.modifiersData.preventOverflow||{x:0,y:0},p=s.x,l=s.y;var d=o.rects.popper,h=d.width,c=d.height;var f=o.placement.split("-"),m=f[0];var u=m==="left"?"left":"right";var w=m==="top"?"top":"bottom";o.modifiersData[i]={width:h-n[u]-p,height:c-n[w]-l}}};const h=":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0}.tooltip[data-popper-placement=top] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0}.tooltip[data-popper-placement=right] .tooltip-arrow{margin-top:-3px}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;top:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;right:0}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";var c=undefined&&undefined.__classPrivateFieldGet||function(t,e,o,i){if(o==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof e==="function"?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?i:o==="a"?i.call(t):i?i.value:e.get(t)};var f=undefined&&undefined.__classPrivateFieldSet||function(t,e,o,i,r){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!r)throw new TypeError("Private accessor was defined without a setter");if(typeof e==="function"?t!==e||!r:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?r.call(t,o):r?r.value=o:e.set(t,o),o};var m;const u=150;const w={name:"applyMaxSize",enabled:true,phase:s,requires:["maxSize"],fn({state:t}){let{width:e}=t.modifiersData.maxSize;if(e<160){e=160}t.styles.popper=Object.assign(Object.assign({},t.styles.popper),{maxWidth:`${e}px`})}};const g=class{constructor(e){t(this,e);this.callbacks={activate:()=>this.active=true,deactivate:()=>this.active=false};this.onMouseLeave=()=>{var t;if(!this.element.matches(":hover")&&!((t=this.target)===null||t===void 0?void 0:t.matches(":hover"))){this.callbacks.deactivate()}};this.keyDownListener=t=>{if(t.key==="Escape"){this.deactivate()}};this.deactivatePopper=l((()=>{var t;this.hidden=true;(t=this.popper)===null||t===void 0?void 0:t.destroy();this.popper=undefined}),u);m.set(this,void 0);this.descriptive=false;this.position="top";this.strategy="auto";this.noArrow=false;this.stateless=undefined;this.small=undefined;this.active=false;this.hidden=true}async activate(){this.active=true}async deactivate(){this.active=false}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.position})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.element;while(t&&t.parentNode!==document){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&a(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}watchActive(){if(this.active){this.activatePopper();if(!this.stateless){setTimeout((()=>{var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"eventListeners",enabled:true}]});document.addEventListener("keydown",this.keyDownListener)}))}}else{document.removeEventListener("keydown",this.keyDownListener);this.deactivatePopper()}}listenClick(t){t.stopPropagation()}componentDidLoad(){var t;const e=(t=this.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".tooltip");if(!(e instanceof HTMLElement)){throw new Error("tooltip element is not instanceof HTMLElement")}if(!this.stateless&&this.target){this.target.addEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.addEventListener("mouseleave",this.onMouseLeave)));this.target.addEventListener("focus",this.callbacks.activate);this.target.addEventListener("blur",this.callbacks.deactivate)}}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy();if(!this.stateless&&this.target){this.target.removeEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.removeEventListener("mouseleave",this.onMouseLeave)));this.target.removeEventListener("focus",this.callbacks.activate);this.target.removeEventListener("blur",this.callbacks.deactivate)}this.target=undefined}componentDidRender(){var t;if(this.active){(t=this.popper)===null||t===void 0?void 0:t.update()}}render(){return e(o,{class:{hidden:this.hidden},role:"tooltip",onClick:this.listenClick},e("div",{class:p("tooltip",{in:this.active})},!this.noArrow&&e("div",{"data-popper-arrow":true,class:"tooltip-arrow"}),e("div",{"aria-hidden":!this.descriptive||undefined,class:p("tooltip-inner",{"dso-small":this.small})},e("slot",null))))}activatePopper(){var t;this.hidden=false;if(this.popper){return}const e=(t=this.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".tooltip");if(this.target&&e instanceof HTMLElement){this.popper=n(this.target,e,{placement:this.position,modifiers:[d,w,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=c(this,m,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){f(this,m,t,"f")}initializeTarget(){const t=this.element.id;if(!t){console.warn("Unable to find reference tooltip has no [id] attribute.");return}const e=this.element.getRootNode();if(!(e instanceof Document||e instanceof ShadowRoot)){console.warn(`rootNode is not instance of Document or ShadowRoot`);return}const o=e.querySelector(`[aria-describedBy="${t}`);if(!o){console.warn(`Unable to find reference with aria-describedby ${t}`);return}f(this,m,o,"f");return o}get element(){return i(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};m=new WeakMap;g.style=h;export{g as dso_tooltip};
+//# sourceMappingURL=p-d4f8e1e0.entry.js.map

package/dist/dso-toolkit/p-d4f8e1e0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["maxSize","name","enabled","phase","requiresIfExists","fn","_ref","state","options","overflow","detectOverflow","_ref2","modifiersData","preventOverflow","x","y","_state$rects$popper","rects","popper","width","height","_state$placement$spli","placement","split","basePlacement","widthProp","heightProp","tooltipCss","transitionDuration","applyMaxSize","beforeWrite","requires","styles","Object","assign","maxWidth","Tooltip","this","callbacks","activate","active","deactivate","onMouseLeave","element","matches","_a","target","keyDownListener","event","key","deactivatePopper","debounce","hidden","destroy","undefined","_Tooltip_target","set","async","watchPosition","setOptions","position","watchStrategy","setStrategy","strategy","parentNode","document","ShadowRoot","host","parentElement","hasOverflow","watchActive","activatePopper","stateless","setTimeout","modifiers","addEventListener","removeEventListener","listenClick","e","stopPropagation","componentDidLoad","tooltip","shadowRoot","querySelector","HTMLElement","Error","forEach","disconnectedCallback","componentDidRender","update","render","h","Host","class","role","onClick","clsx","in","noArrow","descriptive","small","createPopper","__classPrivateFieldGet","initializeTarget","__classPrivateFieldSet","id","console","warn","rootNode","getRootNode","Document","reference"],"sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","./src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n  name: 'maxSize',\n  enabled: true,\n  phase: 'main',\n  requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n  fn: function fn(_ref) {\n    var state = _ref.state,\n        name = _ref.name,\n        options = _ref.options;\n    var overflow = detectOverflow(state, options);\n\n    var _ref2 = state.modifiersData.preventOverflow || {\n      x: 0,\n      y: 0\n    },\n        x = _ref2.x,\n        y = _ref2.y;\n\n    var _state$rects$popper = state.rects.popper,\n        width = _state$rects$popper.width,\n        height = _state$rects$popper.height;\n\n    var _state$placement$spli = state.placement.split('-'),\n        basePlacement = _state$placement$spli[0];\n\n    var widthProp = basePlacement === 'left' ? 'left' : 'right';\n    var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n    state.modifiersData[name] = {\n      width: width - overflow[widthProp] - x,\n      height: height - overflow[heightProp] - y\n    };\n  }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/tooltip\";\r\n\r\n:host(.hidden) {\r\n  visibility: hidden;\r\n}\r\n\r\n:host-context(dso-toggletip) {\r\n  color: red !important;\r\n\r\n  *[data-popper-placement=\"top\"] {\r\n    .tooltip-arrow {\r\n      margin-left: 3px;\r\n    }\r\n  }\r\n\r\n  *[data-popper-placement=\"right\"] {\r\n    .tooltip-arrow {\r\n      margin-top: 0;\r\n    }\r\n  }\r\n\r\n  *[data-popper-placement=\"bottom\"] {\r\n    .tooltip-arrow {\r\n      margin-left: 3px;\r\n    }\r\n  }\r\n\r\n  *[data-popper-placement=\"left\"] {\r\n    margin-right: units.$u1 * -1 !important;\r\n\r\n    .tooltip-arrow {\r\n      margin-top: 0;\r\n    }\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n  @include tooltip.root();\r\n\r\n  &[data-popper-placement=\"top\"] {\r\n    @include tooltip.arrowTop();\r\n\r\n    .tooltip-arrow {\r\n      margin-left: tooltip.$arrow-margin * -1;\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"right\"] {\r\n    @include tooltip.arrowRight();\r\n\r\n    .tooltip-arrow {\r\n      margin-top: tooltip.$arrow-margin * -1;\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"bottom\"] {\r\n    @include tooltip.arrowBottom();\r\n\r\n    .tooltip-arrow {\r\n      margin-left: tooltip.$arrow-margin * -1;\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"left\"] {\r\n    @include tooltip.arrowLeft();\r\n\r\n    .tooltip-arrow {\r\n      margin-top: tooltip.$arrow-margin * -1;\r\n    }\r\n  }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n  name: \"applyMaxSize\",\r\n  enabled: true,\r\n  phase: beforeWrite,\r\n  requires: [\"maxSize\"],\r\n  fn({ state }: { state: PopperState }) {\r\n    let { width } = state.modifiersData.maxSize;\r\n    if (width < 160) {\r\n      width = 160;\r\n    }\r\n\r\n    state.styles.popper = {\r\n      ...state.styles.popper,\r\n      maxWidth: `${width}px`,\r\n    };\r\n  },\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-tooltip\",\r\n  styleUrl: \"tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tooltip {\r\n  /**\r\n   * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n   */\r\n  @Prop({\r\n    reflect: true,\r\n  })\r\n  descriptive = false;\r\n\r\n  /**\r\n   * Set position of tooltip relative to target\r\n   */\r\n  @Prop()\r\n  position: \"top\" | \"right\" | \"bottom\" | \"left\" = \"top\";\r\n\r\n  /**\r\n   * Set position strategy of tooltip\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  /**\r\n   * Set attribute `no-arrow` to hide the arrow\r\n   */\r\n  @Prop()\r\n  noArrow = false;\r\n\r\n  /**\r\n   * Deactivates mouseover behaviour\r\n   */\r\n  @Prop()\r\n  stateless?: boolean;\r\n\r\n  /**\r\n   * Defines if the tooltip has a smaller max-width\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  active = false;\r\n\r\n  /**\r\n   * Activate the tooltip (Sets the `active` attribute)\r\n   */\r\n  @Method()\r\n  async activate(): Promise<void> {\r\n    this.active = true;\r\n  }\r\n\r\n  /**\r\n   * Deactivate the tooltip (Removes the `active` attribute)\r\n   */\r\n  @Method()\r\n  async deactivate(): Promise<void> {\r\n    this.active = false;\r\n  }\r\n\r\n  @Watch(\"position\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.position,\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.element;\r\n    while (element && element.parentNode !== document) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Watch(\"active\")\r\n  watchActive() {\r\n    if (this.active) {\r\n      this.activatePopper();\r\n\r\n      if (!this.stateless) {\r\n        setTimeout(() => {\r\n          this.popper?.setOptions({\r\n            modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n          });\r\n          document.addEventListener(\"keydown\", this.keyDownListener);\r\n        });\r\n      }\r\n    } else {\r\n      document.removeEventListener(\"keydown\", this.keyDownListener);\r\n      this.deactivatePopper();\r\n    }\r\n  }\r\n\r\n  @Element()\r\n  private element!: HTMLDsoTooltipElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  private callbacks: TooltipCallbacks = {\r\n    activate: () => (this.active = true),\r\n    deactivate: () => (this.active = false),\r\n  };\r\n\r\n  private onMouseLeave = () => {\r\n    if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n      this.callbacks.deactivate();\r\n    }\r\n  };\r\n\r\n  @State()\r\n  private hidden = true;\r\n\r\n  private listenClick(e: MouseEvent) {\r\n    e.stopPropagation();\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n    if (!(tooltip instanceof HTMLElement)) {\r\n      throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.popper?.destroy();\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n\r\n    this.target = undefined;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active) {\r\n      this.popper?.update();\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key === \"Escape\") {\r\n      this.deactivate();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n        <div class={clsx(\"tooltip\", { in: this.active })}>\r\n          {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n          <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private deactivatePopper = debounce(() => {\r\n    this.hidden = true;\r\n    this.popper?.destroy();\r\n    this.popper = undefined;\r\n  }, transitionDuration);\r\n\r\n  private activatePopper(): void {\r\n    this.hidden = false;\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n    if (this.target && tooltip instanceof HTMLElement) {\r\n      this.popper = createPopper(this.target, tooltip, {\r\n        placement: this.position,\r\n        modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n      });\r\n\r\n      this.setStrategy();\r\n    }\r\n  }\r\n\r\n  private get target(): HTMLElement | undefined {\r\n    return this.#target ?? this.initializeTarget();\r\n  }\r\n\r\n  private set target(element: HTMLElement | undefined) {\r\n    this.#target = element;\r\n  }\r\n\r\n  #target?: HTMLElement;\r\n\r\n  private initializeTarget(): HTMLElement | undefined {\r\n    const id = this.element.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.element.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    this.#target = reference;\r\n    return reference;\r\n  }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n  activate: () => void;\r\n  deactivate: () => void;\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-dd9e9c47.entry.js

@@ -0,0 +1,2 @@
+import{h as o,r as n,f as s,F as t,H as d,g as e}from"./p-26cdce1c.js";function c(o){return o instanceof Element&&o.tagName==="DSO-EXPANDABLE"}const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i=({handleUrl:n,onClick:s,open:t},d)=>{if(n){return o("a",{href:n,onClick:s,"aria-expanded":t?"true":"false"},d)}return o("button",{type:"button",onClick:s,"aria-expanded":t?"true":"false"},d)};const r=({heading:n,ref:s},t)=>{switch(n){default:case"h2":return o("h2",{ref:s,class:"dso-section-handle"},t);case"h3":return o("h3",{ref:s,class:"dso-section-handle"},t);case"h4":return o("h4",{ref:s,class:"dso-section-handle"},t);case"h5":return o("h5",{ref:s,class:"dso-section-handle"},t)}};const h=({state:n})=>{if(n==="error"){return o("dso-icon",{icon:"status-error"})}if(n==="danger"){return o("dso-icon",{icon:"status-danger"})}if(n==="success"){return o("dso-icon",{icon:"status-success"})}if(n==="info"){return o("dso-icon",{icon:"status-info"})}if(n==="warning"){return o("dso-icon",{icon:"status-warning"})}};const l=({state:n,icon:s,attachmentCount:t})=>{if(n){return o(h,{state:n})}if(t){return o("dso-attachments-counter",{count:t})}if(s){return o("dso-icon",{icon:s})}};const u="*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}: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)}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px}.dso-section-body .dso-section-body-content{padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open])>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open])>.dso-section-handle a,:host(.dso-accordion-default[open])>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open])>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open])>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}: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}";const p=class{constructor(o){n(this,o);this.handleTitle=undefined;this.heading="h2";this.handleUrl=undefined;this.state=undefined;this.attachmentCount=undefined;this.icon=undefined;this.status=undefined;this.open=false;this.hasNestedSection=false;this.hover=false}componentWillLoad(){const o=this.host.parentElement;this.hasNestedSection=this.host.querySelector("dso-accordion")!==null;if(o&&f(o)){this.accordion=o;o._getState().then((o=>{this.accordionState=o;s(this.host)}))}}async toggleSection(o=true){var n;await((n=this.accordion)===null||n===void 0?void 0:n.toggleSection(this.host).then((async()=>{if(o){await this.scrollIntoViewWhenNeeded(true)}})))}async scrollSectionIntoView(){await this.scrollIntoViewWhenNeeded(false)}get isNeutral(){var o;return((o=this.accordionState)===null||o===void 0?void 0:o.variant)==="neutral"}async scrollIntoViewWhenNeeded(o){var n,s,t;p.scrollCandidate=undefined;const d=(n=this.sectionBody)===null||n===void 0?void 0:n.getBoundingClientRect();const e=(s=this.sectionHeading)===null||s===void 0?void 0:s.getBoundingClientRect();if(!d||!e||!this.accordionState){return}const c=async n=>{var s,t;this.bodyHeight=await((s=this.expandable)===null||s===void 0?void 0:s._getBodyHeight());const d=this.host.offsetTop+e.height+(this.open?(t=this.bodyHeight)!==null&&t!==void 0?t:0:0);return o&&(d>document.documentElement.scrollHeight||n.allowMultipleOpen)};if(await c(this.accordionState)){p.scrollCandidate=this.host;return}const a=e.top+e.height+(this.open?(t=this.bodyHeight)!==null&&t!==void 0?t:0:0);if(a>window.innerHeight){const o=a-e.top;const n=o>window.innerHeight;window.scrollTo({top:n?this.host.offsetTop:this.host.offsetTop-(window.innerHeight-o),behavior:"smooth"})}else if(e.top<0){window.scrollTo({top:this.host.offsetTop,behavior:"smooth"})}}setAnimationBehaviour(o,n){const s=o.target;if(!(s instanceof HTMLElement)){return}if(c(s)){this.expandable=s;this.expandable._getAnimeInstance().then((o=>{if(o){o.changeComplete=async()=>{if(!n){return}const o=n.parentElement;if(o&&f(o)){o===null||o===void 0?void 0:o.animationEnd(n)}if(p.scrollCandidate===this.host){p.scrollCandidate=undefined;await this.scrollSectionIntoView()}}}}))}}async toggle(o){var n;o===null||o===void 0?void 0:o.preventDefault();(n=this.accordion)===null||n===void 0?void 0:n.toggleSection(this.host,o).then((async o=>{if(o){await this.scrollIntoViewWhenNeeded(true)}}))}render(){var n;const{variant:s,reverseAlign:e}=(n=this.accordionState)!==null&&n!==void 0?n:{};const c=!!this.status||!!this.state||!!this.icon||!!this.attachmentCount;return o(d,{class:{"dso-accordion-section":true,["dso-accordion-"+s]:true,"dso-nested-accordion":this.hasNestedSection,"dso-accordion-reverse-align":e!==null&&e!==void 0?e:false},hidden:!s,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},o(r,{heading:this.heading,ref:o=>this.sectionHeading=o},o(i,{handleUrl:this.handleUrl,onClick:async o=>await this.toggle(o),open:this.open},e?o(t,null,c&&o("div",{class:"dso-section-handle-addons"},o(l,{icon:this.icon})),o("span",null,this.handleTitle),o("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"})):o(t,null,o("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.state&&o("span",{class:"sr-only"},a[this.state]),o("span",null,this.handleTitle,this.isNeutral&&o("dso-icon",{class:"info-icon",icon:this.open||this.hover?"info-active":"info"})),c&&o("div",{class:"dso-section-handle-addons"},this.status&&o("span",{class:"dso-status"},this.status),o(l,{state:this.state,icon:this.icon,attachmentCount:this.attachmentCount}))))),o("dso-expandable",{class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,on_animationInstantiated:o=>this.setAnimationBehaviour(o,this.host)},o("div",{slot:"expandable-content",class:"dso-section-body-content",ref:o=>this.sectionBody=o},o("slot",null))))}get host(){return e(this)}};function f(o){return o.tagName==="DSO-ACCORDION"}p.style=u;export{p as dso_accordion_section};
+//# sourceMappingURL=p-dd9e9c47.entry.js.map