@dso-toolkit/core 66.2.0 → 67.0.0-ghi-2365.0

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"dso-icon.cjs\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section.cjs\",[[1,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select.cjs\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item.cjs\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item.cjs\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header.cjs\",[[6,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls.cjs\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal.cjs\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"role\":[1],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card.cjs\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy.cjs\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card.cjs\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel.cjs\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button.cjs\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"],\"manual\":[4],\"manualInputWrapperElement\":[32],\"manualCount\":[32]},null,{\"manual\":[\"watchManualCallback\"]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card.cjs\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-accordion.cjs\",[[1,\"dso-accordion\",{\"variant\":[513],\"reverseAlign\":[516,\"reverse-align\"],\"_getState\":[64]},null,{\"variant\":[\"updateVariant\"],\"reverseAlign\":[\"updateReverseAlign\"]}]]],[\"dso-action-list.cjs\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner.cjs\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container.cjs\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-highlight-box.cjs\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar.cjs\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab.cjs\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid.cjs\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelOpen\":[516,\"filterpanel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[\"documentPanelOpenWatcher\"],\"filterpanelOpen\":[\"filterpanelOpenWatcher\"],\"overlayOpen\":[\"overlayOpenWatcher\"]}]]],[\"dso-toggletip.cjs\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu.cjs\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable.cjs\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-info-button.cjs\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-info_2.cjs\",[[6,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_2.cjs\",[[1,\"dso-label\",{\"compact\":[4],\"removable\":[4],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}],[1,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[\"watchPosition\"],\"strategy\":[\"watchStrategy\"],\"active\":[\"watchActive\"]}]]],[\"dso-alert_6.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516]}],[1,\"dso-panel\"],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2.cjs\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[\"toggleOpen\"]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[4]}]]],[\"dso-responsive-element.cjs\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-renvooi_2.cjs\",[[1,\"dso-renvooi\",{\"value\":[1]}],[4,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"dso-icon.cjs\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section.cjs\",[[1,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select.cjs\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item.cjs\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item.cjs\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header.cjs\",[[1,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls.cjs\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal.cjs\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card.cjs\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy.cjs\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card.cjs\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel.cjs\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button.cjs\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"],\"manual\":[4],\"manualInputWrapperElement\":[32],\"manualCount\":[32]},null,{\"manual\":[\"watchManualCallback\"]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card.cjs\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink.cjs\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-accordion.cjs\",[[1,\"dso-accordion\",{\"variant\":[513],\"reverseAlign\":[516,\"reverse-align\"],\"_getState\":[64]},null,{\"variant\":[\"updateVariant\"],\"reverseAlign\":[\"updateReverseAlign\"]}]]],[\"dso-action-list.cjs\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner.cjs\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container.cjs\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-highlight-box.cjs\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar.cjs\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab.cjs\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid.cjs\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelOpen\":[516,\"filterpanel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[\"documentPanelOpenWatcher\"],\"filterpanelOpen\":[\"filterpanelOpenWatcher\"],\"overlayOpen\":[\"overlayOpenWatcher\"]}]]],[\"dso-info-button.cjs\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip.cjs\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu.cjs\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable.cjs\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-info_2.cjs\",[[6,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_2.cjs\",[[1,\"dso-label\",{\"compact\":[4],\"removable\":[516],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}],[1,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[\"watchPosition\"],\"strategy\":[\"watchStrategy\"],\"active\":[\"watchActive\"]}]]],[\"dso-alert_6.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516]}],[1,\"dso-panel\"],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2.cjs\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[\"toggleOpen\"]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element.cjs\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-renvooi_2.cjs\",[[1,\"dso-renvooi\",{\"value\":[1]}],[4,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]]]"), options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/v4-6fbeaa38.js.map

