@dso-toolkit/core 54.2.0 → 54.3.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-95687fb7.entry.js

@@ -0,0 +1,2 @@
+import{h as e,r as t,c as n,H as i}from"./p-53c8538c.js";import{c as o}from"./p-6a1980b4.js";import{v as a}from"./p-5d7f4ff2.js";const s=({heading:t,ref:n,className:i},o)=>{switch(t){default:case"h2":return e("h2",{ref:n,class:i},o);case"h3":return e("h3",{ref:n,class:i},o);case"h4":return e("h4",{ref:n,class:i},o);case"h5":return e("h5",{ref:n,class:i},o);case"h6":return e("h6",{ref:n,class:i},o)}};const h="h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{color:#275937}h1,.h1,h2,.h2,h3,.h3{margin-block-end:16px;margin-block-start:24px}h1,.h1{line-height:1.25}h1{font-size:2rem;font-weight:700}h2,.h2{line-height:1.33}h2{color:#275937;font-size:1.5rem;font-weight:700}h3,.h3{line-height:1.2}h3{color:#275937;font-size:1.25rem;font-weight:600}h4,.h4,h5,.h5,h6,.h6{margin-block-end:16px;margin-block-start:12px}h4,.h4{line-height:1.5}h4{color:#275937;font-size:1rem;font-weight:600}h5,.h5{line-height:1.5}h5{color:#191919;font-size:1rem;font-weight:600}h6,.h6{line-height:1.5}ins{background-color:#e4f1d4;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25);color:#000;text-decoration:none}:host{display:block;margin-inline:-8px;padding-inline:8px}:host(.dso-del){background-color:#f5d8dc;color:#000;text-decoration:line-through}:host(.dso-ins){background-color:#e4f1d4;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25);color:#000}*,*::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-edit-action-text{margin-bottom:8px;margin-top:-8px}.dso-edit-action-text span{display:inline-block;font-style:italic}.dso-edit-action-text+.expandable-heading{margin-top:0;padding-top:0}.expandable-heading{align-items:center;display:flex;margin-bottom:8px;margin-top:8px}.expandable-heading h2,.expandable-heading h3,.expandable-heading h4,.expandable-heading h5,.expandable-heading h6{font-size:1rem;margin-bottom:0;margin-right:8px;margin-top:0}.expandable-heading button{align-items:flex-start;cursor:pointer;background-color:transparent;border:0;color:inherit;display:flex;line-height:24px;font-size:inherit;font-weight:inherit;padding:0;text-align:left}.expandable-heading button>dso-icon{flex-shrink:0}.expandable-heading.dso-expandable-heading-black button{color:#000}:host([suppressed]){opacity:0.6}:host([suppressed]) .expandable-heading button{color:#666}dso-expandable{padding-left:24px}.addons-end{display:inline-block;margin-left:auto}";const d=class{constructor(e){t(this,e);this.dsoToggle=n(this,"dsoToggle",3);this.identifier=a();this.open=undefined;this.heading="h2";this.color="default";this.suppressed=false;this.editAction=undefined}toggle(e){this.open=!this.open;this.dsoToggle.emit({originalEvent:e,open:this.open})}render(){const t=this.open?{open:true}:{};return e(i,{class:o({"dso-del":this.editAction==="delete","dso-ins":this.editAction==="insert"})},this.editAction==="delete"&&e("p",{class:"dso-edit-action-text"},e("span",null,"verwijderd:")),this.editAction==="insert"&&e("p",{class:"dso-edit-action-text"},e("span",null,"toegevoegd:")),e("div",{class:o("expandable-heading",this.color==="black"?"dso-expandable-heading-black":"")},e(s,{heading:this.heading},e("button",{type:"button","aria-expanded":this.open?"true":"false","aria-controls":this.identifier,onClick:e=>this.toggle(e)},e("dso-icon",{icon:this.open?"chevron-down":"chevron-right"}),e("slot",{name:"title"}))),e("slot",{name:"addons-start"}),e("div",{class:"addons-end"},e("slot",{name:"addons-end"}))),e("dso-expandable",Object.assign({id:this.identifier},t),e("slot",{slot:"expandable-content"})))}};d.style=h;export{d as dso_expandable_heading};
+//# sourceMappingURL=p-95687fb7.entry.js.map

