npm - @dso-toolkit/core - Versions diffs - 70.0.0 → 70.1.0 - Mend

@dso-toolkit/core 70.0.0 → 70.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/dist/dso-toolkit/{p-89476db1.entry.js.map → p-1d4589b3.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["viewerGridVrkTabs","viewerGridVdkTabs","viewerGridTabLabelMap","main","map","document","search","viewerGridSizeLabelMap","small","medium","large","SizingButton","className","onClick","label","icon","h","type","class","SizingButtons","shrink","expand","size","panelLabel","placement","buttons","push","toLocaleLowerCase","DocumentPanel","tabView","panelSize","shrinkDocumentPanel","expandDocumentPanel","dsoDocumentPanelSizeChangeAnimationEnd","onTransitionEnd","e","propertyName","emit","currentSize","name","ViewerGridFilterpanelButtons","onApply","onCancel","Filterpanel","title","mode","ref","dsoCloseFilterpanel","id","clsx","preventDefault","Fragment","MainPanel","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","toggleMainPanel","dsoMainSizeChangeAnimationEnd","compact","contracted","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","resizeObserver","ResizeObserver","debounce","entry","shadowRoot","target","getRootNode","ShadowRoot","isDsoViewerGridComponent","host","_checkMainPanelVisibility","element","tagName","buttonWidth","tabViewBreakpoint","minMapElementWidth","ViewerGrid","constructor","hostRef","this","mediaCondition","filterpanelOpen","overlayOpen","documentPanelSize","window","innerWidth","switchActiveTab","tab","dsoActiveTabSwitch","emitShrinkMain","dsoMainSizeChange","nextSize","emitExpandMain","dsoDocumentPanelSizeChange","mapElement","HTMLDivElement","clientWidth","dsoMainPanelToggle","hide","changeListener","largeScreen","matches","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","showFilterpanel","_a","filterpanel","show","_b","showModal","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","key","activeTab","filterpanelTitle"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n currentSize: ViewerGridPanelSize;\r\n nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterpanelEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" \| \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" \| \"medium\" \| \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab \| ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n main: \"Hoofdpaneel\",\r\n map: \"Kaart\",\r\n document: \"Document\",\r\n search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n className: string;\r\n onClick: any;\r\n label: string;\r\n icon: \"chevron-left\" \| \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n <button type=\"button\" class={className} onClick={onClick}>\r\n <span class=\"sr-only\">{label}</span>\r\n <dso-icon icon={icon}></dso-icon>\r\n </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n panelLabel: string;\r\n size: ViewerGridPanelSize;\r\n expand: () => void;\r\n shrink: () => void;\r\n placement: \"left\" \| \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n shrink,\r\n expand,\r\n size,\r\n panelLabel,\r\n placement,\r\n}) => {\r\n const buttons = [];\r\n\r\n if (size !== \"small\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={shrink}\r\n label={`${panelLabel} smaller maken`}\r\n icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n className=\"shrink\"\r\n />,\r\n );\r\n }\r\n\r\n if (size !== \"large\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={expand}\r\n label={`${panelLabel} breder maken`}\r\n icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n className=\"expand\"\r\n />,\r\n );\r\n }\r\n\r\n return (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n </span>\r\n {buttons}\r\n </div>\r\n );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n tabView: boolean;\r\n panelSize: ViewerGridPanelSize;\r\n shrinkDocumentPanel: () => void;\r\n expandDocumentPanel: () => void;\r\n dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n tabView,\r\n panelSize,\r\n shrinkDocumentPanel,\r\n expandDocumentPanel,\r\n dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class=\"dso-document-panel\"\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n }\r\n }}\r\n >\r\n {!tabView && (\r\n <SizingButtons\r\n panelLabel=\"Documentpaneel\"\r\n size={panelSize}\r\n expand={expandDocumentPanel}\r\n shrink={shrinkDocumentPanel}\r\n placement=\"right\"\r\n />\r\n )}\r\n <div class=\"content\">\r\n <slot name=\"document-panel\" />\r\n </div>\r\n </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n onApply: (mouseEvent: MouseEvent) => void;\r\n onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n onApply,\r\n onCancel,\r\n}) => (\r\n <div class=\"filterpanel-buttons\">\r\n <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n <span>Annuleren</span>\r\n </button>\r\n <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n <span>Toepassen</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n </div>\r\n);\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { ViewerGridMode } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n title?: string;\r\n mode: ViewerGridMode;\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n onApply: (mouseEvent: MouseEvent) => void;\r\n onCancel: (event: MouseEvent \| Event) => void;\r\n dsoCloseFilterpanel: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n title,\r\n mode,\r\n ref,\r\n onApply,\r\n onCancel,\r\n dsoCloseFilterpanel,\r\n}) => (\r\n <dialog\r\n id=\"filterpanel\"\r\n class={clsx(`filterpanel-${mode}`, \"filterpanel\")}\r\n ref={ref}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n if (mode === \"vrk\") {\r\n onCancel(e);\r\n } else {\r\n dsoCloseFilterpanel(e);\r\n }\r\n }}\r\n >\r\n {mode === \"vrk\" ? (\r\n <>\r\n <h1>Uw keuzes</h1>\r\n <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n <slot name=\"filterpanel\" />\r\n <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n </>\r\n ) : (\r\n <>\r\n {title && <h3>{title}</h3>}\r\n <button type=\"button\" class=\"dso-close\" onClick={dsoCloseFilterpanel}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n <slot name=\"filterpanel\" />\r\n </>\r\n )}\r\n </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n mode: ViewerGridMode;\r\n tabView: boolean;\r\n mainSize: ViewerGridPanelSize;\r\n documentPanelOpen: boolean;\r\n mainPanelExpanded: boolean;\r\n mainPanelHidden: boolean;\r\n shrinkMain: () => void;\r\n expandMain: () => void;\r\n toggleMainPanel: () => void;\r\n dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n mode,\r\n tabView,\r\n mainSize,\r\n documentPanelOpen,\r\n mainPanelExpanded,\r\n mainPanelHidden,\r\n shrinkMain,\r\n expandMain,\r\n toggleMainPanel,\r\n dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class={clsx(\"dso-main-panel\", {\r\n compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n contracted: !tabView && !documentPanelOpen && !mainPanelExpanded && mode === \"vdk\",\r\n expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n collapsed: mainPanelHidden,\r\n })}\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n }\r\n }}\r\n >\r\n {!tabView &&\r\n ((mode === \"vrk\" && (\r\n <SizingButtons\r\n panelLabel=\"Hoofdpaneel\"\r\n size={mainSize}\r\n expand={expandMain}\r\n shrink={shrinkMain}\r\n placement=\"left\"\r\n />\r\n )) \|\|\r\n (mode === \"vdk\" && documentPanelOpen && (\r\n <div class=\"toggle-button\">\r\n <button type=\"button\" onClick={toggleMainPanel}>\r\n <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n </button>\r\n </div>\r\n )))}\r\n <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n dsoCloseOverlay: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n <dialog\r\n class=\"overlay\"\r\n ref={ref}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n dsoCloseOverlay(e);\r\n }}\r\n >\r\n <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n <slot name=\"overlay\" />\r\n </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n .overlay {\r\n block-size: calc(100% - units.$u4);\r\n margin-block: units.$u2;\r\n margin-inline: auto units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n @include button.tertiary($modifiers: false);\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.overlay-close-button {\r\n position: absolute;\r\n inset-block-start: units.$u1;\r\n inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n .content {\r\n block-size: 100%;\r\n padding-block: 0;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n }\r\n}\r\n\r\n.dso-main-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n &.compact,\r\n &.expanded {\r\n &.collapsed {\r\n inset-inline-start: -432px;\r\n }\r\n }\r\n\r\n &.compact,\r\n &.contracted {\r\n flex-shrink: unset;\r\n flex-grow: unset;\r\n position: absolute;\r\n transition: none;\r\n }\r\n\r\n &.expanded.collapsed {\r\n position: absolute;\r\n block-size: 100%;\r\n }\r\n\r\n .dso-filterblok-address {\r\n font-weight: bold;\r\n margin-block: units.$u1;\r\n margin-inline: 0;\r\n }\r\n\r\n .sizing-buttons,\r\n .toggle-button {\r\n inset-inline-start: calc(100% + 1px);\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: 0 units.$u1 * 0.5;\r\n\r\n button {\r\n border-end-end-radius: 4px;\r\n border-start-end-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n:host[mode=\"vdk\"] {\r\n .dso-main-panel {\r\n transition:\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n margin-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n }\r\n}\r\n\r\n.dso-document-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n .sizing-buttons {\r\n inset-block-start: auto;\r\n inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inset-inline-end: calc(100% + 1px);\r\n transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: units.$u1 * 0.5 0;\r\n\r\n button {\r\n border-end-start-radius: 4px;\r\n border-start-start-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n overflow-x: hidden;\r\n position: absolute;\r\n inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n flex: 0 0 100%;\r\n block-size: core-viewer-grid-variables.$resize-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-viewer-grid-variables.$resize-button-size;\r\n }\r\n\r\n &:hover {\r\n dso-icon {\r\n color: colors.$wit;\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n outline-offset: -1px;\r\n }\r\n }\r\n}\r\n\r\n.map {\r\n block-size: 100%;\r\n inline-size: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n background-color: colors.$wit;\r\n border: 0;\r\n block-size: 100%;\r\n margin-block: 0;\r\n max-block-size: 100vh;\r\n overflow-y: auto;\r\n z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n padding-block: units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-inline-start: 0;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$filterpanel-inline-size) {\r\n inline-size: 100vw;\r\n\r\n &::before {\r\n display: none !important;\r\n }\r\n }\r\n\r\n h1 {\r\n @include heading.base();\r\n @include heading.margin-large();\r\n @include heading.h1();\r\n }\r\n}\r\n\r\n.filterpanel-vdk {\r\n display: block;\r\n position: fixed;\r\n inset-block-start: 0;\r\n inset-inline-start: calc(core-viewer-grid-variables.$filterpanel-vdk-max-inline-size * -1);\r\n block-size: 100%;\r\n inline-size: 100%;\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n\r\n @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n max-inline-size: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n }\r\n\r\n &[open] {\r\n inset-inline-start: 0;\r\n box-shadow: none;\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filterpanel-vdk-border-color;\r\n }\r\n\r\n h3 {\r\n color: colors.$bosgroen;\r\n }\r\n\r\n .dso-close {\r\n @include button.element();\r\n\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n\r\n block-size: units.$u4;\r\n inline-size: units.$u4;\r\n\r\n padding: 0;\r\n\r\n background-color: transparent;\r\n\r\n border: 0;\r\n text-align: center;\r\n }\r\n}\r\n\r\n.overlay {\r\n padding-block: units.$u5 units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-inline-end: 0;\r\n inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n &::backdrop {\r\n background-color: rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n inline-size: 100vw;\r\n }\r\n}\r\n\r\n.filterpanel-buttons {\r\n text-align: end;\r\n\r\n .cancel-button {\r\n @include button.secondary($modifiers: false);\r\n @include button.small();\r\n }\r\n\r\n .apply-button {\r\n @include button.primary($modifiers: false);\r\n @include button.small();\r\n }\r\n\r\n .cancel-button + .apply-button {\r\n margin-inline-start: units.$u2;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n :host([main-size=\"small\"]) .dso-main-panel,\r\n :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$small;\r\n min-inline-size: 0;\r\n max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: 0;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"medium\"]) .dso-main-panel,\r\n :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$medium;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"large\"]) .dso-main-panel,\r\n :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$large;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host {\r\n display: flex;\r\n block-size: 100vh;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .dso-main-panel.compact,\r\n .dso-main-panel.expanded {\r\n flex-basis: unset;\r\n min-inline-size: unset;\r\n max-inline-size: unset;\r\n inline-size: 440px;\r\n }\r\n }\r\n\r\n .dso-main-panel,\r\n .dso-document-panel {\r\n box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n .content {\r\n overflow-y: auto;\r\n }\r\n }\r\n\r\n .filterpanel {\r\n margin-inline: 0 auto;\r\n inline-size: calc(100vw - 40px);\r\n\r\n &[open] {\r\n box-shadow: 2px 0 5px colors.$grijs-60;\r\n }\r\n\r\n &.filterpanel-vrk {\r\n max-inline-size: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: fixed;\r\n inset-block-start: 0;\r\n inset-block-end: 0;\r\n inset-inline-end: 0;\r\n inset-inline-start: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n\r\n @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-inline-size + 40px}) {\r\n inset-inline-start: auto;\r\n inline-size: 40px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .filterpanel-vdk[open] {\r\n box-shadow: none;\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filterpanel-vdk-border-color;\r\n }\r\n\r\n .overlay {\r\n box-shadow: -2px 0 5px colors.$grijs-60;\r\n margin-inline: auto 0;\r\n }\r\n\r\n @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n :host([filterpanel-open][mode=\"vdk\"]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filterpanel-vdk-max-inline-size});\r\n }\r\n }\r\n\r\n .filterpanel-vdk {\r\n inline-size: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n inset-inline-start: -(core-viewer-grid-variables.$filterpanel-vdk-max-inline-size);\r\n }\r\n }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n @include navbar.root();\r\n\r\n .dso-navbar {\r\n padding-inline: units.$u2;\r\n }\r\n\r\n .dso-nav {\r\n @include navbar.nav-border();\r\n\r\n display: flex;\r\n gap: units.$u2;\r\n margin-block-start: 0;\r\n inline-size: calc(100vw - units.$u4);\r\n }\r\n\r\n .dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n font-weight: 300;\r\n }\r\n }\r\n\r\n .filterpanel,\r\n .overlay {\r\n margin-inline: 0;\r\n max-inline-size: 100vw;\r\n inset-block-start: 0;\r\n inline-size: 100vw;\r\n }\r\n\r\n .filterpanel-vdk {\r\n inline-size: 100vw;\r\n inset-inline-start: -100vw;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n :host([filterpanel-open][mode=\"vdk\"]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, Filterpanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n ViewerGridPanelSize,\r\n ViewerGridVdkTab,\r\n ViewerGridVrkTab,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n ViewerGridChangeSizeEvent,\r\n ViewerGridCloseOverlayEvent,\r\n ViewerGridFilterpanelApplyEvent,\r\n ViewerGridFilterpanelCancelEvent,\r\n ViewerGridMainExpandEvent,\r\n ViewerGridMainToggleEvent,\r\n ViewerGridActiveTabSwitchEvent,\r\n ViewerGridMode,\r\n viewerGridTabLabelMap,\r\n viewerGridVdkTabs,\r\n viewerGridVrkTabs,\r\n ViewerGridTab,\r\n ViewerGridCloseFilterpanelEvent,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n const shadowRoot = entry?.target.getRootNode();\r\n if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n shadowRoot.host._checkMainPanelVisibility();\r\n }\r\n }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/*\r\n @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\r\n /\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n private mapElement?: HTMLDivElement;\r\n\r\n /\r\n VRK or VDK implementation.\r\n /\r\n @Prop({ reflect: true })\r\n mode: ViewerGridMode = \"vrk\";\r\n\r\n /\r\n VDK only. The title of the Filterpanel\r\n /\r\n @Prop({ reflect: true })\r\n filterpanelTitle?: string;\r\n\r\n /\r\n Set to true when filterpanel should show.\r\n /\r\n @Prop({ reflect: true })\r\n filterpanelOpen = false;\r\n\r\n /\r\n Set to true when overlay should show.\r\n /\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /\r\n VDK only. Set to true when document panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelOpen = false;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set active tab in tab view.\r\n /\r\n @Prop()\r\n activeTab?: ViewerGridVdkTab \| ViewerGridVrkTab;\r\n\r\n /\r\n VDK only. Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n VDK only. Set to show main panel expanded.\r\n /\r\n @Prop()\r\n mainPanelExpanded = false;\r\n\r\n /\r\n VDK only. Set to hide the main panel.\r\n /\r\n @Prop()\r\n mainPanelHidden = false;\r\n\r\n /\r\n Emitted when user wants to close the overlay.\r\n /\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n /\r\n VDK only. Emitted when user wants to close the filterpanel.\r\n /\r\n @Event()\r\n dsoCloseFilterpanel!: EventEmitter<ViewerGridCloseFilterpanelEvent>;\r\n /\r\n Emitted when user cancels filterpanel.\r\n /\r\n @Event()\r\n dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n /\r\n Emitted when user applies filterpanel options.\r\n /\r\n @Event()\r\n dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n /\r\n Emitted when user applies filterpanel options.\r\n /\r\n @Event()\r\n dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n /\r\n Emitted on interaction with sizing buttons.\r\n /\r\n @Event()\r\n dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n VDK only. Emitted on interaction with sizing buttons.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /\r\n VDK only. Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n VDK only. Emitted when the user wants to expand the main panel.\r\n /\r\n @Event()\r\n dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n /\r\n VDK only. Emitted when the user toggles the visibility of the main panel.\r\n \r\n Also emitted by scripting when the panels do not fit anymore.\r\n /\r\n @Event()\r\n dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n @State()\r\n tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n private filterpanel: HTMLDialogElement \| undefined;\r\n\r\n private get filterpanelSlot() {\r\n return this.host.querySelector(\"[slot='filterpanel']\");\r\n }\r\n\r\n private get overlaySlot() {\r\n return this.host.querySelector(\"[slot='overlay']\");\r\n }\r\n\r\n private overlay: HTMLDialogElement \| undefined;\r\n\r\n @Watch(\"documentPanelOpen\")\r\n documentPanelOpenWatcher(open: boolean) {\r\n if (open) {\r\n this._checkMainPanelVisibility();\r\n }\r\n }\r\n\r\n @Watch(\"filterpanelOpen\")\r\n filterpanelOpenWatcher(open: boolean) {\r\n if (!this.filterpanelSlot) {\r\n console.warn(\"slot 'filterpanel' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.showFilterpanel(this.mode);\r\n } else {\r\n this.filterpanel?.close();\r\n }\r\n }\r\n\r\n @Watch(\"overlayOpen\")\r\n overlayOpenWatcher(open: boolean) {\r\n if (!this.overlaySlot) {\r\n console.warn(\"slot 'overlay' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.overlay?.showModal();\r\n } else {\r\n this.overlay?.close();\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _checkMainPanelVisibility() {\r\n if (\r\n this.mode === \"vdk\" &&\r\n this.documentPanelOpen &&\r\n !this.mainPanelHidden &&\r\n this.mapElement instanceof HTMLDivElement &&\r\n ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) \|\|\r\n (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n ) {\r\n this.dsoMainPanelToggle.emit({\r\n hide: true,\r\n });\r\n }\r\n }\r\n\r\n private switchActiveTab = (tab: ViewerGridTab) => {\r\n this.dsoActiveTabSwitch.emit({\r\n tab,\r\n });\r\n };\r\n\r\n private emitShrinkMain = () => {\r\n this.dsoMainSizeChange.emit({\r\n currentSize: this.mainSize,\r\n nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private emitExpandMain = () => {\r\n this.dsoMainSizeChange.emit({\r\n currentSize: this.mainSize,\r\n nextSize: this.mainSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private shrinkDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private expandDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private toggleMainPanel = () => {\r\n if (\r\n this.mapElement instanceof HTMLDivElement &&\r\n this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n ) {\r\n this.mainSize = \"small\";\r\n }\r\n\r\n this.dsoMainPanelToggle.emit({\r\n hide: !this.mainPanelHidden,\r\n });\r\n };\r\n\r\n private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n private handleFilterpanelApply = (mouseEvent: MouseEvent \| Event) => {\r\n this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n };\r\n\r\n private handleFilterpanelCancel = (mouseEvent: MouseEvent \| Event) => {\r\n this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n };\r\n\r\n private showFilterpanel = (mode: ViewerGridMode) => {\r\n if (mode === \"vdk\") {\r\n // 'vdk' mode displays the filterpanel modelessly, i.e. still allowing interaction with content outside it.\r\n this.filterpanel?.show();\r\n } else {\r\n // 'vrk' mode displays the filterpanel as a modal; interaction outside the dialog is blocked and the content\r\n // outside it is rendered inert\r\n this.filterpanel?.showModal();\r\n }\r\n };\r\n\r\n connectedCallback() {\r\n window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterpanelOpen && this.filterpanelSlot) {\r\n this.showFilterpanel(this.mode);\r\n }\r\n\r\n if (this.overlayOpen && this.overlaySlot) {\r\n this.overlay?.showModal();\r\n }\r\n\r\n if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.mapElement);\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n if (this.mode === \"vdk\" && this.mapElement) {\r\n resizeObserver.unobserve(this.mapElement);\r\n }\r\n }\r\n\r\n render() {\r\n const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n return (\r\n <>\r\n {this.tabView && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {tabLabels.map((tab) => (\r\n <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n {viewerGridTabLabelMap[tab]}\r\n </button>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && (this.activeTab === \"main\" \|\| this.activeTab === \"search\"))) && (\r\n <MainPanel\r\n mode={this.mode}\r\n tabView={this.tabView}\r\n mainSize={this.mainSize}\r\n documentPanelOpen={this.documentPanelOpen}\r\n mainPanelExpanded={this.mainPanelExpanded}\r\n mainPanelHidden={this.mainPanelHidden}\r\n shrinkMain={this.emitShrinkMain}\r\n expandMain={this.emitExpandMain}\r\n toggleMainPanel={this.toggleMainPanel}\r\n dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n ></MainPanel>\r\n )}\r\n {(!this.tabView \|\|\r\n (this.tabView && ((this.activeTab === \"main\" && this.mode === \"vrk\") \|\| this.activeTab === \"search\"))) && (\r\n <Filterpanel\r\n title={this.filterpanelTitle}\r\n mode={this.mode}\r\n ref={(element) => (this.filterpanel = element)}\r\n onApply={this.handleFilterpanelApply}\r\n onCancel={this.handleFilterpanelCancel}\r\n dsoCloseFilterpanel={(e) => this.dsoCloseFilterpanel.emit({ originalEvent: e })}\r\n ></Filterpanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"map\")) && (\r\n <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n <slot name=\"map\" />\r\n </div>\r\n )}\r\n {((!this.tabView && this.documentPanelOpen) \|\| (this.tabView && this.activeTab === \"document\")) && (\r\n <DocumentPanel\r\n tabView={this.tabView}\r\n panelSize={this.documentPanelSize}\r\n shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n expandDocumentPanel={this.expandDocumentPanel}\r\n dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n ></DocumentPanel>\r\n )}\r\n <Overlay\r\n ref={(element) => (this.overlay = element)}\r\n dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n ></Overlay>\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["viewerGridVrkTabs","viewerGridVdkTabs","viewerGridTabLabelMap","main","map","document","search","viewerGridSizeLabelMap","small","medium","large","SizingButton","className","onClick","label","icon","h","type","class","SizingButtons","shrink","expand","size","panelLabel","placement","buttons","push","toLocaleLowerCase","DocumentPanel","tabView","panelSize","shrinkDocumentPanel","expandDocumentPanel","dsoDocumentPanelSizeChangeAnimationEnd","onTransitionEnd","e","propertyName","emit","currentSize","name","ViewerGridFilterpanelButtons","onApply","onCancel","Filterpanel","title","mode","ref","dsoCloseFilterpanel","id","clsx","preventDefault","Fragment","MainPanel","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","toggleMainPanel","dsoMainSizeChangeAnimationEnd","compact","contracted","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","resizeObserver","ResizeObserver","debounce","entry","shadowRoot","target","getRootNode","ShadowRoot","isDsoViewerGridComponent","host","_checkMainPanelVisibility","element","tagName","buttonWidth","tabViewBreakpoint","minMapElementWidth","ViewerGrid","constructor","hostRef","this","mediaCondition","filterpanelOpen","overlayOpen","documentPanelSize","window","innerWidth","switchActiveTab","tab","dsoActiveTabSwitch","emitShrinkMain","dsoMainSizeChange","nextSize","emitExpandMain","dsoDocumentPanelSizeChange","mapElement","HTMLDivElement","clientWidth","dsoMainPanelToggle","hide","changeListener","largeScreen","matches","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","showFilterpanel","_a","filterpanel","show","_b","showModal","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","key","activeTab","filterpanelTitle"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n currentSize: ViewerGridPanelSize;\r\n nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterpanelEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n originalEvent: MouseEvent \| Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" \| \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" \| \"medium\" \| \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab \| ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n main: \"Hoofdpaneel\",\r\n map: \"Kaart\",\r\n document: \"Document\",\r\n search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n className: string;\r\n onClick: any;\r\n label: string;\r\n icon: \"chevron-left\" \| \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n <button type=\"button\" class={className} onClick={onClick}>\r\n <span class=\"sr-only\">{label}</span>\r\n <dso-icon icon={icon}></dso-icon>\r\n </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n panelLabel: string;\r\n size: ViewerGridPanelSize;\r\n expand: () => void;\r\n shrink: () => void;\r\n placement: \"left\" \| \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n shrink,\r\n expand,\r\n size,\r\n panelLabel,\r\n placement,\r\n}) => {\r\n const buttons = [];\r\n\r\n if (size !== \"small\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={shrink}\r\n label={`${panelLabel} smaller maken`}\r\n icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n className=\"shrink\"\r\n />,\r\n );\r\n }\r\n\r\n if (size !== \"large\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={expand}\r\n label={`${panelLabel} breder maken`}\r\n icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n className=\"expand\"\r\n />,\r\n );\r\n }\r\n\r\n return (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n </span>\r\n {buttons}\r\n </div>\r\n );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n tabView: boolean;\r\n panelSize: ViewerGridPanelSize;\r\n shrinkDocumentPanel: () => void;\r\n expandDocumentPanel: () => void;\r\n dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n tabView,\r\n panelSize,\r\n shrinkDocumentPanel,\r\n expandDocumentPanel,\r\n dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class=\"dso-document-panel\"\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n }\r\n }}\r\n >\r\n {!tabView && (\r\n <SizingButtons\r\n panelLabel=\"Documentpaneel\"\r\n size={panelSize}\r\n expand={expandDocumentPanel}\r\n shrink={shrinkDocumentPanel}\r\n placement=\"right\"\r\n />\r\n )}\r\n <div class=\"content\">\r\n <slot name=\"document-panel\" />\r\n </div>\r\n </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n onApply: (mouseEvent: MouseEvent) => void;\r\n onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n onApply,\r\n onCancel,\r\n}) => (\r\n <div class=\"filterpanel-buttons\">\r\n <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n <span>Annuleren</span>\r\n </button>\r\n <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n <span>Toepassen</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n </div>\r\n);\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { ViewerGridMode } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n title?: string;\r\n mode: ViewerGridMode;\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n onApply: (mouseEvent: MouseEvent) => void;\r\n onCancel: (event: MouseEvent \| Event) => void;\r\n dsoCloseFilterpanel: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n title,\r\n mode,\r\n ref,\r\n onApply,\r\n onCancel,\r\n dsoCloseFilterpanel,\r\n}) => (\r\n <dialog\r\n id=\"filterpanel\"\r\n class={clsx(`filterpanel-${mode}`, \"filterpanel\")}\r\n ref={ref}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n if (mode === \"vrk\") {\r\n onCancel(e);\r\n } else {\r\n dsoCloseFilterpanel(e);\r\n }\r\n }}\r\n >\r\n {mode === \"vrk\" ? (\r\n <>\r\n <h1>Uw keuzes</h1>\r\n <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n <slot name=\"filterpanel\" />\r\n <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n </>\r\n ) : (\r\n <>\r\n {title && <h3>{title}</h3>}\r\n <button type=\"button\" class=\"dso-close\" onClick={dsoCloseFilterpanel}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n <slot name=\"filterpanel\" />\r\n </>\r\n )}\r\n </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n mode: ViewerGridMode;\r\n tabView: boolean;\r\n mainSize: ViewerGridPanelSize;\r\n documentPanelOpen: boolean;\r\n mainPanelExpanded: boolean;\r\n mainPanelHidden: boolean;\r\n shrinkMain: () => void;\r\n expandMain: () => void;\r\n toggleMainPanel: () => void;\r\n dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n mode,\r\n tabView,\r\n mainSize,\r\n documentPanelOpen,\r\n mainPanelExpanded,\r\n mainPanelHidden,\r\n shrinkMain,\r\n expandMain,\r\n toggleMainPanel,\r\n dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class={clsx(\"dso-main-panel\", {\r\n compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n contracted: !tabView && !documentPanelOpen && !mainPanelExpanded && mode === \"vdk\",\r\n expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n collapsed: mainPanelHidden,\r\n })}\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n }\r\n }}\r\n >\r\n {!tabView &&\r\n ((mode === \"vrk\" && (\r\n <SizingButtons\r\n panelLabel=\"Hoofdpaneel\"\r\n size={mainSize}\r\n expand={expandMain}\r\n shrink={shrinkMain}\r\n placement=\"left\"\r\n />\r\n )) \|\|\r\n (mode === \"vdk\" && documentPanelOpen && (\r\n <div class=\"toggle-button\">\r\n <button type=\"button\" onClick={toggleMainPanel}>\r\n <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n </button>\r\n </div>\r\n )))}\r\n <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n dsoCloseOverlay: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n <dialog\r\n class=\"overlay\"\r\n ref={ref}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n dsoCloseOverlay(e);\r\n }}\r\n >\r\n <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n <slot name=\"overlay\" />\r\n </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n .overlay {\r\n block-size: calc(100% - units.$u4);\r\n margin-block: units.$u2;\r\n margin-inline: auto units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n @include button.tertiary($modifiers: false);\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.overlay-close-button {\r\n position: absolute;\r\n inset-block-start: units.$u1;\r\n inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n .content {\r\n block-size: 100%;\r\n padding-block: 0;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n }\r\n}\r\n\r\n.dso-main-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n &.compact,\r\n &.expanded {\r\n &.collapsed {\r\n inset-inline-start: -432px;\r\n }\r\n }\r\n\r\n &.compact,\r\n &.contracted {\r\n flex-shrink: unset;\r\n flex-grow: unset;\r\n position: absolute;\r\n transition: none;\r\n }\r\n\r\n &.expanded.collapsed {\r\n position: absolute;\r\n block-size: 100%;\r\n }\r\n\r\n .dso-filterblok-address {\r\n font-weight: bold;\r\n margin-block: units.$u1;\r\n margin-inline: 0;\r\n }\r\n\r\n .sizing-buttons,\r\n .toggle-button {\r\n inset-inline-start: calc(100% + 1px);\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: 0 units.$u1 * 0.5;\r\n\r\n button {\r\n border-end-end-radius: 4px;\r\n border-start-end-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n:host[mode=\"vdk\"] {\r\n .dso-main-panel {\r\n transition:\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n margin-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n }\r\n}\r\n\r\n.dso-document-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n .sizing-buttons {\r\n inset-block-start: auto;\r\n inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inset-inline-end: calc(100% + 1px);\r\n transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: units.$u1 * 0.5 0;\r\n\r\n button {\r\n border-end-start-radius: 4px;\r\n border-start-start-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n overflow-x: hidden;\r\n position: absolute;\r\n inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n flex: 0 0 100%;\r\n block-size: core-viewer-grid-variables.$resize-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-viewer-grid-variables.$resize-button-size;\r\n }\r\n\r\n &:hover {\r\n dso-icon {\r\n color: colors.$wit;\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n outline-offset: -1px;\r\n }\r\n }\r\n}\r\n\r\n.map {\r\n block-size: 100%;\r\n inline-size: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n background-color: colors.$wit;\r\n border: 0;\r\n block-size: 100%;\r\n margin-block: 0;\r\n max-block-size: 100vh;\r\n overflow-y: auto;\r\n z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n padding-block: units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-inline-start: 0;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$filterpanel-inline-size) {\r\n inline-size: 100vw;\r\n\r\n &::before {\r\n display: none !important;\r\n }\r\n }\r\n\r\n h1 {\r\n @include heading.base();\r\n @include heading.margin-large();\r\n @include heading.h1();\r\n }\r\n}\r\n\r\n.filterpanel-vdk {\r\n display: block;\r\n position: fixed;\r\n inset-block-start: 0;\r\n inset-inline-start: calc(core-viewer-grid-variables.$filterpanel-vdk-max-inline-size * -1);\r\n block-size: 100%;\r\n inline-size: 100%;\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n\r\n @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n max-inline-size: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n }\r\n\r\n &[open] {\r\n inset-inline-start: 0;\r\n box-shadow: none;\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filterpanel-vdk-border-color;\r\n }\r\n\r\n h3 {\r\n color: colors.$bosgroen;\r\n }\r\n\r\n .dso-close {\r\n @include button.element();\r\n\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n\r\n block-size: units.$u4;\r\n inline-size: units.$u4;\r\n\r\n padding: 0;\r\n\r\n background-color: transparent;\r\n\r\n border: 0;\r\n text-align: center;\r\n }\r\n}\r\n\r\n.overlay {\r\n padding-block: units.$u5 units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-inline-end: 0;\r\n inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n &::backdrop {\r\n background-color: rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n inline-size: 100vw;\r\n }\r\n}\r\n\r\n.filterpanel-buttons {\r\n text-align: end;\r\n\r\n .cancel-button {\r\n @include button.secondary($modifiers: false);\r\n @include button.small();\r\n }\r\n\r\n .apply-button {\r\n @include button.primary($modifiers: false);\r\n @include button.small();\r\n }\r\n\r\n .cancel-button + .apply-button {\r\n margin-inline-start: units.$u2;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n :host([main-size=\"small\"]) .dso-main-panel,\r\n :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$small;\r\n min-inline-size: 0;\r\n max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: 0;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"medium\"]) .dso-main-panel,\r\n :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$medium;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"large\"]) .dso-main-panel,\r\n :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$large;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n flex-basis: 100vw;\r\n max-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host {\r\n display: flex;\r\n block-size: 100vh;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .dso-main-panel.compact,\r\n .dso-main-panel.expanded {\r\n flex-basis: unset;\r\n min-inline-size: unset;\r\n max-inline-size: unset;\r\n inline-size: 440px;\r\n }\r\n }\r\n\r\n .dso-main-panel,\r\n .dso-document-panel {\r\n box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n .content {\r\n overflow-y: auto;\r\n }\r\n }\r\n\r\n .filterpanel {\r\n margin-inline: 0 auto;\r\n inline-size: calc(100vw - 40px);\r\n\r\n &[open] {\r\n box-shadow: 2px 0 5px colors.$grijs-60;\r\n }\r\n\r\n &.filterpanel-vrk {\r\n max-inline-size: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: fixed;\r\n inset-block-start: 0;\r\n inset-block-end: 0;\r\n inset-inline-end: 0;\r\n inset-inline-start: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n\r\n @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-inline-size + 40px}) {\r\n inset-inline-start: auto;\r\n inline-size: 40px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .filterpanel-vdk[open] {\r\n box-shadow: none;\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filterpanel-vdk-border-color;\r\n }\r\n\r\n .overlay {\r\n box-shadow: -2px 0 5px colors.$grijs-60;\r\n margin-inline: auto 0;\r\n }\r\n\r\n @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n :host([filterpanel-open][mode=\"vdk\"]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filterpanel-vdk-max-inline-size});\r\n }\r\n }\r\n\r\n .filterpanel-vdk {\r\n inline-size: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n inset-inline-start: -(core-viewer-grid-variables.$filterpanel-vdk-max-inline-size);\r\n }\r\n }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n @include navbar.root();\r\n\r\n .dso-navbar {\r\n padding-inline: units.$u2;\r\n }\r\n\r\n .dso-nav {\r\n @include navbar.nav-border();\r\n\r\n display: flex;\r\n gap: units.$u2;\r\n margin-block-start: 0;\r\n inline-size: calc(100vw - units.$u4);\r\n }\r\n\r\n .dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n font-weight: 300;\r\n }\r\n }\r\n\r\n .filterpanel,\r\n .overlay {\r\n margin-inline: 0;\r\n max-inline-size: 100vw;\r\n inset-block-start: 0;\r\n inline-size: 100vw;\r\n }\r\n\r\n .filterpanel-vdk {\r\n inline-size: 100vw;\r\n inset-inline-start: -100vw;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n :host([filterpanel-open][mode=\"vdk\"]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, Filterpanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n ViewerGridPanelSize,\r\n ViewerGridVdkTab,\r\n ViewerGridVrkTab,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n ViewerGridChangeSizeEvent,\r\n ViewerGridCloseOverlayEvent,\r\n ViewerGridFilterpanelApplyEvent,\r\n ViewerGridFilterpanelCancelEvent,\r\n ViewerGridMainExpandEvent,\r\n ViewerGridMainToggleEvent,\r\n ViewerGridActiveTabSwitchEvent,\r\n ViewerGridMode,\r\n viewerGridTabLabelMap,\r\n viewerGridVdkTabs,\r\n viewerGridVrkTabs,\r\n ViewerGridTab,\r\n ViewerGridCloseFilterpanelEvent,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n const shadowRoot = entry?.target.getRootNode();\r\n if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n shadowRoot.host._checkMainPanelVisibility();\r\n }\r\n }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/*\r\n @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\r\n /\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n private mapElement?: HTMLDivElement;\r\n\r\n /\r\n VRK or VDK implementation.\r\n /\r\n @Prop({ reflect: true })\r\n mode: ViewerGridMode = \"vrk\";\r\n\r\n /\r\n VDK only. The title of the Filterpanel\r\n /\r\n @Prop({ reflect: true })\r\n filterpanelTitle?: string;\r\n\r\n /\r\n Set to true when filterpanel should show.\r\n /\r\n @Prop({ reflect: true })\r\n filterpanelOpen = false;\r\n\r\n /\r\n Set to true when overlay should show.\r\n /\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /\r\n VDK only. Set to true when document panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelOpen = false;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set active tab in tab view.\r\n /\r\n @Prop()\r\n activeTab?: ViewerGridVdkTab \| ViewerGridVrkTab;\r\n\r\n /\r\n VDK only. Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n VDK only. Set to show main panel expanded.\r\n /\r\n @Prop()\r\n mainPanelExpanded = false;\r\n\r\n /\r\n VDK only. Set to hide the main panel.\r\n /\r\n @Prop()\r\n mainPanelHidden = false;\r\n\r\n /\r\n Emitted when user wants to close the overlay.\r\n /\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n /\r\n VDK only. Emitted when user wants to close the filterpanel.\r\n /\r\n @Event()\r\n dsoCloseFilterpanel!: EventEmitter<ViewerGridCloseFilterpanelEvent>;\r\n /\r\n Emitted when user cancels filterpanel.\r\n /\r\n @Event()\r\n dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n /\r\n Emitted when user applies filterpanel options.\r\n /\r\n @Event()\r\n dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n /\r\n Emitted when user applies filterpanel options.\r\n /\r\n @Event()\r\n dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n /\r\n Emitted on interaction with sizing buttons.\r\n /\r\n @Event()\r\n dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n VDK only. Emitted on interaction with sizing buttons.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /\r\n VDK only. Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n VDK only. Emitted when the user wants to expand the main panel.\r\n /\r\n @Event()\r\n dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n /\r\n VDK only. Emitted when the user toggles the visibility of the main panel.\r\n \r\n Also emitted by scripting when the panels do not fit anymore.\r\n /\r\n @Event()\r\n dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n @State()\r\n tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n private filterpanel: HTMLDialogElement \| undefined;\r\n\r\n private get filterpanelSlot() {\r\n return this.host.querySelector(\"[slot='filterpanel']\");\r\n }\r\n\r\n private get overlaySlot() {\r\n return this.host.querySelector(\"[slot='overlay']\");\r\n }\r\n\r\n private overlay: HTMLDialogElement \| undefined;\r\n\r\n @Watch(\"documentPanelOpen\")\r\n documentPanelOpenWatcher(open: boolean) {\r\n if (open) {\r\n this._checkMainPanelVisibility();\r\n }\r\n }\r\n\r\n @Watch(\"filterpanelOpen\")\r\n filterpanelOpenWatcher(open: boolean) {\r\n if (!this.filterpanelSlot) {\r\n console.warn(\"slot 'filterpanel' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.showFilterpanel(this.mode);\r\n } else {\r\n this.filterpanel?.close();\r\n }\r\n }\r\n\r\n @Watch(\"overlayOpen\")\r\n overlayOpenWatcher(open: boolean) {\r\n if (!this.overlaySlot) {\r\n console.warn(\"slot 'overlay' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.overlay?.showModal();\r\n } else {\r\n this.overlay?.close();\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _checkMainPanelVisibility() {\r\n if (\r\n this.mode === \"vdk\" &&\r\n this.documentPanelOpen &&\r\n !this.mainPanelHidden &&\r\n this.mapElement instanceof HTMLDivElement &&\r\n ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) \|\|\r\n (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n ) {\r\n this.dsoMainPanelToggle.emit({\r\n hide: true,\r\n });\r\n }\r\n }\r\n\r\n private switchActiveTab = (tab: ViewerGridTab) => {\r\n this.dsoActiveTabSwitch.emit({\r\n tab,\r\n });\r\n };\r\n\r\n private emitShrinkMain = () => {\r\n this.dsoMainSizeChange.emit({\r\n currentSize: this.mainSize,\r\n nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private emitExpandMain = () => {\r\n this.dsoMainSizeChange.emit({\r\n currentSize: this.mainSize,\r\n nextSize: this.mainSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private shrinkDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private expandDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private toggleMainPanel = () => {\r\n if (\r\n this.mapElement instanceof HTMLDivElement &&\r\n this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n ) {\r\n this.mainSize = \"small\";\r\n }\r\n\r\n this.dsoMainPanelToggle.emit({\r\n hide: !this.mainPanelHidden,\r\n });\r\n };\r\n\r\n private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n private handleFilterpanelApply = (mouseEvent: MouseEvent \| Event) => {\r\n this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n };\r\n\r\n private handleFilterpanelCancel = (mouseEvent: MouseEvent \| Event) => {\r\n this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n };\r\n\r\n private showFilterpanel = (mode: ViewerGridMode) => {\r\n if (mode === \"vdk\") {\r\n // 'vdk' mode displays the filterpanel modelessly, i.e. still allowing interaction with content outside it.\r\n this.filterpanel?.show();\r\n } else {\r\n // 'vrk' mode displays the filterpanel as a modal; interaction outside the dialog is blocked and the content\r\n // outside it is rendered inert\r\n this.filterpanel?.showModal();\r\n }\r\n };\r\n\r\n connectedCallback() {\r\n window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterpanelOpen && this.filterpanelSlot) {\r\n this.showFilterpanel(this.mode);\r\n }\r\n\r\n if (this.overlayOpen && this.overlaySlot) {\r\n this.overlay?.showModal();\r\n }\r\n\r\n if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.mapElement);\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n if (this.mode === \"vdk\" && this.mapElement) {\r\n resizeObserver.unobserve(this.mapElement);\r\n }\r\n }\r\n\r\n render() {\r\n const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n return (\r\n <>\r\n {this.tabView && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {tabLabels.map((tab) => (\r\n <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n {viewerGridTabLabelMap[tab]}\r\n </button>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && (this.activeTab === \"main\" \|\| this.activeTab === \"search\"))) && (\r\n <MainPanel\r\n mode={this.mode}\r\n tabView={this.tabView}\r\n mainSize={this.mainSize}\r\n documentPanelOpen={this.documentPanelOpen}\r\n mainPanelExpanded={this.mainPanelExpanded}\r\n mainPanelHidden={this.mainPanelHidden}\r\n shrinkMain={this.emitShrinkMain}\r\n expandMain={this.emitExpandMain}\r\n toggleMainPanel={this.toggleMainPanel}\r\n dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n ></MainPanel>\r\n )}\r\n {(!this.tabView \|\|\r\n (this.tabView && ((this.activeTab === \"main\" && this.mode === \"vrk\") \|\| this.activeTab === \"search\"))) && (\r\n <Filterpanel\r\n title={this.filterpanelTitle}\r\n mode={this.mode}\r\n ref={(element) => (this.filterpanel = element)}\r\n onApply={this.handleFilterpanelApply}\r\n onCancel={this.handleFilterpanelCancel}\r\n dsoCloseFilterpanel={(e) => this.dsoCloseFilterpanel.emit({ originalEvent: e })}\r\n ></Filterpanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"map\")) && (\r\n <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n <slot name=\"map\" />\r\n </div>\r\n )}\r\n {((!this.tabView && this.documentPanelOpen) \|\| (this.tabView && this.activeTab === \"document\")) && (\r\n <DocumentPanel\r\n tabView={this.tabView}\r\n panelSize={this.documentPanelSize}\r\n shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n expandDocumentPanel={this.expandDocumentPanel}\r\n dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n ></DocumentPanel>\r\n )}\r\n <Overlay\r\n ref={(element) => (this.overlay = element)}\r\n dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n ></Overlay>\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-1da9f680.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as r,H as e}from"./p-BzEnSYbR.js";const a=':host{display:block;padding-block:16px;padding-inline:16px}@media screen and (min-width: 768px){:host{padding-inline-end:96px}}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))},::after,*::before{box-sizing:border-box}h2{margin-block:0 16px;color:#275937;color:#275937;font-size:1.25rem;font-weight:700}@media screen and (min-width: 480px){h2{font-size:1.5rem}}.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px - 8px)}@media screen and (min-width: 480px){.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px)}}';const i=class{constructor(r){o(this,r)}render(){return r(e,{key:"1863dac06435fbfa6422a48f8109cfefaa06dcb5"},r("h2",{key:"8b7edefe67ad62cf78e1d6b9ab02b7ed917e6766"},this.listTitle),r("div",{key:"4cdbf73a61127fe8430157012b94f6f1a45380d5",class:"dso-action-list-content"},r("slot",{key:"703e3a3abda8ca77f893bbf2fbbf747d8ea71b4a"})))}};i.style=a;export{i as dso_action_list};
2	+ //# sourceMappingURL=p-1da9f680.entry.js.map

package/dist/dso-toolkit/{p-d14079e8.entry.js.map → p-1da9f680.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["actionListCss","ActionList","render","h","Host","key","this","listTitle","class"],"sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: action-list-variables.$padding-block;\r\n padding-inline: units.$u2;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n padding-inline-end: units.$u12;\r\n }\r\n\r\n @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n margin-block: 0 units.$u2;\r\n\r\n @include heading.base();\r\n @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n padding-inline-start: action-list-variables.$content-indent;\r\n }\r\n}\r\n","import { h, Component, Host, ComponentInterface, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-action-list\",\r\n styleUrl: \"action-list.scss\",\r\n shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n /*\r\n The title.\r\n */\r\n @Prop()\r\n listTitle!: string;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <h2>{this.listTitle}</h2>\r\n <div class=\"dso-action-list-content\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAgB,~~2vC~~,MCOTC,EAAU,M,yBAOrB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAK,MAAAE,IAAA,4CAAAC,KAAKC,WACVJ,EAAK,OAAAE,IAAA,2CAAAG,MAAM,2BACTL,EAAQ,QAAAE,IAAA,8C","ignoreList":[]}
1	+ {"version":3,"names":["actionListCss","ActionList","render","h","Host","key","this","listTitle","class"],"sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: action-list-variables.$padding-block;\r\n padding-inline: units.$u2;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n padding-inline-end: units.$u12;\r\n }\r\n\r\n @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n margin-block: 0 units.$u2;\r\n\r\n @include heading.base();\r\n @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n padding-inline-start: action-list-variables.$content-indent;\r\n }\r\n}\r\n","import { h, Component, Host, ComponentInterface, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-action-list\",\r\n styleUrl: \"action-list.scss\",\r\n shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n /*\r\n The title.\r\n */\r\n @Prop()\r\n listTitle!: string;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <h2>{this.listTitle}</h2>\r\n <div class=\"dso-action-list-content\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAgB,u7C,MCOTC,EAAU,M,yBAOrB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAK,MAAAE,IAAA,4CAAAC,KAAKC,WACVJ,EAAK,OAAAE,IAAA,2CAAAG,MAAM,2BACTL,EAAQ,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/dso-toolkit/p-2f99bb30.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as r,h as a,F as e,g as i}from"./p-BzEnSYbR.js";import{A as d}from"./p-CcZz5H_k.js";import{w as t,A as n,a as s}from"./p-CXy7CeUE.js";import{A as c}from"./p-CzQFr230.js";const l='a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-anchor-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-anchor-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-anchor-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-anchor-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}},::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;word-break:break-word}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const g=class{constructor(a){o(this,a);this.dsoActiveChange=r(this,"dsoActiveChange",7);this.watcher=t(this.host)}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const o=this.watcher.hasSymbool();return a(d,{key:"004c59bc3cf2700fecabc0df774b820de13d9e06",symbol:o?a(s,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:a("dso-renvooi",{value:this.naam}),data:a(e,null,a("span",{class:"content"},this.regelKwalificatie&&a(e,null,a("dso-renvooi",{value:this.regelKwalificatie})," "),this.regelKwalificatieVoorzetsel&&`${this.regelKwalificatieVoorzetsel}: `,a(c,{values:this.locatieNoemers})),this.gewijzigdeLocatie&&a(n,null))})}get host(){return i(this)}};g.style=l;export{g as dso_annotation_activiteit};
2	+ //# sourceMappingURL=p-2f99bb30.entry.js.map

package/dist/dso-toolkit/{p-a9b89335.entry.js.map → p-2f99bb30.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["annotationCss","AnnotationActiviteit","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","value","naam","data","Fragment","class","regelKwalificatie","regelKwalificatieVoorzetsel","AnnotationListRenvooiValues","values","locatieNoemers","gewijzigdeLocatie","AnnotationGewijzigdeLocatie"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-activiteit&encapsulation=shadow","src/components/annotation/annotation-activiteit/annotation-activiteit.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n word-break: break-word;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, EventEmitter, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\n\r\n/*\r\n @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n /\r\n@Component({\r\n tag: \"dso-annotation-activiteit\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationActiviteit implements ComponentInterface {\r\n /\r\n Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de annotatie actief is.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n /\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /\r\n Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /\r\n De naam van de activiteit.\r\n /\r\n @Prop()\r\n naam?: RenvooiValue \| string;\r\n\r\n /\r\n De activiteit regel kwalificatie.\r\n /\r\n @Prop()\r\n regelKwalificatie?: RenvooiValue \| string;\r\n\r\n /\r\n De noemer van de locatie.\r\n /\r\n @Prop()\r\n locatieNoemers?: Array<RenvooiValue \| string>;\r\n\r\n /\r\n Voorzetsel van de regelKwalificatie. Exclusief dubbele punt.\r\n */\r\n @Prop()\r\n regelKwalificatieVoorzetsel?: string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationActiviteitElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={<dso-renvooi value={this.naam} />}\r\n data={\r\n <>\r\n <span class=\"content\">\r\n {this.regelKwalificatie && (\r\n <>\r\n <dso-renvooi value={this.regelKwalificatie} />{\" \"}\r\n </>\r\n )}\r\n {this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `}\r\n <AnnotationListRenvooiValues values={this.locatieNoemers} />\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n"],"mappings":"0LAAA,MAAMA,EAAgB,~~goK~~,MCiBTC,EAAoB,MALjC,WAAAC,CAAAC,G,2DAyDUC,KAAAC,QAAUA,EAAQD,KAAKE,KAoChC,CAlCC,iBAAAC,GACEH,KAAKC,QAAQG,O,CAGf,oBAAAC,GACEL,KAAKC,QAAQK,S,CAGf,MAAAC,GACE,MAAMC,EAAaR,KAAKC,QAAQO,aAEhC,OACEC,EAACC,EAAc,CAAAC,IAAA,2CACbC,OAAQJ,EAAaC,EAACI,EAAuB,MAAGC,UAChDC,OAAQf,KAAKe,OACbC,gBAAiBhB,KAAKgB,gBACtBC,MAAOR,EAAa,eAAAS,MAAOlB,KAAKmB,OAChCC,KACEX,EAAAY,EAAA,KACEZ,EAAM,QAAAa,MAAM,WACTtB,KAAKuB,mBACJd,EAAAY,EAAA,KACEZ,EAAA,eAAaS,MAAOlB,KAAKuB,oBAAsB,KAGlDvB,KAAKwB,6BAA+B,GAAGxB,KAAKwB,gCAC7Cf,EAACgB,EAA2B,CAACC,OAAQ1B,KAAK2B,kBAE3C3B,KAAK4B,mBAAqBnB,EAACoB,EAA8B,Q","ignoreList":[]}
1	+ {"version":3,"names":["annotationCss","AnnotationActiviteit","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","value","naam","data","Fragment","class","regelKwalificatie","regelKwalificatieVoorzetsel","AnnotationListRenvooiValues","values","locatieNoemers","gewijzigdeLocatie","AnnotationGewijzigdeLocatie"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-activiteit&encapsulation=shadow","src/components/annotation/annotation-activiteit/annotation-activiteit.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n word-break: break-word;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, EventEmitter, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\n\r\n/*\r\n @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n /\r\n@Component({\r\n tag: \"dso-annotation-activiteit\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationActiviteit implements ComponentInterface {\r\n /\r\n Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de annotatie actief is.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n /\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /\r\n Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /\r\n De naam van de activiteit.\r\n /\r\n @Prop()\r\n naam?: RenvooiValue \| string;\r\n\r\n /\r\n De activiteit regel kwalificatie.\r\n /\r\n @Prop()\r\n regelKwalificatie?: RenvooiValue \| string;\r\n\r\n /\r\n De noemer van de locatie.\r\n /\r\n @Prop()\r\n locatieNoemers?: Array<RenvooiValue \| string>;\r\n\r\n /\r\n Voorzetsel van de regelKwalificatie. Exclusief dubbele punt.\r\n */\r\n @Prop()\r\n regelKwalificatieVoorzetsel?: string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationActiviteitElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={<dso-renvooi value={this.naam} />}\r\n data={\r\n <>\r\n <span class=\"content\">\r\n {this.regelKwalificatie && (\r\n <>\r\n <dso-renvooi value={this.regelKwalificatie} />{\" \"}\r\n </>\r\n )}\r\n {this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `}\r\n <AnnotationListRenvooiValues values={this.locatieNoemers} />\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n"],"mappings":"0LAAA,MAAMA,EAAgB,w/K,MCiBTC,EAAoB,MALjC,WAAAC,CAAAC,G,2DAyDUC,KAAAC,QAAUA,EAAQD,KAAKE,KAoChC,CAlCC,iBAAAC,GACEH,KAAKC,QAAQG,O,CAGf,oBAAAC,GACEL,KAAKC,QAAQK,S,CAGf,MAAAC,GACE,MAAMC,EAAaR,KAAKC,QAAQO,aAEhC,OACEC,EAACC,EAAc,CAAAC,IAAA,2CACbC,OAAQJ,EAAaC,EAACI,EAAuB,MAAGC,UAChDC,OAAQf,KAAKe,OACbC,gBAAiBhB,KAAKgB,gBACtBC,MAAOR,EAAa,eAAAS,MAAOlB,KAAKmB,OAChCC,KACEX,EAAAY,EAAA,KACEZ,EAAM,QAAAa,MAAM,WACTtB,KAAKuB,mBACJd,EAAAY,EAAA,KACEZ,EAAA,eAAaS,MAAOlB,KAAKuB,oBAAsB,KAGlDvB,KAAKwB,6BAA+B,GAAGxB,KAAKwB,gCAC7Cf,EAACgB,EAA2B,CAACC,OAAQ1B,KAAK2B,kBAE3C3B,KAAK4B,mBAAqBnB,EAACoB,EAA8B,Q","ignoreList":[]}

package/dist/dso-toolkit/p-4eefa210.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as s,h as t,F as o,f as l,g as c}from"./p-BzEnSYbR.js";import{c as a}from"./p-ChV9xqsO.js";import{c as i}from"./p-DSyv-znO.js";const d=':host{display:block;padding-block:16px;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:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0},::after,::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const n=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7)}render(){return t(o,{key:"3155979f2b9164ed98c842e27b23ee3960aaadd4"},t("slot",{key:"056134ca144d2b3ab4268d0d12cfaa94b5a46536"}),!this.fixed&&t("button",{key:"7b466d3bf9fde5780a40197c043b86e746d8326c",type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{key:"43e42fa9309144981d7bf8e96dfc7dc36a16af8d",icon:"times"}),t("span",{key:"19e315ce3c50e0b0d08607f04ac2c5cef4a114b8",class:"sr-only"},"Sluiten")))}};n.style=d;const b='.sc-dso-selectable-h{padding-inline-start:32px;position:relative;display:var(--dso-selectable-display, block)}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}.sc-dso-selectable,.sc-dso-selectable::after,.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{position:relative;inset-inline-start:-32px;padding-inline-start:32px;margin-inline-end:-32px;border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}';const r=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.infoActive=false;this.keyboardFocus=false;this.fallbackIdentifier=i("DsoSelectable");this.handleOnChange=e=>{const{target:s}=e;this.dsoChange.emit({originalEvent:e,checked:s instanceof HTMLInputElement&&s.checked});l(this.host)}}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null\|\|e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>l(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null\|\|e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)\|\|this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(o,{key:"6be928de297ac8c9e25bfee2d06c39aa3325223a"},t("div",{key:"95816f8f3bf9c78b767e722c101b3de3ebdc02c7",class:"dso-selectable-container"},t("div",{key:"e357c54e22edca90183d8d02c5ac18383214c1d3",class:a("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{key:"cf93d6a44737dc536a79c7d3234d3ac18a0fb32b",type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null\|\|e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:this.handleOnChange,onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null,t("slot",null))),s&&!this.infoFixed&&t("dso-info-button",{key:"ccca28238ea3c20c8d85964034e00b08d70b18d2",active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active})),s&&t("dso-info",{key:"e6141cd94e9c499a4b18e791793e5e1a4daa439d",id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",{key:"32872781b1a8ad9d1649e88f3725e1eadc775a4b"},t("slot",{key:"014b75f1bdf48b4f7f171bd32d6717f3a7d52a90",name:"info"}))),t("slot",{key:"9879fc525dcfcf7cac3c6cfd99c142e8fc5adb19",name:"options"}))}componentDidRender(){if(this.input&&typeof this.checked==="boolean"&&this.input.checked!==this.checked){this.input.checked=this.checked}}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return c(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};r.style=b;export{n as dso_info,r as dso_selectable};
2	+ //# sourceMappingURL=p-4eefa210.entry.js.map

package/dist/dso-toolkit/{p-044ee150.entry.js.map → p-4eefa210.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["infoCss","Info","render","h","Fragment","key","this","fixed","type","onClick","e","dsoClose","emit","icon","class","selectableCss","Selectable","constructor","hostRef","infoActive","keyboardFocus","fallbackIdentifier","createIdentifier","handleOnChange","target","dsoChange","originalEvent","checked","HTMLInputElement","forceUpdate","host","toggleInfo","active","componentDidLoad","_a","mutationObserver","disconnect","MutationObserver","observe","childList","setIndeterminate","disconnectedCallback","input","indeterminate","hasInfo","querySelector","clsx","id","getIdentifier","value","name","invalid","toString","infoFixed","describedById","undefined","labelledById","disabled","required","onChange","onBlur","onKeyUp","ref","el","htmlFor","onDsoToggle","detail","onDsoClose","componentDidRender","identifier"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n padding-inline-start: selectable.$symbol-indent;\r\n\r\n @include selectable.root(false);\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n @include selectable.invalid();\r\n }\r\n\r\n @include selectable.children(\"dso-info\");\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n\r\n &:focus-within.dso-keyboard-focus {\r\n position: relative;\r\n inset-inline-start: -(selectable.$symbol-indent);\r\n\r\n padding-inline-start: selectable.$symbol-indent;\r\n\r\n margin-inline-end: -(selectable.$symbol-indent);\r\n\r\n @include utilities.focus-outline();\r\n }\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n @include selectable.selectableBoxShadow(\r\n selectable.$border-width,\r\n var(--dso-selectable-color, selectable.$valid-color)\r\n );\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n ComponentInterface,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/\r\n @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n /\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["infoCss","Info","render","h","Fragment","key","this","fixed","type","onClick","e","dsoClose","emit","icon","class","selectableCss","Selectable","constructor","hostRef","infoActive","keyboardFocus","fallbackIdentifier","createIdentifier","handleOnChange","target","dsoChange","originalEvent","checked","HTMLInputElement","forceUpdate","host","toggleInfo","active","componentDidLoad","_a","mutationObserver","disconnect","MutationObserver","observe","childList","setIndeterminate","disconnectedCallback","input","indeterminate","hasInfo","querySelector","clsx","id","getIdentifier","value","name","invalid","toString","infoFixed","describedById","undefined","labelledById","disabled","required","onChange","onBlur","onKeyUp","ref","el","htmlFor","onDsoToggle","detail","onDsoClose","componentDidRender","identifier"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n padding-inline-start: selectable.$symbol-indent;\r\n\r\n @include selectable.root(false);\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n @include selectable.invalid();\r\n }\r\n\r\n @include selectable.children(\"dso-info\");\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n\r\n &:focus-within.dso-keyboard-focus {\r\n position: relative;\r\n inset-inline-start: -(selectable.$symbol-indent);\r\n\r\n padding-inline-start: selectable.$symbol-indent;\r\n\r\n margin-inline-end: -(selectable.$symbol-indent);\r\n\r\n @include utilities.focus-outline();\r\n }\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n @include selectable.selectableBoxShadow(\r\n selectable.$border-width,\r\n var(--dso-selectable-color, selectable.$valid-color)\r\n );\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n ComponentInterface,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/\r\n @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n /\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-6b6b5ed2.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as n,f as s,h as t,F as c,H as d,g as e}from"./p-BzEnSYbR.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i=',::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus-visible{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{color:#000;font-size:14px;font-weight:400}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding-block:12px;padding-inline:16px;text-align:start;inline-size:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-inline-end:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-inline-start:8px}:host .dso-section-handle>button>dso-label,:host .dso-section-handle>a>dso-label{margin-inline-start:auto;padding-inline-start:8px;word-break:normal}:host .dso-section-handle>button>dso-label+dso-icon:last-child,:host .dso-section-handle>button>dso-label+.dso-section-handle-addons:last-child,:host .dso-section-handle>a>dso-label+dso-icon:last-child,:host .dso-section-handle>a>dso-label+.dso-section-handle-addons:last-child{margin-inline-start:8px}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-block-start:0}.dso-section-body .dso-section-body-content{padding-block:20px 16px;padding-inline:16px}:host(.dso-accordion-default){border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle .dso-status{text-decoration:underline}:host(.dso-accordion-default) .dso-section-body{border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-handle .dso-status{color:#000}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-inline:16px 0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider){color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact-black) .dso-section-handle a:hover,:host(.dso-accordion-compact-black) .dso-section-handle a:active,:host(.dso-accordion-compact-black) .dso-section-handle a.active,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider):hover,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider):active,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider).active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider){color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a:hover,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a:active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a.active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider):hover,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider):active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider).active{color:#000}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle{display:flex}:host(.dso-accordion-compact-black.dso-accordion-section-activate) dso-slide-toggle{margin-block-start:11px;margin-inline:8px}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe){background-color:#e4f1d4}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) .dso-section-body{background-color:#e4f1d4}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){font-family:sans-serif}}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){background-color:#f5d8dc}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) .dso-section-body{background-color:#f5d8dc}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button{padding-inline:16px 0}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a.active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding-block:5px;padding-inline:0}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-handle dso-icon,:host(.dso-accordion-neutral) .dso-section-handle svg.di{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body[open],:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide){background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:-2px 0}:host(.dso-accordion-neutral) .dso-section-body[open].dso-animate-ready,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide).dso-animate-ready{transition-property:grid-template-rows, margin-block, border}:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:16px}@media screen and (min-width: 480px){:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:32px}}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}';const r=window["_dsoLog"]===true?console.log.bind(console.log):function(){};const l=({handleUrl:o,onClick:n,open:s,showSlideToggle:d,active:e,onActiveChange:a,handleElementRef:i},r)=>{if(o){return t(c,null,t("a",{href:o,onClick:n,"aria-expanded":s?"true":"false",ref:i},r),d&&t("dso-slide-toggle",{accessibleLabel:"Toon op kaart",checked:e,onDsoActiveChange:a}))}return t(c,null,t("button",{type:"button",onClick:n,"aria-expanded":s?"true":"false",ref:i},r),d&&t("dso-slide-toggle",{accessibleLabel:"Toon op kaart",checked:e,onDsoActiveChange:a}))};const h=({heading:o,ref:n},s)=>{switch(o){default:case"h2":return t("h2",{ref:n,class:"dso-section-handle"},s);case"h3":return t("h3",{ref:n,class:"dso-section-handle"},s);case"h4":return t("h4",{ref:n,class:"dso-section-handle"},s);case"h5":return t("h5",{ref:n,class:"dso-section-handle"},s)}};const p=({state:o,icon:n,attachmentCount:s})=>{if(o){return t(b,{state:o})}if(s){return t("dso-attachments-counter",{count:s})}if(n){return t("dso-icon",{icon:n})}};const b=({state:o})=>{if(o==="error"){return t("dso-icon",{icon:"status-error"})}if(o==="danger"){return t("dso-icon",{icon:"status-danger"})}if(o==="success"){return t("dso-icon",{icon:"status-success"})}if(o==="info"){return t("dso-icon",{icon:"status-info"})}if(o==="warning"){return t("dso-icon",{icon:"status-warning"})}};const u=class{constructor(s){o(this,s);this.dsoActiveChange=n(this,"dsoActiveChange",7);this.dsoToggleClick=n(this,"dsoToggleClick",3);this.dsoAnimationStart=n(this,"dsoAnimationStart",3);this.dsoAnimationEnd=n(this,"dsoAnimationEnd",3);this.heading="h2";this.open=false;this.hasNestedAccordion=false;this.activatable=false;this.active=false;this.hover=false;this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:Boolean(this.active),next:!this.active,originalEvent:o})};this.handleExpandableAnimationStart=o=>{this.dsoAnimationStart.emit({animation:this.open?"opening":"closing",scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})}}async focusHandle(){var o;(o=this.handleElementRef)===null\|\|o===void 0?void 0:o.focus()}get containsNestedAccordion(){return this.host.querySelector("dso-accordion")!==null}componentWillLoad(){var o;(o=this.accordion)===null\|\|o===void 0?void 0:o._getState().then((o=>{this.accordionState=o;s(this.host)}))}get isNeutral(){var o;return((o=this.accordionState)===null\|\|o===void 0?void 0:o.variant)==="neutral"}async scrollIntoView(o,n="auto"){var s,t;r(`DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(o)}, behavior: ${JSON.stringify(n)})`);const c=(s=this.sectionBody)===null\|\|s===void 0?void 0:s.getBoundingClientRect();const d=(t=this.sectionHeading)===null\|\|t===void 0?void 0:t.getBoundingClientRect();r(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(c)};`);r(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(d)};`);r(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);r(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);if(!c\|\|!d\|\|!this.accordionState){r(`DSO Toolkit [Accordion Section] returning`);return}const e=d.top+d.height+(this.open?o!==null&&o!==void 0?o:0:0);r(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(e)};`);r(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);const a=this.host.getBoundingClientRect();const i=window.scrollY\|\|document.documentElement.scrollTop\|\|document.body.scrollTop;const l=document.documentElement.clientTop\|\|document.body.clientTop\|\|0;const h=a.top+i-l;r("DSO Toolkit [Accordion Section] scroll",{box:a,scrollTop:i,clientTop:l,top:h});if(e>window.innerHeight){r(`DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(e>window.innerHeight)};`);const o=e-d.top;const s=o>window.innerHeight;r(`DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(o)};`);r(`DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(s)};`);window.scrollTo({top:s?h:h-(window.innerHeight-o),behavior:n})}else if(d.top<0){r(`DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(d.top<0)};`);window.scrollTo({top:h,behavior:n})}}get accordion(){return this.host.closest("dso-accordion")}render(){var o;const{variant:n,reverseAlign:s}=(o=this.accordionState)!==null&&o!==void 0?o:{};const e=!!this.statusDescription\|\|!!this.status\|\|!!this.icon\|\|!!this.attachmentCount;const i=this.activatable&&n==="compact-black"&&!s;return t(d,{key:"4b8933f4a7224bc4c4faeeb7952b85e0f8abc6b1",class:{"dso-accordion-section":true,["dso-accordion-"+n]:true,"dso-nested-accordion":this.hasNestedAccordion\|\|this.containsNestedAccordion,"dso-accordion-reverse-align":s!==null&&s!==void 0?s:false,["dso-accordion-wijzigactie-"+this.wijzigactie]:!!this.wijzigactie,"dso-accordion-section-activate":i},hidden:!n,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},t(h,{key:"790f4fbb2a06e78be36e714becc606771ea6422e",heading:this.heading,ref:o=>this.sectionHeading=o},t(l,{key:"9aa838b5a1f7129161f58e7a67aec6b2923ae319",handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open,showSlideToggle:i,active:this.active,onActiveChange:this.handleActiveChange,handleElementRef:o=>this.handleElementRef=o},s?t(c,null,this.icon&&t("div",{class:"dso-section-handle-addons"},t(p,{icon:this.icon})),t("dso-renvooi",{value:this.handleTitle}),this.label&&t("dso-label",{status:this.labelStatus,compact:true},this.label),t("div",{class:"dso-section-handle-addons"},this.statusDescription&&t("span",{class:"dso-status"},this.statusDescription),t("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"}))):t(c,null,t("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&t("span",{class:"sr-only"},a[this.status]),t("span",null,t("dso-renvooi",{value:this.handleTitle}),this.isNeutral&&t("dso-icon",{class:"info-icon",icon:this.open\|\|this.hover?"info-active":"info"})),this.label&&t("dso-label",{status:this.labelStatus,compact:true},this.label),e&&t("div",{class:"dso-section-handle-addons"},this.statusDescription&&t("span",{class:"dso-status"},this.statusDescription),t(p,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),t("dso-expandable",{key:"816c9ecfcfcea8ecc3c35606fd64111da5b61366",class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationStart:this.handleExpandableAnimationStart,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},t("div",{key:"54c23da5a0d25bc29fce23ba44fe7277b2b387d7",class:"dso-section-body-content",ref:o=>this.sectionBody=o},t("slot",{key:"d9f1d30c186c5f3e0613e1fded58f5ba0f6e70ca"}))))}get host(){return e(this)}};u.style=i;export{u as dso_accordion_section};
2	+ //# sourceMappingURL=p-6b6b5ed2.entry.js.map

package/dist/dso-toolkit/p-6b6b5ed2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stateMap","success","info","warning","danger","error","accordionSectionCss","log","window","console","bind","HandleElement","handleUrl","onClick","open","showSlideToggle","active","onActiveChange","handleElementRef","children","h","Fragment","href","ref","accessibleLabel","checked","onDsoActiveChange","type","Handle","heading","class","HandleIcon","state","icon","attachmentCount","HandleStateIcon","count","AccordionSection","constructor","hostRef","this","hasNestedAccordion","activatable","hover","handleClick","event","dsoToggleClick","emit","originalEvent","handleActiveChange","dsoActiveChange","current","Boolean","next","handleExpandableAnimationStart","e","dsoAnimationStart","animation","scrollIntoView","behavior","detail","bodyHeight","handleExpandableAnimationEnd","dsoAnimationEnd","focusHandle","_a","focus","containsNestedAccordion","host","querySelector","componentWillLoad","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","JSON","stringify","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","innerHeight","box","scrollTop","scrollY","document","documentElement","body","clientTop","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","key","wijzigactie","hidden","onMouseenter","onMouseleave","element","value","handleTitle","label","labelStatus","compact","enableAnimation","minimumHeight","onDsoExpandableAnimationStart","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport type AccordionSectionWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n success: \"succes:\",\r\n info: \"info:\",\r\n warning: \"waarschuwing:\",\r\n danger: \"fout:\",\r\n error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n /**\r\n * The original MouseEvent that triggered the click.\r\n *\r\n * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n */\r\n originalEvent?: MouseEvent;\r\n\r\n /**\r\n * The requested state. If the Accordion Section is closed, `open = true`.\r\n */\r\n open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationStartEvent {\r\n /**\r\n * Helper function to scroll the Accordion Section into view.\r\n */\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /**\r\n * Whether or not the Accordion opening or closing.\r\n */\r\n animation: \"opening\" | \"closing\";\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n /**\r\n * Helper function to scroll the Accordion Section into view.\r\n */\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /**\r\n * The state of the Accordion Section after animation.\r\n */\r\n open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionActiveChangeEvent {\r\n /**\r\n * De current status van de Accordion Section.\r\n */\r\n current: boolean;\r\n\r\n /**\r\n * De desired status van de Accordion Section.\r\n */\r\n next: boolean;\r\n\r\n originalEvent: Event;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n display: block;\r\n\r\n .dso-section-handle {\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n position: relative;\r\n\r\n > a:active {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n @include anchor.clean();\r\n }\r\n\r\n .dso-status {\r\n color: colors.$zwart;\r\n font-size: typography.$font-size-small;\r\n font-weight: 400;\r\n }\r\n }\r\n\r\n .dso-section-handle > button,\r\n .dso-section-handle > a {\r\n align-items: flex-start;\r\n background-color: transparent;\r\n border: 0;\r\n cursor: pointer;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n padding-block: accordion.$block-padding;\r\n padding-inline: accordion.$inline-padding;\r\n text-align: start;\r\n inline-size: 100%;\r\n word-break: break-word;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n\r\n &.dso-section-handle-chevron {\r\n @include utilities.transition(transform);\r\n\r\n transform: rotate(0);\r\n }\r\n }\r\n\r\n > .dso-section-handle-addons:first-child,\r\n > dso-icon:first-child {\r\n margin-inline-end: units.$u1;\r\n }\r\n\r\n > dso-icon:last-child {\r\n margin-inline-start: auto;\r\n }\r\n\r\n > .dso-section-handle-addons:last-child {\r\n margin-inline-start: auto;\r\n\r\n dso-attachments-counter,\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n > dso-label {\r\n margin-inline-start: auto;\r\n padding-inline-start: units.$u1;\r\n word-break: normal;\r\n\r\n & + dso-icon:last-child,\r\n & + .dso-section-handle-addons:last-child {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n .dso-section-handle {\r\n > button,\r\n > a {\r\n .dso-section-handle-chevron {\r\n &:first-child {\r\n transform: rotate(90deg);\r\n }\r\n\r\n &:last-child {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-section-body {\r\n background-color: colors.$wit;\r\n border-block-start: 0;\r\n\r\n .dso-section-body-content {\r\n padding-block: units.$u2 + accordion.$border-radius units.$u2;\r\n padding-inline: units.$u2;\r\n }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-section-activate) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-activate();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-voegtoe();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-verwijder();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n forceUpdate,\r\n Fragment,\r\n FunctionalComponent,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n AccordionHeading,\r\n AccordionSectionActiveChangeEvent,\r\n AccordionSectionAnimationEndEvent,\r\n AccordionSectionAnimationStartEvent,\r\n AccordionSectionState,\r\n AccordionSectionToggleClickEvent,\r\n AccordionSectionWijzigactie,\r\n stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { SlideToggleActiveEvent } from \"../../slide-toggle/slide-toggle.interfaces\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../../components\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n handleUrl: string | undefined;\r\n open: boolean;\r\n showSlideToggle: boolean;\r\n active: boolean;\r\n onActiveChange: (e: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => void;\r\n handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, showSlideToggle, active, onActiveChange, handleElementRef }, children) => {\r\n if (handleUrl) {\r\n return (\r\n <>\r\n <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </a>\r\n {showSlideToggle && (\r\n <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n )}\r\n </>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </button>\r\n {showSlideToggle && (\r\n <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n heading: AccordionHeading;\r\n ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n return (\r\n <h2 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h2>\r\n );\r\n case \"h3\":\r\n return (\r\n <h3 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h3>\r\n );\r\n case \"h4\":\r\n return (\r\n <h4 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h4>\r\n );\r\n case \"h5\":\r\n return (\r\n <h5 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h5>\r\n );\r\n }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n state?: AccordionSectionState;\r\n icon?: string;\r\n attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n if (state) {\r\n return <HandleStateIcon state={state} />;\r\n }\r\n\r\n if (attachmentCount) {\r\n return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n }\r\n\r\n if (icon) {\r\n return <dso-icon icon={icon}></dso-icon>;\r\n }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n if (state === \"error\") {\r\n return <dso-icon icon=\"status-error\"></dso-icon>;\r\n }\r\n\r\n if (state === \"danger\") {\r\n return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n }\r\n\r\n if (state === \"success\") {\r\n return <dso-icon icon=\"status-success\"></dso-icon>;\r\n }\r\n\r\n if (state === \"info\") {\r\n return <dso-icon icon=\"status-info\"></dso-icon>;\r\n }\r\n\r\n if (state === \"warning\") {\r\n return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n }\r\n};\r\n\r\n@Component({\r\n tag: \"dso-accordion-section\",\r\n styleUrl: \"accordion-section.scss\",\r\n shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n private accordionState?: AccordionInternalState;\r\n\r\n private sectionBody?: HTMLDivElement;\r\n\r\n private sectionHeading?: HTMLHeadingElement;\r\n\r\n @Element()\r\n host!: HTMLDsoAccordionSectionElement;\r\n\r\n /**\r\n * The title of the handle\r\n */\r\n @Prop()\r\n handleTitle!: RenvooiValue | RenvooiValue[] | undefined;\r\n\r\n /**\r\n * An optional 'wijzigactie' that signals if the section is added or removed.\r\n */\r\n @Prop()\r\n wijzigactie?: AccordionSectionWijzigactie;\r\n\r\n /**\r\n * Which heading element to use.\r\n */\r\n @Prop()\r\n heading: AccordionHeading = \"h2\";\r\n\r\n /**\r\n * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n */\r\n @Prop()\r\n handleUrl?: string;\r\n\r\n /**\r\n * `state` takes precedence over `attachmentCount` and `icon`\r\n */\r\n @Prop()\r\n status?: AccordionSectionState;\r\n\r\n /**\r\n * `attachmentCount` takes precedence over `icon`\r\n */\r\n @Prop()\r\n attachmentCount?: number;\r\n\r\n /**\r\n * To set an icon in the heading handle.\r\n */\r\n @Prop()\r\n icon?: string;\r\n\r\n /**\r\n * The status of the section.\r\n */\r\n @Prop()\r\n statusDescription?: string;\r\n\r\n /**\r\n * Set the Accordion Section open.\r\n */\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /**\r\n * Set when this Accordion Section contains or will contain an Accordion.\r\n */\r\n @Prop({ reflect: true })\r\n hasNestedAccordion = false;\r\n\r\n /**\r\n * The label to be displayed in the heading handle inside a Label (optional)\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The status of the Label in the heading handle (optional)\r\n */\r\n @Prop()\r\n labelStatus?: LabelStatus;\r\n\r\n /**\r\n * A boolean to indicate if the Accordion Section is capable of being activated. When `true` a Slide Toggle displays\r\n * on the right in the heading handle (optional). Works only for `variant` `compact-black` and `reverseAlign` false.\r\n */\r\n @Prop({ reflect: true })\r\n activatable = false;\r\n\r\n /**\r\n * A boolean to indicate if the Accordion Section is `active`. Only applicable when the Accordion Section is\r\n * `activatable`.\r\n */\r\n @Prop({ reflect: true })\r\n active = false;\r\n\r\n /**\r\n * An optional event listener for changes on the value of property `active`.\r\n */\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AccordionSectionActiveChangeEvent>;\r\n\r\n /**\r\n * Calling this method will set focus to the handle.\r\n */\r\n @Method()\r\n async focusHandle() {\r\n this.handleElementRef?.focus();\r\n }\r\n\r\n @State()\r\n hover = false;\r\n\r\n get containsNestedAccordion() {\r\n return this.host.querySelector(\"dso-accordion\") !== null;\r\n }\r\n\r\n componentWillLoad() {\r\n this.accordion?._getState().then((state) => {\r\n this.accordionState = state;\r\n\r\n forceUpdate(this.host);\r\n });\r\n }\r\n\r\n get isNeutral() {\r\n return this.accordionState?.variant === \"neutral\";\r\n }\r\n\r\n private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n log(\r\n `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n bodyHeight,\r\n )}, behavior: ${JSON.stringify(behavior)})`,\r\n );\r\n\r\n const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n log(`DSO Toolkit [Accordion Section] returning`);\r\n\r\n return;\r\n }\r\n\r\n // this y is relative to the top of the viewport.\r\n const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (bodyHeight ?? 0) : 0);\r\n\r\n log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n const box = this.host.getBoundingClientRect();\r\n\r\n const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n const top = box.top + scrollTop - clientTop;\r\n\r\n log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n if (sectionBottomY > window.innerHeight) {\r\n log(\r\n `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n sectionBottomY > window.innerHeight,\r\n )};`,\r\n );\r\n\r\n const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n log(\r\n `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n );\r\n log(\r\n `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n shouldScrollToTopOfSection,\r\n )};`,\r\n );\r\n\r\n window.scrollTo({\r\n top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n behavior,\r\n });\r\n } else if (headingClientRect.top < 0) {\r\n log(\r\n `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n );\r\n\r\n window.scrollTo({\r\n top,\r\n behavior,\r\n });\r\n }\r\n }\r\n\r\n private get accordion() {\r\n return this.host.closest(\"dso-accordion\");\r\n }\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n this.dsoToggleClick.emit({\r\n originalEvent: event,\r\n open: !this.open,\r\n });\r\n };\r\n\r\n private handleActiveChange = (event: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => {\r\n this.dsoActiveChange.emit({\r\n current: Boolean(this.active),\r\n next: !this.active,\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n this.dsoAnimationStart.emit({\r\n animation: this.open ? \"opening\" : \"closing\",\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n this.dsoAnimationEnd.emit({\r\n open: this.open,\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n /**\r\n * Emitted when the user activates the toggle button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n /**\r\n * Event emitted when the Accordion Section starts its toggle animation.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n /**\r\n * Event emitted when the Accordion Section completes its toggle animation.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n render() {\r\n const { variant, reverseAlign } = this.accordionState ?? {};\r\n const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n const showSlideToggle = this.activatable && variant === \"compact-black\" && !reverseAlign;\r\n\r\n return (\r\n <Host\r\n class={{\r\n \"dso-accordion-section\": true,\r\n [\"dso-accordion-\" + variant]: true,\r\n \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n [\"dso-accordion-wijzigactie-\" + this.wijzigactie]: !!this.wijzigactie,\r\n \"dso-accordion-section-activate\": showSlideToggle,\r\n }}\r\n hidden={!variant}\r\n onMouseenter={() => (this.hover = true)}\r\n onMouseleave={() => (this.hover = false)}\r\n >\r\n <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n <HandleElement\r\n handleUrl={this.handleUrl}\r\n onClick={this.handleClick}\r\n open={this.open}\r\n showSlideToggle={showSlideToggle}\r\n active={this.active}\r\n onActiveChange={this.handleActiveChange}\r\n handleElementRef={(e) => (this.handleElementRef = e)}\r\n >\r\n {reverseAlign ? (\r\n <Fragment>\r\n {this.icon && (\r\n <div class=\"dso-section-handle-addons\">\r\n <HandleIcon icon={this.icon} />\r\n </div>\r\n )}\r\n <dso-renvooi value={this.handleTitle} />\r\n {this.label && (\r\n <dso-label status={this.labelStatus} compact>\r\n {this.label}\r\n </dso-label>\r\n )}\r\n <div class=\"dso-section-handle-addons\">\r\n {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n </div>\r\n </Fragment>\r\n ) : (\r\n <Fragment>\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n <span>\r\n <dso-renvooi value={this.handleTitle} />\r\n {this.isNeutral && (\r\n <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n )}\r\n </span>\r\n {this.label && (\r\n <dso-label status={this.labelStatus} compact>\r\n {this.label}\r\n </dso-label>\r\n )}\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n </div>\r\n )}\r\n </Fragment>\r\n )}\r\n </HandleElement>\r\n </Handle>\r\n <dso-expandable\r\n class=\"dso-section-body\"\r\n open={this.open}\r\n enableAnimation\r\n minimumHeight={this.isNeutral ? 0 : 4}\r\n onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n >\r\n <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n <slot />\r\n </div>\r\n </dso-expandable>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}