@@ -1 +1 @@
-{"file":"v4-6fbeaa38.js","mappings":"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","names":[],"sources":["../../node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/uuid/dist/esm-browser/native.js","../../node_modules/uuid/dist/esm-browser/v4.js"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n    byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n    return (byteToHex[arr[offset + 0]] +\n        byteToHex[arr[offset + 1]] +\n        byteToHex[arr[offset + 2]] +\n        byteToHex[arr[offset + 3]] +\n        '-' +\n        byteToHex[arr[offset + 4]] +\n        byteToHex[arr[offset + 5]] +\n        '-' +\n        byteToHex[arr[offset + 6]] +\n        byteToHex[arr[offset + 7]] +\n        '-' +\n        byteToHex[arr[offset + 8]] +\n        byteToHex[arr[offset + 9]] +\n        '-' +\n        byteToHex[arr[offset + 10]] +\n        byteToHex[arr[offset + 11]] +\n        byteToHex[arr[offset + 12]] +\n        byteToHex[arr[offset + 13]] +\n        byteToHex[arr[offset + 14]] +\n        byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n    const uuid = unsafeStringify(arr, offset);\n    if (!validate(uuid)) {\n        throw TypeError('Stringified UUID is invalid');\n    }\n    return uuid;\n}\nexport default stringify;\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5naWZ5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3N0cmluZ2lmeS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLFFBQVEsTUFBTSxlQUFlLENBQUM7QUFNckMsTUFBTSxTQUFTLEdBQWEsRUFBRSxDQUFDO0FBRS9CLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxHQUFHLEVBQUUsRUFBRSxDQUFDLEVBQUUsQ0FBQztJQUM3QixTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztBQUNwRCxDQUFDO0FBRUQsTUFBTSxVQUFVLGVBQWUsQ0FBQyxHQUFlLEVBQUUsTUFBTSxHQUFHLENBQUM7SUFNekQsT0FBTyxDQUNMLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLEdBQUc7UUFDSCxTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztRQUMxQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztRQUMxQixHQUFHO1FBQ0gsU0FBUyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDMUIsU0FBUyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDMUIsR0FBRztRQUNILFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLEdBQUc7UUFDSCxTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUM1QixDQUFDLFdBQVcsRUFBRSxDQUFDO0FBQ2xCLENBQUM7QUFFRCxTQUFTLFNBQVMsQ0FBQyxHQUFlLEVBQUUsTUFBTSxHQUFHLENBQUM7SUFDNUMsTUFBTSxJQUFJLEdBQUcsZUFBZSxDQUFDLEdBQUcsRUFBRSxNQUFNLENBQUMsQ0FBQztJQU8xQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7UUFDcEIsTUFBTSxTQUFTLENBQUMsNkJBQTZCLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQsT0FBTyxJQUFJLENBQUM7QUFDZCxDQUFDO0FBRUQsZUFBZSxTQUFTLENBQUMifQ==","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n    if (!getRandomValues) {\n        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n        }\n        getRandomValues = crypto.getRandomValues.bind(crypto);\n    }\n    return getRandomValues(rnds8);\n}\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm5nLWJyb3dzZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvcm5nLWJyb3dzZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUEsSUFBSSxlQUEwRCxDQUFDO0FBRS9ELE1BQU0sS0FBSyxHQUFHLElBQUksVUFBVSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0FBRWpDLE1BQU0sQ0FBQyxPQUFPLFVBQVUsR0FBRztJQUV6QixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDckIsSUFBSSxPQUFPLE1BQU0sS0FBSyxXQUFXLElBQUksQ0FBQyxNQUFNLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDN0QsTUFBTSxJQUFJLEtBQUssQ0FDYiwwR0FBMEcsQ0FDM0csQ0FBQztRQUNKLENBQUM7UUFFRCxlQUFlLEdBQUcsTUFBTSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUVELE9BQU8sZUFBZSxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBQ2hDLENBQUMifQ==","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF0aXZlLWJyb3dzZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbmF0aXZlLWJyb3dzZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxVQUFVLEdBQ2QsT0FBTyxNQUFNLEtBQUssV0FBVyxJQUFJLE1BQU0sQ0FBQyxVQUFVLElBQUksTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7QUFFdkYsZUFBZSxFQUFFLFVBQVUsRUFBRSxDQUFDIn0=","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n    if (native.randomUUID && !buf && !options) {\n        return native.randomUUID();\n    }\n    options = options || {};\n    const rnds = options.random || (options.rng || rng)();\n    rnds[6] = (rnds[6] & 0x0f) | 0x40;\n    rnds[8] = (rnds[8] & 0x3f) | 0x80;\n    if (buf) {\n        offset = offset || 0;\n        for (let i = 0; i < 16; ++i) {\n            buf[offset + i] = rnds[i];\n        }\n        return buf;\n    }\n    return unsafeStringify(rnds);\n}\nexport default v4;\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidjQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdjQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxNQUFNLE1BQU0sYUFBYSxDQUFDO0FBQ2pDLE9BQU8sR0FBRyxNQUFNLFVBQVUsQ0FBQztBQUMzQixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFJakQsU0FBUyxFQUFFLENBQUMsT0FBeUIsRUFBRSxHQUFnQixFQUFFLE1BQWU7SUFDdEUsSUFBSSxNQUFNLENBQUMsVUFBVSxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDMUMsT0FBTyxNQUFNLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELE9BQU8sR0FBRyxPQUFPLElBQUksRUFBRSxDQUFDO0lBRXhCLE1BQU0sSUFBSSxHQUFHLE9BQU8sQ0FBQyxNQUFNLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxJQUFJLEdBQUcsQ0FBQyxFQUFFLENBQUM7SUFHdEQsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQztJQUNsQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDO0lBR2xDLElBQUksR0FBRyxFQUFFLENBQUM7UUFDUixNQUFNLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztRQUVyQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUM7WUFDNUIsR0FBRyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDNUIsQ0FBQztRQUVELE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVELE9BQU8sZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDO0FBQy9CLENBQUM7QUFFRCxlQUFlLEVBQUUsQ0FBQyJ9"],"version":3}
+{"file":"v4-6fbeaa38.js","mappings":"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","names":[],"sources":["../../node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/uuid/dist/esm-browser/native.js","../../node_modules/uuid/dist/esm-browser/v4.js"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n    byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n    return (byteToHex[arr[offset + 0]] +\n        byteToHex[arr[offset + 1]] +\n        byteToHex[arr[offset + 2]] +\n        byteToHex[arr[offset + 3]] +\n        '-' +\n        byteToHex[arr[offset + 4]] +\n        byteToHex[arr[offset + 5]] +\n        '-' +\n        byteToHex[arr[offset + 6]] +\n        byteToHex[arr[offset + 7]] +\n        '-' +\n        byteToHex[arr[offset + 8]] +\n        byteToHex[arr[offset + 9]] +\n        '-' +\n        byteToHex[arr[offset + 10]] +\n        byteToHex[arr[offset + 11]] +\n        byteToHex[arr[offset + 12]] +\n        byteToHex[arr[offset + 13]] +\n        byteToHex[arr[offset + 14]] +\n        byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n    const uuid = unsafeStringify(arr, offset);\n    if (!validate(uuid)) {\n        throw TypeError('Stringified UUID is invalid');\n    }\n    return uuid;\n}\nexport default stringify;\n","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n    if (!getRandomValues) {\n        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n        }\n        getRandomValues = crypto.getRandomValues.bind(crypto);\n    }\n    return getRandomValues(rnds8);\n}\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n    if (native.randomUUID && !buf && !options) {\n        return native.randomUUID();\n    }\n    options = options || {};\n    const rnds = options.random || (options.rng || rng)();\n    rnds[6] = (rnds[6] & 0x0f) | 0x40;\n    rnds[8] = (rnds[8] & 0x3f) | 0x80;\n    if (buf) {\n        offset = offset || 0;\n        for (let i = 0; i < 16; ++i) {\n            buf[offset + i] = rnds[i];\n        }\n        return buf;\n    }\n    return unsafeStringify(rnds);\n}\nexport default v4;\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -52,6 +52,7 @@
     "components/responsive-element/responsive-element.js",
     "components/scrollable/scrollable.js",
     "components/selectable/selectable.js",