package/dist/dso-toolkit/p-95687fb7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Heading","heading","ref","className","children","h","class","expandableHeadingCss","ExpandableHeading","this","identifier","uuidv4","toggle","e","open","dsoToggle","emit","originalEvent","render","expandableProperties","Host","clsx","editAction","color","type","onClick","icon","name","Object","assign","id","slot"],"sources":["./src/components/expandable-heading/heading.tsx","./src/components/expandable-heading/expandable-heading.scss?tag=dso-expandable-heading&encapsulation=shadow","./src/components/expandable-heading/expandable-heading.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { HeadingTags } from \"./expandable-heading.interfaces\";\r\n\r\nexport const Heading: FunctionalComponent<{\r\n  heading: HeadingTags;\r\n  className?:\r\n    | string\r\n    | {\r\n        [className: string]: boolean;\r\n      };\r\n  ref?: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref, className }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return (\r\n        <h2 ref={ref} class={className}>\r\n          {children}\r\n        </h2>\r\n      );\r\n    case \"h3\":\r\n      return (\r\n        <h3 ref={ref} class={className}>\r\n          {children}\r\n        </h3>\r\n      );\r\n    case \"h4\":\r\n      return (\r\n        <h4 ref={ref} class={className}>\r\n          {children}\r\n        </h4>\r\n      );\r\n    case \"h5\":\r\n      return (\r\n        <h5 ref={ref} class={className}>\r\n          {children}\r\n        </h5>\r\n      );\r\n    case \"h6\":\r\n      return (\r\n        <h6 ref={ref} class={className}>\r\n          {children}\r\n        </h6>\r\n      );\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/headings/headings\";\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n\r\n:host {\r\n  display: block;\r\n  margin-inline: -(units.$u1);\r\n  padding-inline: units.$u1;\r\n}\r\n\r\n:host(.dso-del) {\r\n  background-color: colors.$danger-bg-color;\r\n  color: colors.$zwart;\r\n  text-decoration: line-through;\r\n}\r\n\r\n:host(.dso-ins) {\r\n  background-color: colors.$success-bg-color;\r\n  box-shadow: insert.$insert-box-shadow;\r\n  color: colors.$zwart;\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-edit-action-text {\r\n  margin-bottom: units.$u1;\r\n  margin-top: -(units.$u1);\r\n\r\n  span {\r\n    display: inline-block;\r\n    font-style: italic;\r\n  }\r\n\r\n  + .expandable-heading {\r\n    margin-top: 0;\r\n    padding-top: 0;\r\n  }\r\n}\r\n\r\n.expandable-heading {\r\n  align-items: center;\r\n  display: flex;\r\n  margin-bottom: units.$u1;\r\n  margin-top: units.$u1;\r\n\r\n  h2,\r\n  h3,\r\n  h4,\r\n  h5,\r\n  h6 {\r\n    font-size: 1rem;\r\n    margin-bottom: 0;\r\n    margin-right: units.$u1;\r\n    margin-top: 0;\r\n  }\r\n\r\n  button {\r\n    align-items: flex-start;\r\n    cursor: pointer;\r\n    background-color: transparent;\r\n    border: 0;\r\n    color: inherit;\r\n    display: flex;\r\n    line-height: 24px;\r\n    font-size: inherit;\r\n    font-weight: inherit;\r\n    padding: 0;\r\n    text-align: left;\r\n\r\n    > dso-icon {\r\n      flex-shrink: 0;\r\n    }\r\n  }\r\n\r\n  &.dso-expandable-heading-black button {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host([suppressed]) {\r\n  opacity: 0.6;\r\n\r\n  .expandable-heading button {\r\n    color: colors.$grijs-60;\r\n  }\r\n}\r\n\r\ndso-expandable {\r\n  padding-left: units.$u3;\r\n}\r\n\r\n.addons-end {\r\n  display: inline-block;\r\n  margin-left: auto;\r\n}\r\n","import { Component, Event, EventEmitter, Host, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { EditAction, ExpandableHeadingToggleEvent, HeadingTags } from \"./expandable-heading.interfaces\";\r\nimport { Heading } from \"./heading\";\r\n\r\n@Component({\r\n  tag: \"dso-expandable-heading\",\r\n  styleUrl: \"expandable-heading.scss\",\r\n  shadow: true,\r\n})\r\nexport class ExpandableHeading {\r\n  /**\r\n   * To open the Expandable Heading.\r\n   */\r\n  @Prop()\r\n  open?: boolean;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: HeadingTags = \"h2\";\r\n\r\n  /**\r\n   * The color.\r\n   */\r\n  @Prop()\r\n  color: \"default\" | \"black\" = \"default\";\r\n\r\n  /**\r\n   * Marks this element as unavailable.\r\n   */\r\n  @Prop()\r\n  suppressed = false;\r\n\r\n  /**\r\n   * Whether this Expandable Heading has an edit action.\r\n   *\r\n   * Also known as \"wijzigactie\" in STOP.\r\n   */\r\n  @Prop()\r\n  editAction?: EditAction;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggle!: EventEmitter<ExpandableHeadingToggleEvent>;\r\n\r\n  private identifier = uuidv4();\r\n\r\n  private toggle(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({ originalEvent: e, open: this.open });\r\n  }\r\n\r\n  render() {\r\n    const expandableProperties = this.open ? { open: true } : {};\r\n\r\n    return (\r\n      <Host\r\n        class={clsx({\r\n          \"dso-del\": this.editAction === \"delete\",\r\n          \"dso-ins\": this.editAction === \"insert\",\r\n        })}\r\n      >\r\n        {this.editAction === \"delete\" && (\r\n          <p class=\"dso-edit-action-text\">\r\n            <span>verwijderd:</span>\r\n          </p>\r\n        )}\r\n        {this.editAction === \"insert\" && (\r\n          <p class=\"dso-edit-action-text\">\r\n            <span>toegevoegd:</span>\r\n          </p>\r\n        )}\r\n        <div class={clsx(\"expandable-heading\", this.color === \"black\" ? \"dso-expandable-heading-black\" : \"\")}>\r\n          <Heading heading={this.heading}>\r\n            <button\r\n              type=\"button\"\r\n              aria-expanded={this.open ? \"true\" : \"false\"}\r\n              aria-controls={this.identifier}\r\n              onClick={(e) => this.toggle(e)}\r\n            >\r\n              <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n              <slot name=\"title\" />\r\n            </button>\r\n          </Heading>\r\n          <slot name=\"addons-start\" />\r\n          <div class=\"addons-end\">\r\n            <slot name=\"addons-end\" />\r\n          </div>\r\n        </div>\r\n        <dso-expandable id={this.identifier} {...expandableProperties}>\r\n          <slot slot=\"expandable-content\"></slot>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"iIAIO,MAAMA,EAQR,EAAGC,UAASC,MAAKC,aAAaC,KACjC,OAAQH,GACN,QACA,IAAK,KACH,OACEI,EAAA,MAAIH,IAAKA,EAAKI,MAAOH,GAClBC,GAGP,IAAK,KACH,OACEC,EAAA,MAAIH,IAAKA,EAAKI,MAAOH,GAClBC,GAGP,IAAK,KACH,OACEC,EAAA,MAAIH,IAAKA,EAAKI,MAAOH,GAClBC,GAGP,IAAK,KACH,OACEC,EAAA,MAAIH,IAAKA,EAAKI,MAAOH,GAClBC,GAGP,IAAK,KACH,OACEC,EAAA,MAAIH,IAAKA,EAAKI,MAAOH,GAClBC,G,EC1CX,MAAMG,EAAuB,m+D,MCYhBC,EAAiB,M,8DAuCpBC,KAAAC,WAAaC,I,iCA5BE,K,WAMM,U,gBAMhB,M,0BAkBLC,OAAOC,GACbJ,KAAKK,MAAQL,KAAKK,KAElBL,KAAKM,UAAUC,KAAK,CAAEC,cAAeJ,EAAGC,KAAML,KAAKK,M,CAGrDI,SACE,MAAMC,EAAuBV,KAAKK,KAAO,CAAEA,KAAM,MAAS,GAE1D,OACET,EAACe,EAAI,CACHd,MAAOe,EAAK,CACV,UAAWZ,KAAKa,aAAe,SAC/B,UAAWb,KAAKa,aAAe,YAGhCb,KAAKa,aAAe,UACnBjB,EAAA,KAAGC,MAAM,wBACPD,EAAA,4BAGHI,KAAKa,aAAe,UACnBjB,EAAA,KAAGC,MAAM,wBACPD,EAAA,4BAGJA,EAAA,OAAKC,MAAOe,EAAK,qBAAsBZ,KAAKc,QAAU,QAAU,+BAAiC,KAC/FlB,EAACL,EAAO,CAACC,QAASQ,KAAKR,SACrBI,EAAA,UACEmB,KAAK,SAAQ,gBACEf,KAAKK,KAAO,OAAS,QAAO,gBAC5BL,KAAKC,WACpBe,QAAUZ,GAAMJ,KAAKG,OAAOC,IAE5BR,EAAA,YAAUqB,KAAMjB,KAAKK,KAAO,eAAiB,kBAC7CT,EAAA,QAAMsB,KAAK,YAGftB,EAAA,QAAMsB,KAAK,iBACXtB,EAAA,OAAKC,MAAM,cACTD,EAAA,QAAMsB,KAAK,iBAGftB,EAAA,iBAAAuB,OAAAC,OAAA,CAAgBC,GAAIrB,KAAKC,YAAgBS,GACvCd,EAAA,QAAM0B,KAAK,wB"}

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

@@ -0,0 +1,2 @@
+import{h as n,r as t,c as e,H as o,g as s}from"./p-53c8538c.js";import{c as i}from"./p-91963e3d.js";import"./p-5950644a.js";const r=({onApply:t,onCancel:e})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:e},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:t},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const a="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([small]) .dso-map-panel {\n  flex-basis: 375px;\n  min-width: 0;\n  max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n  :host([small]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n\n:host([medium]) .dso-map-panel {\n  flex-basis: 624px;\n  min-width: 375px;\n  max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n  :host([medium]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n\n:host([large]) .dso-map-panel {\n  flex-basis: 60%;\n  min-width: 768px;\n  max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n  :host([large]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.dso-map-panel {\n  background-color: #fff;\n  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  flex-shrink: 0;\n  flex-grow: 0;\n  padding-right: 8px;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-map-panel .main {\n  height: 100%;\n  overflow-y: scroll;\n  padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  height: 100%;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 101;\n}\n\n.filterpanel {\n  box-shadow: 2px 0 5px #666;\n  padding: 8px 16px;\n  left: 0;\n  max-width: 896px;\n  width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    width: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 2rem;\n  font-weight: 700;\n}\n.filterpanel::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 896px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n\n.overlay {\n  box-shadow: -2px 0 5px #666;\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n\n.dimscreen {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 624px;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 102;\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}";const l=class{constructor(n){t(this,n);this.dsoCloseOverlay=e(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=e(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=e(this,"dsoFilterpanelApply",7);this.dsoMainSizeChange=e(this,"dsoMainSizeChange",7);this.sizeLabelMap={small:"smal",medium:"middel",large:"breed"};this.filterpanelSlot=null;this.overlaySlot=null;this.shrinkMain=()=>{this.mainSize=this.mainSize==="large"?"medium":"small"};this.expandMain=()=>{this.mainSize=this.mainSize==="small"?"medium":"large"};this.keyDownListener=n=>{if(n.key!=="Escape"){return}this.dsoCloseOverlay.emit(n)};this.filterpanelOpen=false;this.overlayOpen=false;this.initialMainSize=undefined;this.mainSize="large"}mainSizeWatcher(n,t){var e;this.dsoMainSizeChange.emit({stage:"start",previousSize:t,currentSize:n});(e=this.mapPanel)===null||e===void 0?void 0:e.addEventListener("transitionend",(e=>{if(e.propertyName==="flex-basis"){this.dsoMainSizeChange.emit({stage:"end",previousSize:t,currentSize:n})}}),{once:true})}updateFocusTrap(){var n,t;if(this.filterpanelOpen&&this.overlayOpen){return}if(this.filterpanelFocustrap){if(this.filterpanelOpen&&!((n=this.filterpanel)===null||n===void 0?void 0:n.hidden)){this.filterpanelFocustrap.activate();this.host.addEventListener("keydown",this.keyDownListener)}else{this.filterpanelFocustrap.deactivate();this.host.removeEventListener("keydown",this.keyDownListener)}}if(this.overlayFocustrap){if(this.overlayOpen&&!((t=this.overlay)===null||t===void 0?void 0:t.hidden)){this.overlayFocustrap.activate();this.host.addEventListener("keydown",this.keyDownListener)}else{this.overlayFocustrap.deactivate();this.host.removeEventListener("keydown",this.keyDownListener)}}}connectedCallback(){this.filterpanelSlot=this.host.querySelector("div[slot='filterpanel']");this.overlaySlot=this.host.querySelector("div[slot='overlay']")}componentDidLoad(){if(this.filterpanel&&this.filterpanelSlot){this.filterpanelFocustrap=i([this.filterpanel,this.filterpanelSlot],{escapeDeactivates:false,allowOutsideClick:true,tabbableOptions:{getShadowRoot:true}})}if(this.overlay&&this.overlaySlot){this.overlayFocustrap=i([this.overlay,this.overlaySlot],{escapeDeactivates:false,allowOutsideClick:true,tabbableOptions:{getShadowRoot:true}})}this.updateFocusTrap()}componentWillLoad(){if(this.initialMainSize){this.mainSize=this.initialMainSize}}componentDidUpdate(){this.updateFocusTrap()}disconnectedCallback(){var n,t;(n=this.overlayFocustrap)===null||n===void 0?void 0:n.deactivate();(t=this.filterpanelFocustrap)===null||t===void 0?void 0:t.deactivate();this.host.removeEventListener("keydown",this.keyDownListener)}handleFilterpanelApply(n){this.dsoFilterpanelApply.emit({originalEvent:n})}handleFilterpanelCancel(n){this.dsoFilterpanelCancel.emit({originalEvent:n})}render(){return n(o,Object.assign({},{[this.mainSize]:true}),n("div",{class:"dso-map-panel",ref:n=>this.mapPanel=n},n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"breedte tekstpaneel: ",this.sizeLabelMap[this.mainSize]),n("button",{type:"button",class:"shrink",disabled:this.mainSize==="small",onClick:this.shrinkMain},n("span",{class:"sr-only"},"Kaartpaneel smaller maken"),n("dso-icon",{icon:"chevron-left"})),n("button",{type:"button",class:"expand",disabled:this.mainSize==="large",onClick:this.expandMain},n("span",{class:"sr-only"},"Kaartpaneel breder maken"),n("dso-icon",{icon:"chevron-right"}))),n("div",{class:"main"},n("slot",{name:"main"}))),n("div",{id:"filterpanel",class:"filterpanel",hidden:!this.filterpanelOpen||!this.filterpanelSlot,ref:n=>this.filterpanel=n},n("h1",null,"Uw keuzes"),n(r,{onApply:n=>this.handleFilterpanelApply(n),onCancel:n=>this.handleFilterpanelCancel(n)}),n("slot",{name:"filterpanel"}),n(r,{onApply:n=>this.handleFilterpanelApply(n),onCancel:n=>this.handleFilterpanelCancel(n)})),n("div",{class:"map"},n("slot",{name:"map"})),n("div",{hidden:!this.overlayOpen||!this.overlaySlot,class:"dimscreen"}),n("div",{class:"overlay",hidden:!this.overlayOpen||!this.overlaySlot,ref:n=>this.overlay=n},n("button",{type:"button",class:"overlay-close-button",onClick:n=>this.dsoCloseOverlay.emit(n)},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}),n("button",{"aria-hidden":"true",type:"button",class:"overlay-close-button",style:{zIndex:"-100"}},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten"))))}get host(){return s(this)}static get watchers(){return{mainSize:["mainSizeWatcher"]}}};l.style=a;export{l as dso_viewer_grid};
+//# sourceMappingURL=p-9d5c6ab6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ViewerGridFilterpanelButtons","onApply","onCancel","h","class","type","onClick","icon","viewerGridCss","ViewerGrid","this","sizeLabelMap","small","medium","large","filterpanelSlot","overlaySlot","shrinkMain","mainSize","expandMain","keyDownListener","event","key","dsoCloseOverlay","emit","mainSizeWatcher","currentSize","previousSize","dsoMainSizeChange","stage","_a","mapPanel","addEventListener","e","propertyName","once","updateFocusTrap","filterpanelOpen","overlayOpen","filterpanelFocustrap","filterpanel","hidden","activate","host","deactivate","removeEventListener","overlayFocustrap","_b","overlay","connectedCallback","querySelector","componentDidLoad","createFocusTrap","escapeDeactivates","allowOutsideClick","tabbableOptions","getShadowRoot","componentWillLoad","initialMainSize","componentDidUpdate","disconnectedCallback","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","render","Host","Object","assign","ref","element","disabled","name","id","style","zIndex"],"sources":["./src/components/viewer-grid/viewer-grid-filterpanel-buttons.tsx","./src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","./src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: flex;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n:host([small]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-width: 0;\r\n    max-width: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([medium]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-width: core-viewer-grid-variables.$small;\r\n    max-width: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([large]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-width: core-viewer-grid-variables.$large-min;\r\n    max-width: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &[disabled] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.dso-map-panel {\r\n  background-color: colors.$wit;\r\n  box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  padding-right: units.$u1;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-map-panel;\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .main {\r\n    height: 100%;\r\n    overflow-y: scroll;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.sizing-buttons {\r\n  left: calc(100% + 1px);\r\n  overflow-x: hidden;\r\n  padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-bottom-right-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  height: 100%;\r\n  overflow-y: auto;\r\n  position: absolute;\r\n  z-index: zindex.$viewer-grid-map-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  box-shadow: 2px 0 5px colors.$grijs-60;\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n  max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n  width: calc(100vw - 40px);\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: fixed;\r\n    top: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: core-viewer-grid-variables.$filterpanel-max-width;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n\r\n    @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n      left: auto;\r\n      width: 40px;\r\n    }\r\n  }\r\n}\r\n\r\n.overlay {\r\n  box-shadow: -2px 0 5px colors.$grijs-60;\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: core-viewer-grid-variables.$overlay-width;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  z-index: zindex.$viewer-grid-map-panel + 2;\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { FilterpanelEvent, LabelSizeMap, MainSize, ViewerGridChangeSizeEvent } from \"./viewer-grid.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  private mapPanel?: HTMLDivElement;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  initialMainSize?: MainSize;\r\n\r\n  @State()\r\n  mainSize: MainSize = \"large\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<MouseEvent | KeyboardEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  private filterpanel: HTMLElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private filterpanelFocustrap: FocusTrap | undefined;\r\n\r\n  private overlay: HTMLDivElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\r\n\r\n  private overlayFocustrap: FocusTrap | undefined;\r\n\r\n  @Watch(\"mainSize\")\r\n  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n    this.dsoMainSizeChange.emit({\r\n      stage: \"start\",\r\n      previousSize,\r\n      currentSize,\r\n    });\r\n\r\n    this.mapPanel?.addEventListener(\r\n      \"transitionend\",\r\n      (e) => {\r\n        if (e.propertyName === \"flex-basis\") {\r\n          this.dsoMainSizeChange.emit({\r\n            stage: \"end\",\r\n            previousSize,\r\n            currentSize,\r\n          });\r\n        }\r\n      },\r\n      { once: true }\r\n    );\r\n  }\r\n\r\n  private shrinkMain = () => {\r\n    this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n  };\r\n\r\n  private expandMain = () => {\r\n    this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n  };\r\n\r\n  private updateFocusTrap() {\r\n    if (this.filterpanelOpen && this.overlayOpen) {\r\n      return;\r\n    }\r\n\r\n    if (this.filterpanelFocustrap) {\r\n      if (this.filterpanelOpen && !this.filterpanel?.hidden) {\r\n        this.filterpanelFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.filterpanelFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n\r\n    if (this.overlayFocustrap) {\r\n      if (this.overlayOpen && !this.overlay?.hidden) {\r\n        this.overlayFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.overlayFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key !== \"Escape\") {\r\n      return;\r\n    }\r\n\r\n    this.dsoCloseOverlay.emit(event);\r\n  };\r\n\r\n  connectedCallback() {\r\n    this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n    this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanel && this.filterpanelSlot) {\r\n      this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    if (this.overlay && this.overlaySlot) {\r\n      this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.initialMainSize) {\r\n      this.mainSize = this.initialMainSize;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.overlayFocustrap?.deactivate();\r\n    this.filterpanelFocustrap?.deactivate();\r\n\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host {...{ [this.mainSize]: true }}>\r\n        <div class=\"dso-map-panel\" ref={(element) => (this.mapPanel = element)}>\r\n          <div class=\"sizing-buttons\">\r\n            <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n              breedte tekstpaneel: {this.sizeLabelMap[this.mainSize]}\r\n            </span>\r\n            <button type=\"button\" class=\"shrink\" disabled={this.mainSize === \"small\"} onClick={this.shrinkMain}>\r\n              <span class=\"sr-only\">Kaartpaneel smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n            <button type=\"button\" class=\"expand\" disabled={this.mainSize === \"large\"} onClick={this.expandMain}>\r\n              <span class=\"sr-only\">Kaartpaneel breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          </div>\r\n          <div class=\"main\">\r\n            <slot name=\"main\" />\r\n          </div>\r\n        </div>\r\n        <div\r\n          id=\"filterpanel\"\r\n          class=\"filterpanel\"\r\n          hidden={!this.filterpanelOpen || !this.filterpanelSlot}\r\n          ref={(element) => (this.filterpanel = element)}\r\n        >\r\n          <h1>Uw keuzes</h1>\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n          <slot name=\"filterpanel\" />\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n        </div>\r\n        <div class=\"map\">\r\n          <slot name=\"map\" />\r\n        </div>\r\n        <div hidden={!this.overlayOpen || !this.overlaySlot} class=\"dimscreen\"></div>\r\n        <div\r\n          class=\"overlay\"\r\n          hidden={!this.overlayOpen || !this.overlaySlot}\r\n          ref={(element) => (this.overlay = element)}\r\n        >\r\n          <button type=\"button\" class=\"overlay-close-button\" onClick={(e) => this.dsoCloseOverlay.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n          <slot name=\"overlay\" />\r\n          {/* This button is needed for the `focus-trap` library to function correctly. It is never focused. */}\r\n          <button aria-hidden=\"true\" type=\"button\" class=\"overlay-close-button\" style={{ zIndex: \"-100\" }}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"4HAOO,MAAMA,EAAgF,EAC3FC,UACAC,cAEAC,EAAA,OAAKC,MAAM,uBACTD,EAAA,UAAQE,KAAK,SAASD,MAAM,gBAAgBE,QAASJ,GACnDC,EAAA,0BAEFA,EAAA,UAAQE,KAAK,SAASD,MAAM,eAAeE,QAASL,GAClDE,EAAA,yBACAA,EAAA,YAAUI,KAAK,oBCjBrB,MAAMC,EAAgB,wn4B,MCUTC,EAAU,M,mPACbC,KAAAC,aAA6B,CACnCC,MAAO,OACPC,OAAQ,SACRC,MAAO,SAyDDJ,KAAAK,gBAAsC,KAMtCL,KAAAM,YAAqC,KA2BrCN,KAAAO,WAAa,KACnBP,KAAKQ,SAAWR,KAAKQ,WAAa,QAAU,SAAW,OAAO,EAGxDR,KAAAS,WAAa,KACnBT,KAAKQ,SAAWR,KAAKQ,WAAa,QAAU,SAAW,OAAO,EA6BxDR,KAAAU,gBAAmBC,IACzB,GAAIA,EAAMC,MAAQ,SAAU,CAC1B,M,CAGFZ,KAAKa,gBAAgBC,KAAKH,EAAM,E,qBAxHhB,M,iBAMJ,M,6CAWO,O,CA0CrBI,gBAAgBC,EAAuBC,G,MACrCjB,KAAKkB,kBAAkBJ,KAAK,CAC1BK,MAAO,QACPF,eACAD,iBAGFI,EAAApB,KAAKqB,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,iBACb,iBACCC,IACC,GAAIA,EAAEC,eAAiB,aAAc,CACnCxB,KAAKkB,kBAAkBJ,KAAK,CAC1BK,MAAO,MACPF,eACAD,e,IAIN,CAAES,KAAM,M,CAYJC,kB,QACN,GAAI1B,KAAK2B,iBAAmB3B,KAAK4B,YAAa,CAC5C,M,CAGF,GAAI5B,KAAK6B,qBAAsB,CAC7B,GAAI7B,KAAK2B,oBAAoBP,EAAApB,KAAK8B,eAAW,MAAAV,SAAA,SAAAA,EAAEW,QAAQ,CACrD/B,KAAK6B,qBAAqBG,WAC1BhC,KAAKiC,KAAKX,iBAAiB,UAAWtB,KAAKU,gB,KACtC,CACLV,KAAK6B,qBAAqBK,aAC1BlC,KAAKiC,KAAKE,oBAAoB,UAAWnC,KAAKU,gB,EAIlD,GAAIV,KAAKoC,iBAAkB,CACzB,GAAIpC,KAAK4B,gBAAgBS,EAAArC,KAAKsC,WAAO,MAAAD,SAAA,SAAAA,EAAEN,QAAQ,CAC7C/B,KAAKoC,iBAAiBJ,WACtBhC,KAAKiC,KAAKX,iBAAiB,UAAWtB,KAAKU,gB,KACtC,CACLV,KAAKoC,iBAAiBF,aACtBlC,KAAKiC,KAAKE,oBAAoB,UAAWnC,KAAKU,gB,GAapD6B,oBACEvC,KAAKK,gBAAkBL,KAAKiC,KAAKO,cAA8B,2BAE/DxC,KAAKM,YAAcN,KAAKiC,KAAKO,cAA8B,sB,CAG7DC,mBACE,GAAIzC,KAAK8B,aAAe9B,KAAKK,gBAAiB,CAC5CL,KAAK6B,qBAAuBa,EAAgB,CAAC1C,KAAK8B,YAAa9B,KAAKK,iBAAkB,CACpFsC,kBAAmB,MACnBC,kBAAmB,KACnBC,gBAAiB,CACfC,cAAe,O,CAKrB,GAAI9C,KAAKsC,SAAWtC,KAAKM,YAAa,CACpCN,KAAKoC,iBAAmBM,EAAgB,CAAC1C,KAAKsC,QAAStC,KAAKM,aAAc,CACxEqC,kBAAmB,MACnBC,kBAAmB,KACnBC,gBAAiB,CACfC,cAAe,O,CAKrB9C,KAAK0B,iB,CAGPqB,oBACE,GAAI/C,KAAKgD,gBAAiB,CACxBhD,KAAKQ,SAAWR,KAAKgD,e,EAIzBC,qBACEjD,KAAK0B,iB,CAGPwB,uB,SACE9B,EAAApB,KAAKoC,oBAAgB,MAAAhB,SAAA,SAAAA,EAAEc,cACvBG,EAAArC,KAAK6B,wBAAoB,MAAAQ,SAAA,SAAAA,EAAEH,aAE3BlC,KAAKiC,KAAKE,oBAAoB,UAAWnC,KAAKU,gB,CAGxCyC,uBAAuBC,GAC7BpD,KAAKqD,oBAAoBvC,KAAK,CAAEwC,cAAeF,G,CAGzCG,wBAAwBH,GAC9BpD,KAAKwD,qBAAqB1C,KAAK,CAAEwC,cAAeF,G,CAGlDK,SACE,OACEhE,EAACiE,EAAIC,OAAAC,OAAA,GAAK,CAAE,CAAC5D,KAAKQ,UAAW,OAC3Bf,EAAA,OAAKC,MAAM,gBAAgBmE,IAAMC,GAAa9D,KAAKqB,SAAWyC,GAC5DrE,EAAA,OAAKC,MAAM,kBACTD,EAAA,QAAMC,MAAM,UAAS,YAAW,SAAQ,cAAa,QAAM,wBACnCM,KAAKC,aAAaD,KAAKQ,WAE/Cf,EAAA,UAAQE,KAAK,SAASD,MAAM,SAASqE,SAAU/D,KAAKQ,WAAa,QAASZ,QAASI,KAAKO,YACtFd,EAAA,QAAMC,MAAM,WAAS,6BACrBD,EAAA,YAAUI,KAAK,kBAEjBJ,EAAA,UAAQE,KAAK,SAASD,MAAM,SAASqE,SAAU/D,KAAKQ,WAAa,QAASZ,QAASI,KAAKS,YACtFhB,EAAA,QAAMC,MAAM,WAAS,4BACrBD,EAAA,YAAUI,KAAK,oBAGnBJ,EAAA,OAAKC,MAAM,QACTD,EAAA,QAAMuE,KAAK,WAGfvE,EAAA,OACEwE,GAAG,cACHvE,MAAM,cACNqC,QAAS/B,KAAK2B,kBAAoB3B,KAAKK,gBACvCwD,IAAMC,GAAa9D,KAAK8B,YAAcgC,GAEtCrE,EAAA,uBACAA,EAACH,EAA4B,CAC3BC,QAAUgC,GAAMvB,KAAKmD,uBAAuB5B,GAC5C/B,SAAW+B,GAAMvB,KAAKuD,wBAAwBhC,KAEhD9B,EAAA,QAAMuE,KAAK,gBACXvE,EAACH,EAA4B,CAC3BC,QAAUgC,GAAMvB,KAAKmD,uBAAuB5B,GAC5C/B,SAAW+B,GAAMvB,KAAKuD,wBAAwBhC,MAGlD9B,EAAA,OAAKC,MAAM,OACTD,EAAA,QAAMuE,KAAK,SAEbvE,EAAA,OAAKsC,QAAS/B,KAAK4B,cAAgB5B,KAAKM,YAAaZ,MAAM,cAC3DD,EAAA,OACEC,MAAM,UACNqC,QAAS/B,KAAK4B,cAAgB5B,KAAKM,YACnCuD,IAAMC,GAAa9D,KAAKsC,QAAUwB,GAElCrE,EAAA,UAAQE,KAAK,SAASD,MAAM,uBAAuBE,QAAU2B,GAAMvB,KAAKa,gBAAgBC,KAAKS,IAC3F9B,EAAA,YAAUI,KAAK,UACfJ,EAAA,QAAMC,MAAM,WAAS,YAEvBD,EAAA,QAAMuE,KAAK,YAEXvE,EAAA,wBAAoB,OAAOE,KAAK,SAASD,MAAM,uBAAuBwE,MAAO,CAAEC,OAAQ,SACrF1E,EAAA,YAAUI,KAAK,UACfJ,EAAA,QAAMC,MAAM,WAAS,a"}

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

@@ -0,0 +1,2 @@
+import{r as s,c as i,h as e,F as t,g as l}from"./p-53c8538c.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-a2c800de.entry.js.map

package/dist/dso-toolkit/p-a2c800de.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-b0d25e25.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as i,H as e,g as l}from"./p-53c8538c.js";const o=":host{display:block}";const r=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];const a=class{constructor(i){s(this,i);this.dsoSizeChange=t(this,"dsoSizeChange",7);this.observer=new ResizeObserver((([s])=>{var t,i;if(!s){throw new Error("No entry found")}const e=(i=(t=r.find((t=>s.contentRect.width>=t.width)))===null||t===void 0?void 0:t.alias)!==null&&i!==void 0?i:r[0].alias;this.sizeAlias=e;this.dsoSizeChange.emit(e)}));this.sizeAlias=r[0].alias;this.sizeWidth=0}async getSize(){return this.sizeAlias}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return i(e,{small:this.sizeAlias==="small",medium:this.sizeAlias==="medium",large:this.sizeAlias==="large"},i("slot",null))}get host(){return l(this)}};a.style=o;export{a as dso_responsive_element};
+//# sourceMappingURL=p-b0d25e25.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["responsiveElementCss","elementSizes","width","alias","ResponsiveElement","this","observer","ResizeObserver","entry","Error","size","_b","_a","find","s","contentRect","sizeAlias","dsoSizeChange","emit","async","componentWillLoad","observe","host","disconnectedCallback","unobserve","render","h","Host","small","medium","large"],"sources":["./src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","./src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Method, State } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"gEAAA,MAAMA,EAAuB,uBCI7B,MAAMC,EAAwD,CAC5D,CACEC,MAAO,IACPC,MAAO,SAET,CACED,MAAO,IACPC,MAAO,UAET,CACED,MAAO,EACPC,MAAO,U,MASEC,EAAiB,M,sEAqBpBC,KAAAC,SAAW,IAAIC,gBAAe,EAAEC,M,QACtC,IAAKA,EAAO,CACV,MAAM,IAAIC,MAAM,iB,CAGlB,MAAMC,GAAOC,GAAAC,EAAAX,EAAaY,MAAMC,GAAMN,EAAMO,YAAYb,OAASY,EAAEZ,WAAM,MAAAU,SAAA,SAAAA,EAAET,SAAK,MAAAQ,SAAA,EAAAA,EAAIV,EAAa,GAAGE,MAEpGE,KAAKW,UAAYN,EACjBL,KAAKY,cAAcC,KAAKR,EAAK,I,eA3BIT,EAAa,GAAGE,M,eAGvC,C,CAYZgB,gBACE,OAAOd,KAAKW,S,CAiBdI,oBACEf,KAAKC,SAASe,QAAQhB,KAAKiB,K,CAG7BC,uBACElB,KAAKC,SAASkB,UAAUnB,KAAKiB,K,CAG/BG,SACE,OACEC,EAACC,EAAI,CAACC,MAAOvB,KAAKW,YAAc,QAASa,OAAQxB,KAAKW,YAAc,SAAUc,MAAOzB,KAAKW,YAAc,SACtGU,EAAA,a"}

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

@@ -0,0 +1,2 @@
+import{r as s,c as o,h as e,F as d,g as i}from"./p-53c8538c.js";import{c as r}from"./p-6a1980b4.js";import{d as a}from"./p-1805f5b0.js";import{i as t}from"./p-33df9903.js";const n=".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:16px;padding-top:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem !important;top:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";const h=992;const c=class{constructor(d){s(this,d);this.dsoHeaderClick=o(this,"dsoHeaderClick",7);this.onWindowResize=a((()=>{this.setDropDownMenu();this.setOverflowMenu();if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}),100);this.MenuItem=s=>e("li",{class:s.active?"dso-active":undefined},e("a",{href:s.url,"aria-current":s.active?"page":undefined,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:s})},s.label));this.mainMenu=[];this.useDropDownMenu="auto";this.authStatus="none";this.loginUrl=undefined;this.logoutUrl=undefined;this.userProfileName=undefined;this.userProfileUrl=undefined;this.userHomeUrl=undefined;this.userHomeActive=undefined;this.showDropDown=undefined;this.hasSubLogo=false;this.overflowMenuItems=0;this.dropdownOptionsOffset=0}clickHandler(s,o,e){var d,i;this.dsoHeaderClick.emit({originalEvent:s,isModifiedEvent:t(s),type:o,menuItem:e===null||e===void 0?void 0:e.menuItem,url:(d=e===null||e===void 0?void 0:e.url)!==null&&d!==void 0?d:(i=e===null||e===void 0?void 0:e.menuItem)===null||i===void 0?void 0:i.url})}setShowDropDown(s){if(s==="auto"){this.setDropDownMenu();return}this.showDropDown=s==="always"}componentWillLoad(){this.hasSubLogo=this.host.querySelector("*[slot = 'sub-logo']")!==null}shrinkMenuToFit(){if(!this.wrapper||!this.nav){return}if(this.wrapper.clientWidth>=this.nav.clientWidth){return}if(this.mainMenu&&this.overflowMenuItems>=this.mainMenu.length){return}this.overflowMenuItems++}componentDidRender(){if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset();return}window.setTimeout((()=>this.shrinkMenuToFit()),0)}componentDidLoad(){this.setShowDropDown(this.useDropDownMenu);if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}setOverflowMenu(){if(this.showDropDown){return}if(this.overflowMenuItems!==0){this.overflowMenuItems=0;return}this.shrinkMenuToFit()}setDropDownMenu(){if(this.useDropDownMenu!=="auto"){return}this.showDropDown=window.innerWidth<h}calculateDropdownOptionsOffset(){var s;if(!this.dropdownElement){return 0}return this.host.clientHeight-(((s=this.dropdownElement)===null||s===void 0?void 0:s.getBoundingClientRect().bottom)-this.host.getBoundingClientRect().top)}connectedCallback(){window.addEventListener("resize",this.onWindowResize)}disconnectedCallback(){window.removeEventListener("resize",this.onWindowResize)}render(){if(this.showDropDown===undefined){return}return e(d,null,e("div",{class:r("dso-header",{["use-drop-down"]:this.showDropDown,["has-sub-logo"]:this.hasSubLogo}),ref:s=>this.wrapper=s},e("div",{class:"logo-container"},e("div",{class:"logo"},e("slot",{name:"logo"})),e("div",{class:"sub-logo"},e("slot",{name:"sub-logo"}))),this.showDropDown&&this.mainMenu&&(this.mainMenu.length>0||this.userHomeUrl||this.authStatus!=="none")&&e("div",{class:"dropdown"},e("dso-dropdown-menu",{"dropdown-align":"right",strategy:"absolute",dropdownOptionsOffset:this.dropdownOptionsOffset,ref:s=>this.dropdownElement=s},e("button",{type:"button",slot:"toggle"},e("span",null,"Menu")),e("div",{class:"dso-dropdown-options"},e("ul",null,this.mainMenu.map(this.MenuItem),this.userHomeUrl&&e("li",null,e("a",{href:this.userHomeUrl,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},"Mijn Omgevingsloket")),this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&e("li",null,e("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName,e("span",{class:"profile-label"}," - Mijn profiel"))),this.authStatus==="loggedOut"&&e("li",null,this.loginUrl?e("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):e("button",{type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),this.authStatus==="loggedIn"&&e("li",null,this.logoutUrl?e("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):e("button",{type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen")))))),!this.showDropDown&&e(d,null,e("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&e("div",{class:"profile"},e("span",{class:"profile-label"},"Welkom:"),e("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName)),this.authStatus==="loggedOut"&&e("div",{class:"login"},this.loginUrl?e("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):e("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),this.authStatus==="loggedIn"&&e("div",{class:"logout"},this.logoutUrl?e("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):e("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen"))),(this.mainMenu&&this.mainMenu.length>0||this.userHomeUrl)&&e("nav",{class:"dso-navbar"},e("ul",{class:"dso-nav dso-nav-main",ref:s=>this.nav=s},this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o<this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem),this.overflowMenuItems>0&&e("li",null,e("dso-dropdown-menu",{"dropdown-align":"left"},e("button",{type:"button",slot:"toggle"},e("span",null,"Meer")),e("div",{class:"dso-dropdown-options"},e("ul",null,this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o>=this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem))))),this.userHomeUrl&&e("li",{class:r("menu-user-home",{"dso-active":this.userHomeActive})},e("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":undefined,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},e("dso-icon",{icon:"user-line"}),"Mijn Omgevingsloket")))))))}get host(){return i(this)}static get watchers(){return{useDropDownMenu:["setShowDropDown"]}}};c.style=n;export{c as dso_header};
+//# sourceMappingURL=p-ba22a05a.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["headerCss","minDesktopViewportWidth","Header","this","onWindowResize","debounce","setDropDownMenu","setOverflowMenu","showDropDown","dropdownOptionsOffset","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","_a","_b","setShowDropDown","value","componentWillLoad","hasSubLogo","host","querySelector","shrinkMenuToFit","wrapper","nav","clientWidth","mainMenu","overflowMenuItems","length","componentDidRender","window","setTimeout","componentDidLoad","useDropDownMenu","innerWidth","dropdownElement","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","authStatus","strategy","slot","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","filter","_","index","userHomeActive","icon"],"sources":["./src/components/header/header.scss?tag=dso-header&encapsulation=scoped","./src/components/header/header.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@mixin nav-item-border($color) {\r\n  border-bottom: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n  font-size: 1.25em;\r\n  line-height: 1;\r\n  margin-top: units.$u1;\r\n  padding: units.$u2 0;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-header {\r\n  border-bottom: 1px solid colors.$grijs-20;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n    &.use-drop-down {\r\n      flex-wrap: nowrap;\r\n    }\r\n  }\r\n\r\n  .dso-nav {\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.logo-container {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 0 units.$u3;\r\n  padding-bottom: units.$u2;\r\n  padding-top: units.$u2;\r\n}\r\n\r\n.login,\r\n.logout {\r\n  .dso-tertiary {\r\n    cursor: pointer;\r\n    font-family: typography.$font-family-base;\r\n    font-weight: 600;\r\n    vertical-align: text-bottom;\r\n  }\r\n}\r\n\r\n.profile,\r\n.logout,\r\n.login {\r\n  a {\r\n    @include anchor.clean();\r\n\r\n    color: colors.$grasgroen;\r\n    font-weight: 600;\r\n  }\r\n}\r\n\r\n.dso-header-session {\r\n  display: flex;\r\n  margin-left: auto;\r\n\r\n  .profile {\r\n    a {\r\n      margin-left: units.$u1;\r\n    }\r\n\r\n    + .logout {\r\n      border-left: 3px solid colors.$grijs-20;\r\n      margin-left: units.$u2;\r\n      padding-left: units.$u2;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-navbar {\r\n  flex-basis: 100%;\r\n\r\n  .dso-dropdown-options {\r\n    border-top: 1px solid colors.$grijs-20;\r\n  }\r\n}\r\n\r\ndso-dropdown-menu {\r\n  button {\r\n    align-items: flex-end;\r\n    background-color: transparent;\r\n    border: 0;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    padding-right: units.$u4;\r\n  }\r\n\r\n  .dso-dropdown-options {\r\n    border: 0;\r\n    border-radius: 0;\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      width: 375px;\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      width: 100%;\r\n    }\r\n\r\n    ul li {\r\n      a {\r\n        color: colors.$bosgroen;\r\n        font-size: 1.25rem;\r\n        padding: units.$u2;\r\n        white-space: pre-wrap;\r\n\r\n        &:focus {\r\n          color: colors.$wit;\r\n        }\r\n\r\n        &:hover {\r\n          background-color: colors.$wit;\r\n          color: colors.$bosgroen;\r\n          text-decoration: underline;\r\n        }\r\n      }\r\n\r\n      &.dso-active {\r\n        a {\r\n          font-weight: 600;\r\n        }\r\n      }\r\n\r\n      + li {\r\n        border-top: 1px solid colors.$grijs-20;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  margin-left: auto;\r\n\r\n  dso-dropdown-menu {\r\n    position: static;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      margin-top: units.$u1 * 3.5;\r\n    }\r\n\r\n    .dso-dropdown-options {\r\n      right: 0;\r\n      top: 100%;\r\n    }\r\n\r\n    button {\r\n      color: colors.$grasgroen;\r\n      font-size: typography.$font-size-base;\r\n      font-weight: 600;\r\n      line-height: normal;\r\n      position: relative;\r\n\r\n      &::after {\r\n        margin-left: units.$u1;\r\n        position: absolute;\r\n        right: 0px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n\r\n      &:hover,\r\n      &:active {\r\n        cursor: pointer;\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-nav {\r\n  align-items: end;\r\n  column-gap: units.$u4;\r\n  display: flex;\r\n  list-style: none;\r\n  margin-bottom: 0;\r\n  margin-top: 0;\r\n  padding-left: 0;\r\n\r\n  > li {\r\n    margin-bottom: 4px;\r\n\r\n    > a {\r\n      display: block;\r\n\r\n      &,\r\n      &:hover,\r\n      &:focus,\r\n      &:visited {\r\n        color: colors.$bosgroen;\r\n      }\r\n    }\r\n\r\n    &.dso-active,\r\n    &.is-active {\r\n      margin-bottom: 0;\r\n\r\n      > a {\r\n        @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n        font-weight: bold;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-nav-main {\r\n    display: flex !important;\r\n\r\n    > li {\r\n      > a {\r\n        @include anchor.reverse();\r\n        @include nav-item-main();\r\n\r\n        // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n        white-space: nowrap;\r\n      }\r\n    }\r\n\r\n    dso-dropdown-menu {\r\n      .dso-dropdown-options {\r\n        left: units.$ru2 * -1 !important;\r\n        top: 3px !important;\r\n      }\r\n\r\n      button {\r\n        @include nav-item-main();\r\n\r\n        align-items: center;\r\n        color: colors.$bosgroen;\r\n        padding-right: units.$u4;\r\n\r\n        &:hover,\r\n        &:active {\r\n          cursor: pointer;\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &::after {\r\n          margin-left: units.$u1;\r\n          position: absolute;\r\n          right: 0px;\r\n          top: auto;\r\n          transform: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .menu-user-home {\r\n    margin-left: auto;\r\n\r\n    dso-icon {\r\n      height: 1em;\r\n      margin-right: units.$u1;\r\n      position: relative;\r\n      top: -2px;\r\n      width: 1.2em;\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  scoped: true,\r\n})\r\nexport class Header {\r\n  private clickHandler(\r\n    e: MouseEvent,\r\n    type: HeaderNavigationType,\r\n    options?: { menuItem?: HeaderMenuItem; url?: string }\r\n  ) {\r\n    this.dsoHeaderClick.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n      type,\r\n      menuItem: options?.menuItem,\r\n      url: options?.url ?? options?.menuItem?.url,\r\n    });\r\n  }\r\n\r\n  private dropdownElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoHeaderElement;\r\n\r\n  /**\r\n   * The main menu items.\r\n   */\r\n  @Prop()\r\n  mainMenu?: HeaderMenuItem[] = [];\r\n\r\n  /**\r\n   * Either have the dropdown menu appear automatically or always.\r\n   */\r\n  @Prop()\r\n  useDropDownMenu: \"always\" | \"auto\" = \"auto\";\r\n\r\n  /**\r\n   * Used to show the login/logout option. 'none' renders nothing.\r\n   */\r\n  @Prop()\r\n  authStatus: \"none\" | \"loggedIn\" | \"loggedOut\" = \"none\";\r\n\r\n  /**\r\n   * When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.\r\n   */\r\n  @Prop()\r\n  loginUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"logout\".\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * The name to show when the user is logged in.\r\n   */\r\n  @Prop()\r\n  userProfileName?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates the profile url.\r\n   */\r\n  @Prop()\r\n  userProfileUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeUrl?: string;\r\n\r\n  /**\r\n   * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeActive?: boolean;\r\n\r\n  @State()\r\n  showDropDown?: boolean;\r\n\r\n  @State()\r\n  hasSubLogo = false;\r\n\r\n  @State()\r\n  overflowMenuItems = 0;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  /**\r\n   * Emitted when something in the header is selected.\r\n   *\r\n   * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n   */\r\n  @Event()\r\n  dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n  @Watch(\"useDropDownMenu\")\r\n  setShowDropDown(value: \"always\" | \"auto\") {\r\n    if (value === \"auto\") {\r\n      this.setDropDownMenu();\r\n\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = value === \"always\";\r\n  }\r\n\r\n  private wrapper: HTMLDivElement | undefined;\r\n\r\n  private nav: HTMLUListElement | undefined;\r\n\r\n  componentWillLoad() {\r\n    this.hasSubLogo = this.host.querySelector(\"*[slot = 'sub-logo']\") !== null;\r\n  }\r\n\r\n  private shrinkMenuToFit() {\r\n    if (!this.wrapper || !this.nav) {\r\n      return;\r\n    }\r\n\r\n    if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n      return;\r\n    }\r\n\r\n    if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n      return;\r\n    }\r\n\r\n    this.overflowMenuItems++;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n      return;\r\n    }\r\n\r\n    window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.setShowDropDown(this.useDropDownMenu);\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }\r\n\r\n  private setOverflowMenu() {\r\n    if (this.showDropDown) {\r\n      return;\r\n    }\r\n\r\n    if (this.overflowMenuItems !== 0) {\r\n      this.overflowMenuItems = 0;\r\n      return;\r\n    }\r\n\r\n    this.shrinkMenuToFit();\r\n  }\r\n\r\n  private setDropDownMenu() {\r\n    if (this.useDropDownMenu !== \"auto\") {\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private calculateDropdownOptionsOffset() {\r\n    if (!this.dropdownElement) {\r\n      return 0;\r\n    }\r\n\r\n    return (\r\n      this.host.clientHeight -\r\n      (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n    );\r\n  }\r\n\r\n  private onWindowResize = debounce(() => {\r\n    this.setDropDownMenu();\r\n    this.setOverflowMenu();\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }, 100);\r\n\r\n  connectedCallback() {\r\n    window.addEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  private MenuItem = (item: HeaderMenuItem) => {\r\n    return (\r\n      <li class={item.active ? \"dso-active\" : undefined}>\r\n        <a\r\n          href={item.url}\r\n          aria-current={item.active ? \"page\" : undefined}\r\n          onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n        >\r\n          {item.label}\r\n        </a>\r\n      </li>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    // Prevent 'flickering' when useDropDownMenu = 'always'\r\n    if (this.showDropDown === undefined) {\r\n      return;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <div\r\n          class={clsx(\"dso-header\", {\r\n            [\"use-drop-down\"]: this.showDropDown,\r\n            [\"has-sub-logo\"]: this.hasSubLogo,\r\n          })}\r\n          ref={(element) => (this.wrapper = element)}\r\n        >\r\n          <div class=\"logo-container\">\r\n            <div class=\"logo\">\r\n              <slot name=\"logo\" />\r\n            </div>\r\n            <div class=\"sub-logo\">\r\n              <slot name=\"sub-logo\" />\r\n            </div>\r\n          </div>\r\n          {this.showDropDown &&\r\n            this.mainMenu &&\r\n            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n              <div class=\"dropdown\">\r\n                <dso-dropdown-menu\r\n                  dropdown-align=\"right\"\r\n                  strategy=\"absolute\"\r\n                  dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n                  ref={(element) => (this.dropdownElement = element)}\r\n                >\r\n                  <button type=\"button\" slot=\"toggle\">\r\n                    <span>Menu</span>\r\n                  </button>\r\n                  <div class=\"dso-dropdown-options\">\r\n                    <ul>\r\n                      {this.mainMenu.map(this.MenuItem)}\r\n                      {this.userHomeUrl && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userHomeUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                          >\r\n                            Mijn Omgevingsloket\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userProfileUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                          >\r\n                            {this.userProfileName}\r\n                            <span class=\"profile-label\"> - Mijn profiel</span>\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedOut\" && (\r\n                        <li>\r\n                          {this.loginUrl ? (\r\n                            <a\r\n                              href={this.loginUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                            >\r\n                              Inloggen\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                              Inloggen\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          {this.logoutUrl ? (\r\n                            <a\r\n                              href={this.logoutUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                            >\r\n                              Uitloggen\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                              Uitloggen\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                    </ul>\r\n                  </div>\r\n                </dso-dropdown-menu>\r\n              </div>\r\n            )}\r\n          {!this.showDropDown && (\r\n            <>\r\n              <div class=\"dso-header-session\">\r\n                {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"profile\">\r\n                    <span class=\"profile-label\">Welkom:</span>\r\n                    <a\r\n                      href={this.userProfileUrl}\r\n                      onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                    >\r\n                      {this.userProfileName}\r\n                    </a>\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedOut\" && (\r\n                  <div class=\"login\">\r\n                    {this.loginUrl ? (\r\n                      <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n                        Inloggen\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        Inloggen\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"logout\">\r\n                    {this.logoutUrl ? (\r\n                      <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n                        Uitloggen\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        Uitloggen\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              {((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (\r\n                <nav class=\"dso-navbar\">\r\n                  <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n                    {this.mainMenu &&\r\n                      this.mainMenu\r\n                        .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n                        .map(this.MenuItem)}\r\n                    {this.overflowMenuItems > 0 && (\r\n                      <li>\r\n                        <dso-dropdown-menu dropdown-align=\"left\">\r\n                          <button type=\"button\" slot=\"toggle\">\r\n                            <span>Meer</span>\r\n                          </button>\r\n                          <div class=\"dso-dropdown-options\">\r\n                            <ul>\r\n                              {this.mainMenu &&\r\n                                this.mainMenu\r\n                                  .filter(\r\n                                    (_, index) =>\r\n                                      this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n                                  )\r\n                                  .map(this.MenuItem)}\r\n                            </ul>\r\n                          </div>\r\n                        </dso-dropdown-menu>\r\n                      </li>\r\n                    )}\r\n                    {this.userHomeUrl && (\r\n                      <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n                        <a\r\n                          href={this.userHomeUrl}\r\n                          aria-current={this.userHomeActive ? \"page\" : undefined}\r\n                          onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                        >\r\n                          <dso-icon icon=\"user-line\"></dso-icon>\r\n                          Mijn Omgevingsloket\r\n                        </a>\r\n                      </li>\r\n                    )}\r\n                  </ul>\r\n                </nav>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as n,F as e,g as o}from"./p-53c8538c.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-c4876680.entry.js.map

package/dist/dso-toolkit/p-c4876680.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-cacefb87.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o}from"./p-53c8538c.js";import{c as e}from"./p-6a1980b4.js";const t=":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::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}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#000;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#000;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#000;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#000;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";const i=class{constructor(o){r(this,o);this.status=undefined;this.roleAlert=undefined}render(){const r=i.statusMap.get(this.status);if(!r){throw new Error(`Invalid status ${this.status}`)}return o("div",{class:e("alert",`alert-${this.status}`),role:this.roleAlert?"alert":undefined},o("dso-icon",{icon:"status-"+this.status}),o("span",{class:"sr-only"},r,":"),o("slot",null))}};i.statusMap=new Map([["success","Gelukt"],["info","Opmerking"],["warning","Waarschuwing"],["error","Fout"]]);i.style=t;export{i as dso_alert};
+//# sourceMappingURL=p-cacefb87.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","Alert","render","status","statusMap","get","this","Error","h","class","clsx","role","roleAlert","undefined","icon","Map"],"sources":["./src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-top: units.$u3;\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.alert {\r\n  @include alert.root();\r\n\r\n  dso-icon {\r\n    @include alert.icon-position();\r\n\r\n    height: units.$u4;\r\n    width: units.$u4;\r\n  }\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-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop()\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  private static statusMap = new Map<string, string>([\r\n    [\"success\", \"Gelukt\"],\r\n    [\"info\", \"Opmerking\"],\r\n    [\"warning\", \"Waarschuwing\"],\r\n    [\"error\", \"Fout\"],\r\n  ]);\r\n\r\n  render() {\r\n    const status = Alert.statusMap.get(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div class={clsx(\"alert\", `alert-${this.status}`)} role={this.roleAlert ? \"alert\" : undefined}>\r\n        <dso-icon icon={\"status-\" + this.status}></dso-icon>\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0EAAA,MAAMA,EAAW,+3B,MCQJC,EAAK,M,wEAoBhBC,SACE,MAAMC,EAASF,EAAMG,UAAUC,IAAIC,KAAKH,QACxC,IAAKA,EAAQ,CACX,MAAM,IAAII,MAAM,kBAAkBD,KAAKH,S,CAGzC,OACEK,EAAA,OAAKC,MAAOC,EAAK,QAAS,SAASJ,KAAKH,UAAWQ,KAAML,KAAKM,UAAY,QAAUC,WAClFL,EAAA,YAAUM,KAAM,UAAYR,KAAKH,SACjCK,EAAA,QAAMC,MAAM,WAAWN,EAAM,KAC7BK,EAAA,a,GAjBSP,EAAAG,UAAY,IAAIW,IAAoB,CACjD,CAAC,UAAW,UACZ,CAAC,OAAQ,aACT,CAAC,UAAW,gBACZ,CAAC,QAAS,U"}

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

@@ -0,0 +1,2 @@
+import{r as n,c as t,h as o,H as e}from"./p-53c8538c.js";const r=":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.btn-sm {\n  line-height: 1rem;\n}\n.toggle-visibility-button.btn-sm dso-icon,\n.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.zoom-buttons button.btn-sm dso-icon,\n.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}";var i=undefined&&undefined.__classPrivateFieldGet||function(n,t,o,e){if(o==="a"&&!e)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?n!==t||!e:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?e:o==="a"?e.call(n):e?e.value:t.get(n)};var s=undefined&&undefined.__classPrivateFieldSet||function(n,t,o,e,r){if(e==="m")throw new TypeError("Private method is not writable");if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?n!==t||!r:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e==="a"?r.call(n,o):r?r.value=o:t.set(n,o),o};var a,l;const d=300;const f=class{constructor(o){n(this,o);this.dsoZoomIn=t(this,"dsoZoomIn",7);this.dsoZoomOut=t(this,"dsoZoomOut",7);this.dsoToggle=t(this,"dsoToggle",7);this.panelTitle="Kaartlagen";a.set(this,void 0);l.set(this,void 0);this.open=false;this.disableZoom=undefined;this.hideContent=!this.open}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=i(this,a,"f"))===null||n===void 0?void 0:n.focus()}),d)}else{setTimeout((()=>{var n;this.hideContent=true;(n=i(this,l,"f"))===null||n===void 0?void 0:n.focus()}),d)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return o(e,null,o("button",{type:"button",id:"toggle-visibility-button",class:"toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>s(this,l,n,"f")},o("dso-icon",{icon:"layers"}),o("span",null,"Kaartlagen")),o("div",{class:"zoom-buttons"},o("button",{type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:this.disableZoom==="in"||this.disableZoom==="both"},o("span",null,"Zoom in"),o("dso-icon",{icon:"plus"})),o("button",{type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:this.disableZoom==="out"||this.disableZoom==="both"},o("span",null,"Zoom uit"),o("dso-icon",{icon:"minus"}))),o("section",{hidden:this.hideContent},o("header",null,o("h2",null,this.panelTitle),o("button",{type:"button",class:"close-button",onClick:n=>this.toggleVisibility(n),ref:n=>s(this,a,n,"f")},o("span",null,"Verberg paneel ",this.panelTitle),o("dso-icon",{icon:"times"}))),o("dso-scrollable",null,o("div",{class:"content"},o("slot",null)))))}static get watchers(){return{open:["watchOpen"]}}};a=new WeakMap,l=new WeakMap;f.style=r;export{f as dso_map_controls};
+//# sourceMappingURL=p-cb6745a3.entry.js.map