+    "components/skiplink/skiplink.js",
     "components/slide-toggle/slide-toggle.js",
     "components/table/table.js",
     "components/tabs/tabs.js",

package/dist/collection/components/header/header.css

@@ -38,10 +38,25 @@
 .dso-header-session .login .dso-tertiary,
 .dso-header-session .logout .dso-tertiary,
 .dso-header-session .help .dso-tertiary {
+  display: flex;
+  gap: 0.5rem;
   cursor: pointer;
+  border: 0;
+  background-color: transparent;
+  padding-inline-start: 0;
+  outline-offset: 2px;
   font-family: Asap, sans-serif;
+  color: #39870c;
+  font-size: 1rem;
   font-weight: 600;
   line-height: 1.5;
+  text-decoration: none;
+}
+.dso-header-session .profile .dso-tertiary:hover,
+.dso-header-session .login .dso-tertiary:hover,
+.dso-header-session .logout .dso-tertiary:hover,
+.dso-header-session .help .dso-tertiary:hover {
+  text-decoration: underline;
 }
 .dso-header-session .profile {
   margin-inline-start: 8px;
@@ -60,21 +75,26 @@
 .dso-navbar {
   flex-basis: 100%;
 }
-.dso-navbar .dso-dropdown-options {
-  border-block-start: 1px solid #ccc;
-}
 
 dso-dropdown-menu button {
+  position: relative;
+  display: flex;
   align-items: center;
   background-color: transparent;
   border: 0;
-  display: flex;
   font-family: Asap, sans-serif;
-  padding-inline-end: 32px;
+}
+dso-dropdown-menu button svg {
+  inline-size: 24px;
+  block-size: 24px;
+  margin-inline-start: 8px;
+}
+dso-dropdown-menu button[aria-expanded=true] svg {
+  transform: rotate(180deg);
 }
 dso-dropdown-menu .dso-dropdown-options {
-  border: 0;
   border-radius: 0;
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
 }
 @media screen and (min-width: 768px) {
   dso-dropdown-menu .dso-dropdown-options {
@@ -86,16 +106,24 @@ dso-dropdown-menu .dso-dropdown-options {
     inline-size: 100%;
   }
 }
+dso-dropdown-menu .dso-dropdown-options ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 dso-dropdown-menu .dso-dropdown-options ul li a,
 dso-dropdown-menu .dso-dropdown-options ul li button {
+  display: block;
+  padding: 16px;
   color: #275937;
   font-size: 1.25rem;
-  padding: 16px;
   white-space: pre-wrap;
+  text-decoration: none;
 }
-dso-dropdown-menu .dso-dropdown-options ul li a:focus,
-dso-dropdown-menu .dso-dropdown-options ul li button:focus {
+dso-dropdown-menu .dso-dropdown-options ul li a:focus-visible,
+dso-dropdown-menu .dso-dropdown-options ul li button:focus-visible {
   color: #fff;
+  background-color: #39870c;
 }
 dso-dropdown-menu .dso-dropdown-options ul li a:hover,
 dso-dropdown-menu .dso-dropdown-options ul li button:hover {
@@ -103,6 +131,13 @@ dso-dropdown-menu .dso-dropdown-options ul li button:hover {
   color: #275937;
   text-decoration: underline;
 }
+dso-dropdown-menu .dso-dropdown-options ul li button {
+  inline-size: 100%;
+  text-align: start;
+}
+dso-dropdown-menu .dso-dropdown-options ul li button dso-icon {
+  margin-inline-start: 8px;
+}
 dso-dropdown-menu .dso-dropdown-options ul li.dso-active a {
   font-weight: 600;
 }
@@ -121,6 +156,7 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
 .dropdown dso-dropdown-menu .dso-dropdown-options {
   inset-inline-end: 0;
   inset-block-start: 100%;
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
 }
 .dropdown dso-dropdown-menu > button {
   color: #39870c;
@@ -193,7 +229,6 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   padding-inline: 0;
   align-items: center;
   color: #275937;
-  padding-inline-end: 32px;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu button:hover, .dso-nav.dso-nav-main dso-dropdown-menu button:active {
   cursor: pointer;

package/dist/collection/components/header/header.i18n.js

@@ -6,7 +6,6 @@ export const translations = {
             logout: "Log out",
             help: "Help",
             overflowMenu: "More",
-            userHome: "Mijn Omgevingsloket",
         },
     },
     nl: {

package/dist/collection/components/header/header.i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.i18n.js","sourceRoot":"","sources":["../../../../src/components/header/header.i18n.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,SAAS;YACjB,IAAI,EAAE,MAAM;YACZ,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,qBAAqB;SAChC;KACF;IACD,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,MAAM;YACZ,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,qBAAqB;SAChC;KACF;CACF,CAAC","sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Log in\",\r\n      logout: \"Log out\",\r\n      help: \"Help\",\r\n      overflowMenu: \"More\",\r\n      userHome: \"Mijn Omgevingsloket\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Inloggen\",\r\n      logout: \"Uitloggen\",\r\n      help: \"Help\",\r\n      overflowMenu: \"Meer\",\r\n      userHome: \"Mijn Omgevingsloket\",\r\n    },\r\n  },\r\n};\r\n"]}
+{"version":3,"file":"header.i18n.js","sourceRoot":"","sources":["../../../../src/components/header/header.i18n.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,SAAS;YACjB,IAAI,EAAE,MAAM;YACZ,YAAY,EAAE,MAAM;SACrB;KACF;IACD,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,MAAM;YACZ,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,qBAAqB;SAChC;KACF;CACF,CAAC","sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Log in\",\r\n      logout: \"Log out\",\r\n      help: \"Help\",\r\n      overflowMenu: \"More\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Inloggen\",\r\n      logout: \"Uitloggen\",\r\n      help: \"Help\",\r\n      overflowMenu: \"Meer\",\r\n      userHome: \"Mijn Omgevingsloket\",\r\n    },\r\n  },\r\n};\r\n"]}

package/dist/collection/components/header/header.js

@@ -117,16 +117,16 @@ export class Header {
                 ["use-drop-down"]: this.showDropDown,
             }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("slot", { name: "logo" })), this.showDropDown &&
             this.mainMenu &&
-            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", strategy: "absolute", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu"))), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
+            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", strategy: "absolute", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("svg", { id: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, h("path", { fill: "currentColor", d: "M12,16,5.29,9.63a.93.93,0,0,1,0-1.35,1,1,0,0,1,1.42,0l5.29,5,5.29-5a1,1,0,0,1,1.42,0,.91.91,0,0,1,0,1.34Z" }))), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
             this.mainMenu
                 .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
-                .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { placement: "bottom" }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu"))), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
+                .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { placement: "bottom" }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("svg", { id: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, h("path", { fill: "currentColor", d: "M12,16,5.29,9.63a.93.93,0,0,1,0-1.35,1,1,0,0,1,1.42,0l5.29,5,5.29-5a1,1,0,0,1,1.42,0,.91.91,0,0,1,0,1.34Z" }))), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
             this.mainMenu
                 .filter((_, index) => this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems)
                 .map(this.MenuItem)))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-line" }), this.text("userHome"))))))))))));
     }
     static get is() { return "dso-header"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["header.scss"]

package/dist/collection/components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["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\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\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.\r\n   * The login button will then 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   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * Show a help-button or link in the header\r\n   */\r\n  @Prop()\r\n  showHelp? = false;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"help\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  helpUrl?: 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  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  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  private text = i18n(() => this.host, translations);\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.dropdownElement?.removeAttribute(\"open\");\r\n    this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\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          })}\r\n          ref={(element) => (this.wrapper = element)}\r\n        >\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\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>{this.text(\"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                            {this.text(\"userHome\")}\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                              {this.text(\"login\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                              {this.text(\"login\")}\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                              {this.text(\"logout\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                              {this.text(\"logout\")}\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.showHelp && (\r\n                        <li>\r\n                          {this.helpUrl ? (\r\n                            <a\r\n                              href={this.helpUrl}\r\n                              class=\"dso-tertiary\"\r\n                              onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                            >\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\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                    <a\r\n                      href={this.userProfileUrl}\r\n                      class=\"dso-tertiary\"\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\r\n                        href={this.loginUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                      >\r\n                        {this.text(\"login\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        {this.text(\"login\")}\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\r\n                        href={this.logoutUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                      >\r\n                        {this.text(\"logout\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        {this.text(\"logout\")}\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.showHelp && (\r\n                  <div class=\"help\">\r\n                    {this.helpUrl ? (\r\n                      <a\r\n                        href={this.helpUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                      >\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\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 placement=\"bottom\">\r\n                          <button type=\"button\" slot=\"toggle\">\r\n                            <span>{this.text(\"overflowMenu\")}</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                          {this.text(\"userHome\")}\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"]}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["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\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  shadow: 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.\r\n   * The login button will then 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   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * Show a help-button or link in the header\r\n   */\r\n  @Prop()\r\n  showHelp? = false;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"help\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  helpUrl?: 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  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  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  private text = i18n(() => this.host, translations);\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.dropdownElement?.removeAttribute(\"open\");\r\n    this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\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          })}\r\n          ref={(element) => (this.wrapper = element)}\r\n        >\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\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>{this.text(\"menu\")}</span>\r\n                    <svg id=\"chevron-down\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n                      <path\r\n                        fill=\"currentColor\"\r\n                        d=\"M12,16,5.29,9.63a.93.93,0,0,1,0-1.35,1,1,0,0,1,1.42,0l5.29,5,5.29-5a1,1,0,0,1,1.42,0,.91.91,0,0,1,0,1.34Z\"\r\n                      ></path>\r\n                    </svg>\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                            {this.text(\"userHome\")}\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                              {this.text(\"login\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                              {this.text(\"login\")}\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                              {this.text(\"logout\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                              {this.text(\"logout\")}\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.showHelp && (\r\n                        <li>\r\n                          {this.helpUrl ? (\r\n                            <a\r\n                              href={this.helpUrl}\r\n                              class=\"dso-tertiary\"\r\n                              onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                            >\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\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                    <a\r\n                      href={this.userProfileUrl}\r\n                      class=\"dso-tertiary\"\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\r\n                        href={this.loginUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                      >\r\n                        {this.text(\"login\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        {this.text(\"login\")}\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\r\n                        href={this.logoutUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                      >\r\n                        {this.text(\"logout\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        {this.text(\"logout\")}\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.showHelp && (\r\n                  <div class=\"help\">\r\n                    {this.helpUrl ? (\r\n                      <a\r\n                        href={this.helpUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                      >\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\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 placement=\"bottom\">\r\n                          <button type=\"button\" slot=\"toggle\">\r\n                            <span>{this.text(\"menu\")}</span>\r\n                            <svg id=\"chevron-down\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                fill=\"currentColor\"\r\n                                d=\"M12,16,5.29,9.63a.93.93,0,0,1,0-1.35,1,1,0,0,1,1.42,0l5.29,5,5.29-5a1,1,0,0,1,1.42,0,.91.91,0,0,1,0,1.34Z\"\r\n                              ></path>\r\n                            </svg>\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                          {this.text(\"userHome\")}\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"]}

package/dist/collection/components/info/info.css

@@ -4,6 +4,26 @@
   padding-inline: 16px 32px;
   position: relative;
 }
+:host {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #f2f2f2;
+  border-color: #f2f2f2;
+  color: #191919;
+}
+:host a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: url("./dso-icons.svg#img-download-zwart");
+}
+:host a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: url("./dso-icons.svg#img-external-link-zwart");
+}
+:host a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-call-zwart");
+}
+:host a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-email-zwart");
+}
 :host > button {
   background-color: transparent;
   border-style: none;

package/dist/collection/components/label/label.js

@@ -102,13 +102,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '07723299883f0fe1b61f09feed46a39f37205481' }, h("span", { key: '0ef33ed0541bbb451d3c9bec9493ff563eadd8b0', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+        return (h(Fragment, { key: '1ea5da78bab4c0deec1e14b08c71a6d08b5c0041' }, h("span", { key: '9f1c40eb645f7d610bcb749256046371a469b30c', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: '287637d9cff61b3f9a049f3bf923085397d06a9f', name: "symbol" }), h("span", { key: '745b33815b6387571b4febfd435ab4bf6102b4f7', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '44f0e70bc77d9ddd749a7bd2bc204d5d99e2769a', name: "symbol" }), h("span", { key: '6c4c1540325cc57fdc442ae44307b132cc0c77cc', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '3bd278fe59bd427423fd0b0ea12aea49e73800ac' })), this.removable && (h("button", { key: '975eaa6513ffba48d5ee17fe15af43deb8ae6aa3', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '44b03c47c0e9e261070da1ec55875f279104a509', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'b980445c597c236d23cf7b002b9c0155d8324ee4', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '74c2da63edc210b7caac69bc5ac1413da8b18592', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'bf178d4f785f01233ec95902488c142d5fdbdf22' })), this.removable && (h("button", { key: '71bfdfdbe170942f90eab94b37bf3b076c4057cd', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '849bc8138812af02f54bfb4446d8cf0d93af73d1', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'f968019fa61736b7ec6c676bf71a78efa70efd8a', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '6eb60908fec4165362550d29cbac3b5a07b31ce1', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }
@@ -156,7 +156,7 @@ export class Label {
                     "text": "Shows a button that can be used to remove the Label."
                 },
                 "attribute": "removable",
-                "reflect": false
+                "reflect": true
             },
             "status": {
                 "type": "string",

package/dist/collection/components/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/label/label.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: LabelStatus;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby=\"toggle-anchor\"\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/label/label.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: LabelStatus;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby=\"toggle-anchor\"\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}