npm - @dso-toolkit/core - Versions diffs - 56.1.0 → 57.0.0 - Mend

@dso-toolkit/core 56.1.0 → 57.0.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 (122) hide show

package/dist/dso-toolkit/{p-88f4366e.entry.js.map → p-1c295ae2.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["alertCss","Alert","render","status","statusMap","get","this","Error","h","class","clsx","role","roleAlert","undefined","icon","Map","annotationButtonCss","AnnotationButton","handleClick","e","dsoClick","emit","originalEvent","open","type","identifier","toString","onClick","badgeCss","Badge","labelCss","resizeObserver","ResizeObserver","debounce","entries","forEach","target","isDsoLabelComponent","_truncateLabel","element","tagName","hasEllipses","el","scrollWidth","clientWidth","Label","watchRemovable","removable","startMutationObserver","stopMutationObserver","watchTruncate","truncate","startTruncate","stopTruncate","keyDownListener","event","key","textHover","textFocus","async","setTimeout","isTruncated","labelContent","syncLabelText","labelText","_b","_a","host","textContent","trim","componentDidLoad","disconnectedCallback","mutationObserver","MutationObserver","observe","characterData","childList","subtree","attributes","force","disconnect","unobserve","Fragment","compact","removeHover","removeFocus","name","ref","tabindex","onMouseEnter","onMouseLeave","onFocus","onBlur","dsoRemoveClick","stateless","id","active","position","strategy","getNodeName","node","Element","localName","nodeName","includes","substring","indexOf","OzonContentAlNode","constructor","mapNodeToJsx","path","nestedAl","some","n","content","childNodes","OzonContentBronNode","OzonContentDocumentNode","OzonContentExtRefNode","href","getAttribute","rel","OzonContentFallbackNode","Bijschrift","bijschrift","bron","inhoud","OzonContentFiguurNode","setImageDimensions","imageElement","schaal","naturalHeight","naturalWidth","height","width","onImageLoad","HTMLImageElement","Array","from","titel","find","illustratieNode","bijschriftNode","illustratie","naam","breedte","hoogte","uitlijning","alt","locatie","slot","src","_c","_f","_e","_d","onLoad","Number","OzonContentInhoudNode","OzonContentInlineTekstAfbeeldingNode","OzonContentInlineNodes","Tag","OzonContentIntIoRefNode","emitAnchorClick","intRefOnClick","preventDefault","currentTarget","HTMLAnchorElement","documentComponent","OzonContentIntRefNode","OzonContentLijstNode","aanhef","sluiting","listItems","filter","map","item","itemNodes","liNummer","OzonContentNieuweTekstNode","OzonContentNootNode","handles","identify","state","openNoteId","setState","noteId","console","error","noteControlsId","nootNummer","descriptive","querySelectorAll","OzonContentOpschriftNode","mapColspecs","count","nodeList","elements","totalWidth","getTotalWidth","columns","index","colNumber","number","parseInt","getWidth","reduce","replace","colWidth","isNaN","match","Math","round","Colgroup","colspecs","length","colspec","style","getData","cell","moreRows","nameStart","nameEnd","getColspan","colspecStart","c","colspecEnd","colspan","Cell","context","td","rowSpan","colSpan","Object","assign","Rows","rows","row","children","mapData","tgroup","querySelector","colAttribute","columnCount","caption","headRows","bodyRows","editAction","OzonContentTableNode","uuidv4","OzonContentTextNode","OzonContentVerwijderdeTekstNode","Mapper","mappers","skip","t","m","push","fallbackNode","domParser","DOMParser","findMapper","isArray","NodeList","mapper","identity","call","s","transform","xml","cache","document","parseFromString","xmlDocument","getRootNode","ozonContentCss","OzonContent","handleHostOnClick","interactive","doIt","composedPath","eventTarget","HTMLElement","isTabbable","dsoAnchorClick","transformed","deleted","Host"],"sources":["./src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","./src/components/alert/alert.tsx","./src/components/annotation-button/annotation-button.scss?tag=dso-annotation-button","./src/components/annotation-button/annotation-button.tsx","./src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","./src/components/badge/badge.tsx","./src/components/label/label.scss?tag=dso-label&encapsulation=shadow","./src/components/label/label.tsx","./src/components/ozon-content/get-node-name.function.ts","./src/components/ozon-content/nodes/al.node.tsx","./src/components/ozon-content/nodes/bron.node.tsx","./src/components/ozon-content/nodes/document.node.tsx","./src/components/ozon-content/nodes/ext-ref.node.tsx","./src/components/ozon-content/nodes/fallback.node.tsx","./src/components/ozon-content/nodes/figuur.node.tsx","./src/components/ozon-content/nodes/inhoud.node.tsx","./src/components/ozon-content/nodes/inline-tekst-afbeelding.node.tsx","./src/components/ozon-content/nodes/inline.nodes.tsx","./src/components/ozon-content/nodes/int-io-ref.node.tsx","./src/components/ozon-content/nodes/int-ref.node.tsx","./src/components/ozon-content/nodes/lijst.node.tsx","./src/components/ozon-content/nodes/nieuwe-tekst.node.tsx","./src/components/ozon-content/nodes/noot.node.tsx","./src/components/ozon-content/nodes/opschrift.node.tsx","./src/components/ozon-content/nodes/table.node/colspec/colspec-mapper.ts","./src/components/ozon-content/nodes/table.node/table-colgroup.tsx","./src/components/ozon-content/nodes/table.node/table-cell.tsx","./src/components/ozon-content/nodes/table.node/table-rows.tsx","./src/components/ozon-content/nodes/table.node/table.node.tsx","./src/components/ozon-content/nodes/text.node.tsx","./src/components/ozon-content/nodes/verwijderde-tekst.node.tsx","./src/components/ozon-content/ozon-content-mapper.tsx","./src/components/ozon-content/ozon-content.scss?tag=dso-ozon-content&encapsulation=shadow","./src/components/ozon-content/ozon-content.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n margin-top: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n @include alert.root();\r\n\r\n dso-icon {\r\n @include alert.icon-position();\r\n\r\n height: units.$u4;\r\n width: units.$u4;\r\n }\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-alert\",\r\n styleUrl: \"alert.scss\",\r\n shadow: true,\r\n})\r\nexport class Alert {\r\n /*\r\n Set status of alert\r\n /\r\n @Prop()\r\n status!: \"success\" \| \"info\" \| \"warning\" \| \"error\";\r\n\r\n /\r\n Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n /\r\n @Prop()\r\n roleAlert?: boolean;\r\n\r\n private static statusMap = new Map<string, string>([\r\n [\"success\", \"Gelukt\"],\r\n [\"info\", \"Opmerking\"],\r\n [\"warning\", \"Waarschuwing\"],\r\n [\"error\", \"Fout\"],\r\n ]);\r\n\r\n render() {\r\n const status = Alert.statusMap.get(this.status);\r\n if (!status) {\r\n throw new Error(`Invalid status ${this.status}`);\r\n }\r\n\r\n return (\r\n <div class={clsx(\"alert\", `alert-${this.status}`)} role={this.roleAlert ? \"alert\" : undefined}>\r\n <dso-icon icon={\"status-\" + this.status}></dso-icon>\r\n <span class=\"sr-only\">{status}:</span>\r\n <slot></slot>\r\n </div>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n\r\ndso-annotation-button {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, ComponentInterface, Event, Prop, EventEmitter } from \"@stencil/core\";\r\n\r\nexport interface AnnotationButtonClickEvent {\r\n originalEvent: Event;\r\n open: boolean;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-annotation-button\",\r\n styleUrl: \"annotation-button.scss\",\r\n // No shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n /\r\n To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n /\r\n @Prop()\r\n identifier!: string \| undefined;\r\n\r\n /\r\n Set to true when the annotation is open.\r\n /\r\n @Prop()\r\n open = false;\r\n\r\n /\r\n Emitted when user activates the button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<AnnotationButtonClickEvent>;\r\n\r\n private handleClick = (e: MouseEvent) => {\r\n this.dsoClick.emit({ originalEvent: e, open: !this.open });\r\n };\r\n\r\n render() {\r\n return (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n aria-controls={this.identifier}\r\n aria-expanded={this.open.toString()}\r\n onClick={this.handleClick}\r\n >\r\n <dso-icon icon=\"label\"></dso-icon>\r\n <span class=\"sr-only\">Toelichting bekijken</span>\r\n </button>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-badge {\r\n @include badge.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-badge\",\r\n styleUrl: \"badge.scss\",\r\n shadow: true,\r\n})\r\nexport class Badge {\r\n /\r\n The status of the Badge.\r\n /\r\n @Prop()\r\n status?: \"primary\" \| \"success\" \| \"info\" \| \"warning\" \| \"danger\" \| \"error\" \| \"outline\" \| \"attention\";\r\n\r\n render() {\r\n return (\r\n <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n <slot></slot>\r\n </span>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-width: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-width: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { debounce } from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150)\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement \| undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /\r\n For compact Label\r\n /\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /\r\n Shows a button that can be used to remove the Label.\r\n /\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /\r\n The status of this Label.\r\n /\r\n @Prop()\r\n status?: \"primary\" \| \"info\" \| \"success\" \| \"warning\" \| \"danger\" \| \"error\" \| \"bright\" \| \"attention\";\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /\r\n Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n /\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n /\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /* The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. /\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force \|\| !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover \|\| this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","export function getNodeName(node: Node): string {\r\n if (node instanceof Element) {\r\n return node.localName;\r\n }\r\n\r\n if (node.nodeName.includes(\":\")) {\r\n return node.nodeName.substring(node.nodeName.indexOf(\":\") + 1);\r\n }\r\n\r\n return node.nodeName;\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentAlNode implements OzonContentNode {\r\n name = \"Al\";\r\n\r\n render(node: Element, { mapNodeToJsx, path }: OzonContentNodeContext) {\r\n const nestedAl = path.some((n) => {\r\n const nodeName = getNodeName(n);\r\n\r\n return nodeName === \"Al\" \|\| nodeName === \"Opschrift\";\r\n });\r\n\r\n const content = mapNodeToJsx(node.childNodes);\r\n\r\n return nestedAl ? <span role=\"paragraph\">{content}</span> : <p>{content}</p>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentBronNode implements OzonContentNode {\r\n name = \"Bron\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <span class=\"dso-ozon-bron\">{mapNodeToJsx(node.childNodes)}</span>;\r\n }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentDocumentNode implements OzonContentNode {\r\n name = \"#document\";\r\n\r\n render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentExtRefNode implements OzonContentNode {\r\n name = [\"ExtRef\", \"ExtIoRef\"];\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const href = node.tagName === \"ExtIoRef\" ? node.getAttribute(\"href\") : node.getAttribute(\"ref\");\r\n\r\n return (\r\n <a target=\"_blank\" rel=\"noopener noreferrer\" href={href ?? undefined}>\r\n <span class=\"sr-only\">opent in nieuw venster </span>\r\n {mapNodeToJsx(node.childNodes)}\r\n </a>\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentFallbackNode implements OzonContentNode {\r\n // This name does not match any elements\r\n name = [\"<fallback>\"];\r\n\r\n render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <span class={`fallback od-${getNodeName(node)}`}>{mapNodeToJsx(node.childNodes)}</span>;\r\n }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\ntype BijschriftProps = {\r\n bijschrift?: IBijschrift;\r\n bron?: ChildNode;\r\n mapNodeToJsx: (node: Node \| NodeList \| Node[]) => JSX.Element;\r\n};\r\n\r\ninterface IBijschrift {\r\n inhoud: NodeListOf<ChildNode>;\r\n locatie: string;\r\n}\r\n\r\nconst Bijschrift = ({ bijschrift, bron, mapNodeToJsx }: BijschriftProps): HTMLSpanElement => {\r\n return (\r\n <span class=\"figuur-bijschrift\">\r\n {bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud)}\r\n {bron && (\r\n <Fragment>\r\n {`${bijschrift ? \" \" : \"\"}(bron: `}\r\n {mapNodeToJsx(bron)})\r\n </Fragment>\r\n )}\r\n </span>\r\n );\r\n};\r\n\r\nexport class OzonContentFiguurNode implements OzonContentNode {\r\n name = [\"Figuur\"];\r\n\r\n setImageDimensions(imageElement: HTMLImageElement, schaal: number) {\r\n const { naturalHeight, naturalWidth } = imageElement;\r\n\r\n imageElement.height = naturalHeight (schaal / 100);\r\n imageElement.width = naturalWidth * (schaal / 100);\r\n }\r\n\r\n onImageLoad(event: Event, schaal?: number) {\r\n if (event.target instanceof HTMLImageElement && schaal) {\r\n this.setImageDimensions(event.target, schaal);\r\n }\r\n }\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const childNodes = Array.from(node.childNodes);\r\n const titel = childNodes.find((n) => getNodeName(n) === \"Titel\")?.textContent;\r\n const bron = childNodes.find((n) => getNodeName(n) === \"Bron\");\r\n\r\n const illustratieNode = childNodes.find((n) => getNodeName(n) === \"Illustratie\");\r\n const bijschriftNode = childNodes.find((n) => getNodeName(n) === \"Bijschrift\");\r\n\r\n if (illustratieNode instanceof Element) {\r\n const illustratie = {\r\n naam: illustratieNode.getAttribute(\"naam\"),\r\n breedte: illustratieNode.getAttribute(\"breedte\"),\r\n hoogte: illustratieNode.getAttribute(\"hoogte\"),\r\n uitlijning: illustratieNode.getAttribute(\"uitlijning\"),\r\n alt: illustratieNode.getAttribute(\"alt\"),\r\n schaal: illustratieNode.getAttribute(\"schaal\"),\r\n };\r\n\r\n const bijschrift =\r\n bijschriftNode instanceof Element\r\n ? {\r\n inhoud: bijschriftNode.childNodes,\r\n locatie: bijschriftNode.getAttribute(\"locatie\") ?? \"onder\",\r\n }\r\n : undefined;\r\n\r\n return (\r\n <div class={`dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : \"onder\"}`}>\r\n {titel && <span class=\"figuur-titel\">{titel}</span>}\r\n {bijschrift?.locatie === \"boven\" && (\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n )}\r\n <dso-image-overlay>\r\n {titel && (\r\n <div slot=\"titel\">\r\n <span>{titel}</span>\r\n </div>\r\n )}\r\n <img\r\n src={illustratie.naam ?? undefined}\r\n alt={illustratie.alt ?? titel ?? illustratie.naam ?? undefined}\r\n onLoad={(event: Event) => this.onImageLoad(event, Number(illustratie.schaal))}\r\n />\r\n {(bijschrift \|\| bron) && (\r\n <div slot=\"bijschrift\">\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n </div>\r\n )}\r\n </dso-image-overlay>\r\n {(bijschrift?.locatie === \"onder\" \|\| (!bijschrift && bron)) && (\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n )}\r\n </div>\r\n );\r\n }\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInhoudNode implements OzonContentNode {\r\n name = [\"Inhoud\", \"ContainerBlocksType\", \"BlockMixedcontentMetMaximaleInlinesMarkersPopupsType\"];\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <div class=\"dso-rich-content\">{mapNodeToJsx(node.childNodes)}</div>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineTekstAfbeeldingNode implements OzonContentNode {\r\n name = [\"InlineTekstAfbeelding\", \"Illustratie\"];\r\n\r\n render(node: Element) {\r\n return (\r\n <img\r\n src={node.getAttribute(\"naam\") ?? undefined}\r\n alt={node.getAttribute(\"naam\") ?? undefined}\r\n height={node.getAttribute(\"hoogte\") ?? undefined}\r\n width={node.getAttribute(\"breedte\") ?? undefined}\r\n />\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineNodes implements OzonContentNode {\r\n name = [\"sub\", \"sup\", \"strong\", \"b\", \"u\", \"i\", \"br\"];\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n if (node.localName === \"br\") {\r\n return <br />;\r\n }\r\n\r\n const Tag = node.localName;\r\n\r\n return <Tag>{mapNodeToJsx(node.childNodes)}</Tag>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntIoRefNode implements OzonContentNode {\r\n name = \"IntIoRef\";\r\n\r\n render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n const ref = node.getAttribute(\"ref\");\r\n if (!ref) {\r\n return mapNodeToJsx(node.childNodes);\r\n }\r\n\r\n const intRefOnClick = (event: MouseEvent) => {\r\n event.preventDefault();\r\n\r\n const target = event.currentTarget;\r\n if (!(target instanceof HTMLAnchorElement)) {\r\n return;\r\n }\r\n\r\n const { href } = target;\r\n\r\n emitAnchorClick({\r\n node: this.name,\r\n href,\r\n documentComponent: ref,\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n return (\r\n <a href={`#${ref}`} onClick={intRefOnClick}>\r\n {mapNodeToJsx(node.childNodes)}\r\n </a>\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntRefNode implements OzonContentNode {\r\n name = \"IntRef\";\r\n\r\n render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n const ref = node.getAttribute(\"ref\");\r\n if (!ref) {\r\n return mapNodeToJsx(node.childNodes);\r\n }\r\n\r\n const intRefOnClick = (event: MouseEvent) => {\r\n event.preventDefault();\r\n\r\n const target = event.currentTarget;\r\n if (!(target instanceof HTMLAnchorElement)) {\r\n return;\r\n }\r\n\r\n const { href } = target;\r\n\r\n emitAnchorClick({\r\n node: this.name,\r\n href,\r\n documentComponent: ref,\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n return (\r\n <a href={`#${ref}`} onClick={intRefOnClick}>\r\n {mapNodeToJsx(node.childNodes)}\r\n </a>\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentLijstNode implements OzonContentNode {\r\n name = \"Lijst\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const childNodes = Array.from(node.childNodes);\r\n const aanhef = childNodes.find((n) => getNodeName(n) === \"Lijstaanhef\");\r\n const sluiting = childNodes.find((n) => getNodeName(n) === \"Lijstsluiting\");\r\n const listItems = childNodes.filter((n) => getNodeName(n) === \"Li\");\r\n\r\n return (\r\n <div class=\"dso-ozon-lijst od-Lijst\">\r\n {aanhef && mapNodeToJsx(aanhef)}\r\n <ul class={node.getAttribute(\"type\") ?? \"\"}>\r\n {listItems.map((item) => {\r\n const itemNodes = Array.from(item.childNodes);\r\n const liNummer = itemNodes.find((n) => getNodeName(n) === \"LiNummer\")?.childNodes;\r\n\r\n return (\r\n <li class=\"od-Li\">\r\n {liNummer && <span class=\"od-LiNummer\">{mapNodeToJsx(liNummer)}</span>}\r\n {mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== \"LiNummer\"))}\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n {sluiting && mapNodeToJsx(sluiting)}\r\n </div>\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNieuweTekstNode implements OzonContentNode {\r\n name = \"NieuweTekst\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <ins>{mapNodeToJsx(node.childNodes)}</ins>;\r\n }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNootNode implements OzonContentNode {\r\n name = \"Noot\";\r\n\r\n handles = [\"NootNummer\"];\r\n\r\n identify(): string \| undefined {\r\n return \"Noot\";\r\n }\r\n\r\n render(node: Element, { mapNodeToJsx, state: openNoteId, setState }: OzonContentNodeContext<string \| undefined>) {\r\n const noteId = node.getAttribute(\"id\");\r\n if (!noteId) {\r\n console.error(\"Noot node without id\", node);\r\n\r\n return <Fragment />;\r\n }\r\n\r\n const noteControlsId = `dso-ozon-note-${noteId}`;\r\n\r\n const childNodes = Array.from(node.childNodes);\r\n const nootNummer = childNodes.find((n) => getNodeName(n) === \"NootNummer\")?.textContent ?? noteId;\r\n\r\n return (\r\n <>\r\n <sup>\r\n <button\r\n type=\"button\"\r\n class=\"toggle-note\"\r\n aria-describedby={noteControlsId}\r\n onClick={() => setState?.(openNoteId === noteId ? undefined : noteId)}\r\n onBlur={() => setState?.(undefined)}\r\n aria-expanded={openNoteId === noteId ? \"true\" : \"false\"}\r\n >\r\n {nootNummer}\r\n </button>\r\n </sup>\r\n <dso-tooltip active={openNoteId === noteId} id={noteControlsId} stateless descriptive>\r\n <span role=\"section\">{mapNodeToJsx(Array.from(node.querySelectorAll(\":scope > Al\")))}</span>\r\n </dso-tooltip>\r\n </>\r\n );\r\n }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentOpschriftNode implements OzonContentNode {\r\n name = \"Opschrift\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n }\r\n}\r\n","import { Colspecs } from \"./colspec.interface\";\r\n\r\nexport function mapColspecs(count: number, nodeList: NodeListOf<Element>): Colspecs {\r\n const elements = Array.from(nodeList);\r\n const totalWidth = getTotalWidth(elements);\r\n\r\n return {\r\n totalWidth,\r\n count,\r\n columns: elements.map((element, index) => {\r\n const colNumber = element.getAttribute(\"colnum\");\r\n\r\n return {\r\n name: element.getAttribute(\"colname\") ?? \"\",\r\n number: colNumber ? parseInt(colNumber, 10) : index + 1,\r\n width: getWidth(totalWidth, element),\r\n };\r\n }),\r\n };\r\n}\r\n\r\nfunction getTotalWidth(elements: Element[]): number {\r\n return elements.reduce((totalWidth, element) => {\r\n const width = element.getAttribute(\"colwidth\")?.replace(/[^0-9]/, \"\") ?? \"\";\r\n const colWidth = parseInt(width, 10);\r\n\r\n return totalWidth + (isNaN(colWidth) ? 0 : colWidth);\r\n }, 0);\r\n}\r\n\r\nfunction getWidth(totalWidth: number, element: Element): string \| undefined {\r\n const width = element.getAttribute(\"colwidth\");\r\n\r\n if (!width) {\r\n return undefined;\r\n }\r\n\r\n if (width === \"\") {\r\n return \"100%\";\r\n }\r\n\r\n if (width.includes(\"\") \|\| width.match(/^[\\d+]$/)) {\r\n const colWidth = parseInt(width.replace(/[^0-9]/, \"\"), 10);\r\n\r\n return `${Math.round((colWidth / totalWidth) * 100)}%`;\r\n }\r\n\r\n return width;\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nexport const Colgroup: FunctionalComponent<{ colspecs: Colspecs }> = ({ colspecs }) =>\r\n colspecs.columns.length > 0 ? (\r\n <colgroup>\r\n {colspecs.columns.map((colspec) => (\r\n <col style={{ width: colspec.width }} />\r\n ))}\r\n </colgroup>\r\n ) : (\r\n <Fragment />\r\n );\r\n","import { FunctionalComponent } from \"@stencil/core\";\r\nimport { h, JSXBase } from \"@stencil/core/internal\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nfunction getData(cell: Element) {\r\n return {\r\n moreRows: cell.getAttribute(\"morerows\"),\r\n nameStart: cell.getAttribute(\"namest\"),\r\n nameEnd: cell.getAttribute(\"nameend\"),\r\n };\r\n}\r\n\r\nfunction getColspan({ columns }: Colspecs, nameStart: string, nameEnd: string): number \| undefined {\r\n const colspecStart = columns.find((c) => c.name === nameStart);\r\n const colspecEnd = columns.find((c) => c.name === nameEnd);\r\n if (!colspecStart \|\| !colspecEnd) {\r\n return undefined;\r\n }\r\n\r\n const colspan = colspecEnd.number - colspecStart.number + 1;\r\n\r\n return colspan === 1 ? undefined : colspan;\r\n}\r\n\r\nexport const Cell: FunctionalComponent<{\r\n context: OzonContentNodeContext;\r\n colspecs: Colspecs \| undefined;\r\n cell: Element;\r\n}> = ({ context: { mapNodeToJsx }, colspecs, cell }) => {\r\n const { moreRows, nameStart, nameEnd } = getData(cell);\r\n\r\n const td: JSXBase.TdHTMLAttributes<HTMLTableCellElement> = {\r\n rowSpan: moreRows ? parseInt(moreRows, 10) + 1 : undefined,\r\n colSpan: colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined,\r\n };\r\n\r\n return <td {...td}>{mapNodeToJsx(cell.childNodes)}</td>;\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\nimport { Cell } from \"./table-cell\";\r\n\r\nexport const Rows: FunctionalComponent<{\r\n context: OzonContentNodeContext;\r\n colspecs: Colspecs \| undefined;\r\n rows: Element[];\r\n}> = ({ context, colspecs, rows }) => {\r\n return (\r\n <>\r\n {rows.map((row) => (\r\n <tr>\r\n {Array.from(row.children).map((cell) => (\r\n <Cell cell={cell} colspecs={colspecs} context={context} />\r\n ))}\r\n </tr>\r\n ))}\r\n </>\r\n );\r\n};\r\n","import { h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getNodeName } from \"../../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../../ozon-content-node.interface\";\r\n\r\nimport { mapColspecs } from \"./colspec/colspec-mapper\";\r\nimport { Colgroup } from \"./table-colgroup\";\r\nimport { Rows } from \"./table-rows\";\r\n\r\nfunction mapData(node: Element) {\r\n const tgroup = node.querySelector(\":scope > tgroup\");\r\n const colAttribute = tgroup?.getAttribute(\"cols\") ?? undefined;\r\n const columnCount = colAttribute ? parseInt(colAttribute, 10) : undefined;\r\n\r\n return {\r\n caption: node.querySelector(\":scope > title\")?.textContent ?? undefined,\r\n colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(\":scope > colspec\")) : undefined,\r\n headRows: Array.from(node.querySelectorAll(\":scope > tgroup > thead > row\")),\r\n bodyRows: Array.from(node.querySelectorAll(\":scope > tgroup > tbody > row\")),\r\n editAction: node.getAttribute(\"wijzigactie\"),\r\n };\r\n}\r\n\r\nexport class OzonContentTableNode implements OzonContentNode {\r\n name = \"table\";\r\n\r\n handles = [\"title\", \"tgroup\", \"colspec\", \"thead\", \"tbody\", \"row\", \"cell\"];\r\n\r\n id = uuidv4();\r\n\r\n render(node: Element, context: OzonContentNodeContext) {\r\n const { caption, colspecs, headRows, bodyRows, editAction } = mapData(node);\r\n\r\n const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === \"Bron\");\r\n\r\n return (\r\n <dso-table>\r\n <table\r\n class={clsx(\"table dso-table-vertical-lines\", {\r\n \"dso-del\": editAction === \"verwijder\",\r\n \"dso-ins\": editAction === \"voegtoe\",\r\n })}\r\n {...(bron ? { \"aria-describedby\": this.id } : {})}\r\n >\r\n {caption && <caption>{caption}</caption>}\r\n {colspecs && <Colgroup colspecs={colspecs} />}\r\n {headRows.length > 0 && (\r\n <thead>\r\n <Rows rows={headRows} colspecs={colspecs} context={context}></Rows>\r\n </thead>\r\n )}\r\n {bodyRows.length > 0 && (\r\n <tbody>\r\n <Rows rows={bodyRows} colspecs={colspecs} context={context}></Rows>\r\n </tbody>\r\n )}\r\n </table>\r\n {bron && <div id={this.id}>{context.mapNodeToJsx(bron)}</div>}\r\n </dso-table>\r\n );\r\n }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentTextNode implements OzonContentNode {\r\n name = \"#text\";\r\n\r\n render(node: Node) {\r\n return <Fragment>{node.textContent}</Fragment>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentVerwijderdeTekstNode implements OzonContentNode {\r\n name = \"VerwijderdeTekst\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <del>{mapNodeToJsx(node.childNodes)}</del>;\r\n }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"./get-node-name.function\";\r\nimport { OzonContentAlNode } from \"./nodes/al.node\";\r\nimport { OzonContentBronNode } from \"./nodes/bron.node\";\r\nimport { OzonContentDocumentNode } from \"./nodes/document.node\";\r\nimport { OzonContentExtRefNode } from \"./nodes/ext-ref.node\";\r\nimport { OzonContentFallbackNode } from \"./nodes/fallback.node\";\r\nimport { OzonContentFiguurNode } from \"./nodes/figuur.node\";\r\nimport { OzonContentInhoudNode } from \"./nodes/inhoud.node\";\r\nimport { OzonContentInlineTekstAfbeeldingNode } from \"./nodes/inline-tekst-afbeelding.node\";\r\nimport { OzonContentInlineNodes } from \"./nodes/inline.nodes\";\r\nimport { OzonContentIntIoRefNode } from \"./nodes/int-io-ref.node\";\r\nimport { OzonContentIntRefNode } from \"./nodes/int-ref.node\";\r\nimport { OzonContentLijstNode } from \"./nodes/lijst.node\";\r\nimport { OzonContentNieuweTekstNode } from \"./nodes/nieuwe-tekst.node\";\r\nimport { OzonContentNootNode } from \"./nodes/noot.node\";\r\nimport { OzonContentOpschriftNode } from \"./nodes/opschrift.node\";\r\nimport { OzonContentTableNode } from \"./nodes/table.node\";\r\nimport { OzonContentTextNode } from \"./nodes/text.node\";\r\nimport { OzonContentVerwijderdeTekstNode } from \"./nodes/verwijderde-tekst.node\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentNode } from \"./ozon-content-node.interface\";\r\n\r\nexport class Mapper {\r\n private cache: { xml: string; document: Document } \| undefined;\r\n\r\n private mappers: OzonContentNode[] = [\r\n new OzonContentTextNode(),\r\n new OzonContentDocumentNode(),\r\n new OzonContentInhoudNode(),\r\n new OzonContentOpschriftNode(),\r\n new OzonContentIntRefNode(),\r\n new OzonContentExtRefNode(),\r\n new OzonContentAlNode(),\r\n new OzonContentInlineNodes(),\r\n new OzonContentInlineTekstAfbeeldingNode(),\r\n new OzonContentNootNode(),\r\n new OzonContentTableNode(),\r\n new OzonContentIntIoRefNode(),\r\n new OzonContentFiguurNode(),\r\n new OzonContentLijstNode(),\r\n new OzonContentBronNode(),\r\n new OzonContentNieuweTekstNode(),\r\n new OzonContentVerwijderdeTekstNode(),\r\n ];\r\n\r\n private skip = this.mappers.reduce<string[]>((t, m) => {\r\n if (m.handles) {\r\n t.push(...m.handles);\r\n }\r\n\r\n return t;\r\n }, []);\r\n\r\n private fallbackNode = new OzonContentFallbackNode();\r\n\r\n private domParser = new DOMParser();\r\n\r\n private findMapper(name: string): OzonContentNode \| undefined {\r\n if (this.skip.includes(name)) {\r\n return undefined;\r\n }\r\n\r\n return (\r\n this.mappers.find((m) => {\r\n if (Array.isArray(m.name)) {\r\n return m.name.includes(name);\r\n }\r\n\r\n return m.name === name;\r\n }) ?? this.fallbackNode\r\n );\r\n }\r\n\r\n mapNodeToJsx(node: Node \| Node[] \| NodeList, context: OzonContentContext, path: Node[]): JSX.Element {\r\n if (node instanceof NodeList) {\r\n return <Fragment>{Array.from(node).map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n }\r\n\r\n if (Array.isArray(node)) {\r\n return <Fragment>{node.map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n }\r\n\r\n const nodeName = getNodeName(node);\r\n const mapper = this.findMapper(nodeName);\r\n if (!mapper) {\r\n return <Fragment />;\r\n }\r\n\r\n const identity = mapper.identify?.(node);\r\n\r\n const state = identity ? context.state[identity] : undefined;\r\n const setState = identity ? (s: unknown) => context.setState({ ...context.state, [identity]: s }) : undefined;\r\n\r\n return mapper.render(node, {\r\n mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),\r\n emitAnchorClick: context.emitAnchorClick,\r\n setState,\r\n state,\r\n path,\r\n });\r\n }\r\n\r\n transform(xml: string, context: OzonContentContext): JSX.Element {\r\n if (!xml) {\r\n return <Fragment />;\r\n }\r\n\r\n if (!this.cache \|\| this.cache.xml !== xml) {\r\n const document = this.domParser.parseFromString(xml, \"text/xml\");\r\n if (document.querySelector(\"html > body > parsererror\")) {\r\n console.error(document);\r\n\r\n return <Fragment />;\r\n }\r\n\r\n this.cache = { xml, document };\r\n }\r\n\r\n const xmlDocument = this.cache.document;\r\n\r\n return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);\r\n }\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/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n\r\n:host(:not([inline])) {\r\n display: block;\r\n}\r\n\r\n:host([inline]) {\r\n display: inline;\r\n}\r\n\r\n:host([deleted]) {\r\n * {\r\n text-decoration: line-through !important;\r\n }\r\n}\r\n\r\n:host([interactive]) {\r\n @include anchor.root($is-html-a-element: false);\r\n\r\n color: colors.$bosgroen;\r\n font-weight: 600;\r\n text-decoration: none;\r\n}\r\n\r\n:host([interactive=\"sub\"]) {\r\n color: colors.$grijs-90;\r\n}\r\n\r\n.sr-only,\r\n.deleted-start,\r\n.deleted-end {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton.toggle-note {\r\n @include button.tertiary($modifiers: false);\r\n}\r\n\r\nspan[role=\"section\"],\r\nspan[role=\"paragraph\"] {\r\n display: block;\r\n}\r\n\r\n:host(:not([inline])) .fallback {\r\n display: block;\r\n}\r\n\r\na {\r\n @include anchor.root();\r\n}\r\n\r\n// Styling below copied from DSO Viewer 20211011\r\n\r\n.od-Term {\r\n font-weight: 700;\r\n}\r\n\r\n.od-Definitie,\r\n.od-Tussenkop {\r\n font-style: italic;\r\n}\r\n\r\n.od-Inhoud,\r\n.od-Inhoud > .od-Lijst,\r\n.od-IntIoRef,\r\n.od-Lidnr,\r\n.od-LiNr,\r\n.od-Opschrift,\r\n.od-Tussenkop {\r\n display: inline;\r\n}\r\n\r\n.od-Al {\r\n margin-bottom: 0.75em;\r\n}\r\n\r\n.od-IntIoRef {\r\n border-bottom: 1px dotted;\r\n}\r\n\r\n.dso-ozon-bron {\r\n font-style: italic;\r\n font-size: 0.75rem;\r\n}\r\n\r\n.dso-ozon-figuur {\r\n margin-bottom: units.$u2;\r\n\r\n .figuur-bijschrift {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n }\r\n\r\n &.bijschrift-boven {\r\n .figuur-bijschrift {\r\n padding-bottom: 0.25rem;\r\n }\r\n }\r\n\r\n &.bijschrift-onder {\r\n .figuur-bijschrift {\r\n padding-top: 0.25rem;\r\n }\r\n }\r\n\r\n .figuur-titel {\r\n color: colors.$mauve;\r\n display: block;\r\n font-weight: 500;\r\n padding-bottom: 0.5rem;\r\n }\r\n}\r\n\r\n.dso-ozon-lijst {\r\n span.od-Lijstaanhef,\r\n span.od-Lijstsluiting {\r\n margin-bottom: units.$ru2;\r\n }\r\n\r\n ul {\r\n &.expliciet {\r\n list-style: none;\r\n\r\n > .od-Li {\r\n position: relative;\r\n\r\n > span.od-LiNummer {\r\n position: absolute;\r\n left: units.$u6 * -1 + 4;\r\n text-align: right;\r\n width: units.$u5;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.od-Tabel thead {\r\n font-weight: 600;\r\n}\r\n\r\n.od-Kadertekst {\r\n border: 1px solid #e5e5e5;\r\n margin-bottom: 1rem;\r\n padding: 1rem;\r\n}\r\n\r\n.dso-del {\r\n background-color: colors.$danger-bg-color;\r\n color: colors.$zwart;\r\n text-decoration: line-through;\r\n\r\n a {\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n.dso-ins {\r\n background-color: colors.$success-bg-color;\r\n box-shadow: insert.$insert-box-shadow;\r\n color: colors.$zwart;\r\n\r\n a {\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n.dso-rich-content {\r\n @include rich-content.children();\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Host, JSX } from \"@stencil/core\";\r\nimport { isTabbable } from \"tabbable\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentAnchorClick, OzonContentClick } from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\n@Component({\r\n tag: \"dso-ozon-content\",\r\n styleUrl: \"ozon-content.scss\",\r\n shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n /*\r\n The XML to be rendered.\r\n /\r\n @Prop()\r\n content: string \| undefined;\r\n\r\n /\r\n Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n /\r\n @Prop({ reflect: true })\r\n inline = false;\r\n\r\n /\r\n Marks content as deleted using visual and accessible clues.\r\n /\r\n @Prop({ reflect: true })\r\n deleted = false;\r\n\r\n /\r\n Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\r\n \r\n Do not use this without an accessible companion element! `interactive` is only\r\n * meant to ease the use of the companion element for mouse/touch users.\r\n \r\n * `true`: Interactive anchor-look-alike\r\n * * `\"sub\"`: Interactive anchor-look-alike for sub navigation\r\n * * `false \| undefined`: Disabled\r\n /\r\n @Prop({ reflect: true })\r\n interactive: \"sub\" \| \"\" \| boolean = false;\r\n\r\n @State()\r\n state: OzonContentNodeState = {};\r\n\r\n /\r\n Emitted when `<a>` is clicked.\r\n /\r\n @Event()\r\n dsoAnchorClick!: EventEmitter<OzonContentAnchorClick>;\r\n\r\n /\r\n These events are only emitted when the component is `interactive`.\r\n */\r\n @Event()\r\n dsoClick!: EventEmitter<OzonContentClick>;\r\n\r\n @Element()\r\n host!: HTMLDsoOzonContentElement;\r\n\r\n private mapper = new Mapper();\r\n\r\n private handleHostOnClick(e: UIEvent) {\r\n // '' is `true`: <dso-ozon-content interactive>\r\n if (this.interactive !== \"\" && !this.interactive) {\r\n return;\r\n }\r\n\r\n const doIt =\r\n e\r\n .composedPath()\r\n .find(\r\n (eventTarget) => eventTarget === this.host \|\| (eventTarget instanceof HTMLElement && isTabbable(eventTarget))\r\n ) === this.host;\r\n\r\n if (doIt) {\r\n this.dsoClick.emit({ originalEvent: e });\r\n }\r\n }\r\n\r\n render(): JSX.Element {\r\n const context: OzonContentContext = {\r\n state: this.state,\r\n setState: (state) => (this.state = state),\r\n emitAnchorClick: this.dsoAnchorClick.emit,\r\n };\r\n\r\n const transformed = this.mapper.transform(this.content ?? \"\", context);\r\n\r\n if (this.deleted) {\r\n return (\r\n <section>\r\n <slot name=\"prefix\" />\r\n <span class=\"deleted-start\">Begin verwijderd element</span>\r\n {transformed}\r\n <span class=\"deleted-end\">Einde verwijderd element</span>\r\n <slot name=\"suffix\" />\r\n </section>\r\n );\r\n }\r\n\r\n return (\r\n <Host onClick={(e: UIEvent) => this.handleHostOnClick(e)}>\r\n <slot name=\"prefix\" />\r\n {transformed}\r\n <slot name=\"suffix\" />\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}
1	+ {"version":3,"names":["alertCss","Alert","render","status","statusMap","get","this","Error","h","class","clsx","role","roleAlert","undefined","icon","Map","annotationButtonCss","AnnotationButton","handleClick","e","dsoClick","emit","originalEvent","open","type","identifier","toString","onClick","badgeCss","Badge","labelCss","resizeObserver","ResizeObserver","debounce","entries","forEach","target","isDsoLabelComponent","_truncateLabel","element","tagName","hasEllipses","el","scrollWidth","clientWidth","Label","watchRemovable","removable","startMutationObserver","stopMutationObserver","watchTruncate","truncate","startTruncate","stopTruncate","keyDownListener","event","key","textHover","textFocus","async","setTimeout","isTruncated","labelContent","syncLabelText","labelText","_b","_a","host","textContent","trim","componentDidLoad","disconnectedCallback","mutationObserver","MutationObserver","observe","characterData","childList","subtree","attributes","force","disconnect","unobserve","Fragment","compact","removeHover","removeFocus","name","ref","tabindex","onMouseEnter","onMouseLeave","onFocus","onBlur","dsoRemoveClick","stateless","id","active","position","strategy","getNodeName","node","Element","localName","nodeName","includes","substring","indexOf","OzonContentAlNode","constructor","mapNodeToJsx","path","nestedAl","some","n","content","childNodes","OzonContentBronNode","OzonContentDocumentNode","OzonContentExtRefNode","href","getAttribute","rel","OzonContentFallbackNode","Bijschrift","bijschrift","bron","inhoud","OzonContentFiguurNode","setImageDimensions","imageElement","schaal","naturalHeight","naturalWidth","height","width","onImageLoad","HTMLImageElement","Array","from","titel","find","illustratieNode","bijschriftNode","illustratie","naam","breedte","hoogte","uitlijning","alt","locatie","slot","src","_c","_f","_e","_d","onLoad","Number","OzonContentInhoudNode","OzonContentInlineTekstAfbeeldingNode","OzonContentInlineNodes","Tag","OzonContentIntIoRefNode","emitAnchorClick","intRefOnClick","preventDefault","currentTarget","HTMLAnchorElement","documentComponent","OzonContentIntRefNode","OzonContentLijstNode","aanhef","sluiting","listItems","filter","map","item","itemNodes","liNummer","OzonContentNieuweTekstNode","OzonContentNootNode","handles","identify","state","openNoteId","setState","noteId","console","error","noteControlsId","nootNummer","descriptive","querySelectorAll","OzonContentOpschriftNode","mapColspecs","count","nodeList","elements","totalWidth","getTotalWidth","columns","index","colNumber","number","parseInt","getWidth","reduce","replace","colWidth","isNaN","match","Math","round","Colgroup","colspecs","length","colspec","style","getData","cell","moreRows","nameStart","nameEnd","getColspan","colspecStart","c","colspecEnd","colspan","Cell","context","td","rowSpan","colSpan","Object","assign","Rows","rows","row","children","mapData","tgroup","querySelector","colAttribute","columnCount","caption","headRows","bodyRows","editAction","OzonContentTableNode","uuidv4","OzonContentTextNode","OzonContentVerwijderdeTekstNode","Mapper","mappers","skip","t","m","push","fallbackNode","domParser","DOMParser","findMapper","isArray","NodeList","mapper","identity","call","s","transform","xml","cache","document","parseFromString","xmlDocument","getRootNode","ozonContentCss","OzonContent","handleHostOnClick","interactive","doIt","composedPath","eventTarget","HTMLElement","isTabbable","dsoAnchorClick","transformed","deleted","Host"],"sources":["./src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","./src/components/alert/alert.tsx","./src/components/annotation-button/annotation-button.scss?tag=dso-annotation-button","./src/components/annotation-button/annotation-button.tsx","./src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","./src/components/badge/badge.tsx","./src/components/label/label.scss?tag=dso-label&encapsulation=shadow","./src/components/label/label.tsx","./src/components/ozon-content/get-node-name.function.ts","./src/components/ozon-content/nodes/al.node.tsx","./src/components/ozon-content/nodes/bron.node.tsx","./src/components/ozon-content/nodes/document.node.tsx","./src/components/ozon-content/nodes/ext-ref.node.tsx","./src/components/ozon-content/nodes/fallback.node.tsx","./src/components/ozon-content/nodes/figuur.node.tsx","./src/components/ozon-content/nodes/inhoud.node.tsx","./src/components/ozon-content/nodes/inline-tekst-afbeelding.node.tsx","./src/components/ozon-content/nodes/inline.nodes.tsx","./src/components/ozon-content/nodes/int-io-ref.node.tsx","./src/components/ozon-content/nodes/int-ref.node.tsx","./src/components/ozon-content/nodes/lijst.node.tsx","./src/components/ozon-content/nodes/nieuwe-tekst.node.tsx","./src/components/ozon-content/nodes/noot.node.tsx","./src/components/ozon-content/nodes/opschrift.node.tsx","./src/components/ozon-content/nodes/table.node/colspec/colspec-mapper.ts","./src/components/ozon-content/nodes/table.node/table-colgroup.tsx","./src/components/ozon-content/nodes/table.node/table-cell.tsx","./src/components/ozon-content/nodes/table.node/table-rows.tsx","./src/components/ozon-content/nodes/table.node/table.node.tsx","./src/components/ozon-content/nodes/text.node.tsx","./src/components/ozon-content/nodes/verwijderde-tekst.node.tsx","./src/components/ozon-content/ozon-content-mapper.tsx","./src/components/ozon-content/ozon-content.scss?tag=dso-ozon-content&encapsulation=shadow","./src/components/ozon-content/ozon-content.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n margin-top: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n @include alert.root();\r\n\r\n dso-icon {\r\n @include alert.icon-position();\r\n\r\n height: units.$u4;\r\n width: units.$u4;\r\n }\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-alert\",\r\n styleUrl: \"alert.scss\",\r\n shadow: true,\r\n})\r\nexport class Alert {\r\n /*\r\n Set status of alert\r\n /\r\n @Prop()\r\n status!: \"success\" \| \"info\" \| \"warning\" \| \"error\";\r\n\r\n /\r\n Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n /\r\n @Prop()\r\n roleAlert?: boolean;\r\n\r\n private static statusMap = new Map<string, string>([\r\n [\"success\", \"Gelukt\"],\r\n [\"info\", \"Opmerking\"],\r\n [\"warning\", \"Waarschuwing\"],\r\n [\"error\", \"Fout\"],\r\n ]);\r\n\r\n render() {\r\n const status = Alert.statusMap.get(this.status);\r\n if (!status) {\r\n throw new Error(`Invalid status ${this.status}`);\r\n }\r\n\r\n return (\r\n <div class={clsx(\"alert\", `alert-${this.status}`)} role={this.roleAlert ? \"alert\" : undefined}>\r\n <dso-icon icon={\"status-\" + this.status}></dso-icon>\r\n <span class=\"sr-only\">{status}:</span>\r\n <slot></slot>\r\n </div>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n\r\ndso-annotation-button {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, ComponentInterface, Event, Prop, EventEmitter } from \"@stencil/core\";\r\n\r\nexport interface AnnotationButtonClickEvent {\r\n originalEvent: Event;\r\n open: boolean;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-annotation-button\",\r\n styleUrl: \"annotation-button.scss\",\r\n // No shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n /\r\n To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n /\r\n @Prop()\r\n identifier!: string \| undefined;\r\n\r\n /\r\n Set to true when the annotation is open.\r\n /\r\n @Prop()\r\n open = false;\r\n\r\n /\r\n Emitted when user activates the button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<AnnotationButtonClickEvent>;\r\n\r\n private handleClick = (e: MouseEvent) => {\r\n this.dsoClick.emit({ originalEvent: e, open: !this.open });\r\n };\r\n\r\n render() {\r\n return (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n aria-controls={this.identifier}\r\n aria-expanded={this.open.toString()}\r\n onClick={this.handleClick}\r\n >\r\n <dso-icon icon=\"label\"></dso-icon>\r\n <span class=\"sr-only\">Toelichting bekijken</span>\r\n </button>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-badge {\r\n @include badge.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-badge\",\r\n styleUrl: \"badge.scss\",\r\n shadow: true,\r\n})\r\nexport class Badge {\r\n /\r\n The status of the Badge.\r\n /\r\n @Prop()\r\n status?: \"primary\" \| \"success\" \| \"info\" \| \"warning\" \| \"danger\" \| \"error\" \| \"outline\" \| \"attention\";\r\n\r\n render() {\r\n return (\r\n <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n <slot></slot>\r\n </span>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-width: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-width: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { debounce } from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150)\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement \| undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /\r\n For compact Label\r\n /\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /\r\n Shows a button that can be used to remove the Label.\r\n /\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /\r\n The status of this Label.\r\n /\r\n @Prop()\r\n status?: \"primary\" \| \"info\" \| \"success\" \| \"warning\" \| \"danger\" \| \"error\" \| \"bright\" \| \"attention\";\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /\r\n Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n /\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n /\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /* The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. /\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force \|\| !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover \|\| this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","export function getNodeName(node: Node): string {\r\n if (node instanceof Element) {\r\n return node.localName;\r\n }\r\n\r\n if (node.nodeName.includes(\":\")) {\r\n return node.nodeName.substring(node.nodeName.indexOf(\":\") + 1);\r\n }\r\n\r\n return node.nodeName;\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentAlNode implements OzonContentNode {\r\n name = \"Al\";\r\n\r\n render(node: Element, { mapNodeToJsx, path }: OzonContentNodeContext) {\r\n const nestedAl = path.some((n) => {\r\n const nodeName = getNodeName(n);\r\n\r\n return nodeName === \"Al\" \|\| nodeName === \"Opschrift\";\r\n });\r\n\r\n const content = mapNodeToJsx(node.childNodes);\r\n\r\n return nestedAl ? <span role=\"paragraph\">{content}</span> : <p>{content}</p>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentBronNode implements OzonContentNode {\r\n name = \"Bron\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <span class=\"dso-ozon-bron\">{mapNodeToJsx(node.childNodes)}</span>;\r\n }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentDocumentNode implements OzonContentNode {\r\n name = \"#document\";\r\n\r\n render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentExtRefNode implements OzonContentNode {\r\n name = [\"ExtRef\", \"ExtIoRef\"];\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const href = node.tagName === \"ExtIoRef\" ? node.getAttribute(\"href\") : node.getAttribute(\"ref\");\r\n\r\n return (\r\n <a target=\"_blank\" rel=\"noopener noreferrer\" href={href ?? undefined}>\r\n <span class=\"sr-only\">opent in nieuw venster </span>\r\n {mapNodeToJsx(node.childNodes)}\r\n </a>\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentFallbackNode implements OzonContentNode {\r\n // This name does not match any elements\r\n name = [\"<fallback>\"];\r\n\r\n render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <span class={`fallback od-${getNodeName(node)}`}>{mapNodeToJsx(node.childNodes)}</span>;\r\n }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\ntype BijschriftProps = {\r\n bijschrift?: IBijschrift;\r\n bron?: ChildNode;\r\n mapNodeToJsx: (node: Node \| NodeList \| Node[]) => JSX.Element;\r\n};\r\n\r\ninterface IBijschrift {\r\n inhoud: NodeListOf<ChildNode>;\r\n locatie: string;\r\n}\r\n\r\nconst Bijschrift = ({ bijschrift, bron, mapNodeToJsx }: BijschriftProps): HTMLSpanElement => {\r\n return (\r\n <span class=\"figuur-bijschrift\">\r\n {bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud)}\r\n {bron && (\r\n <Fragment>\r\n {`${bijschrift ? \" \" : \"\"}(bron: `}\r\n {mapNodeToJsx(bron)})\r\n </Fragment>\r\n )}\r\n </span>\r\n );\r\n};\r\n\r\nexport class OzonContentFiguurNode implements OzonContentNode {\r\n name = [\"Figuur\"];\r\n\r\n setImageDimensions(imageElement: HTMLImageElement, schaal: number) {\r\n const { naturalHeight, naturalWidth } = imageElement;\r\n\r\n imageElement.height = naturalHeight (schaal / 100);\r\n imageElement.width = naturalWidth * (schaal / 100);\r\n }\r\n\r\n onImageLoad(event: Event, schaal?: number) {\r\n if (event.target instanceof HTMLImageElement && schaal) {\r\n this.setImageDimensions(event.target, schaal);\r\n }\r\n }\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const childNodes = Array.from(node.childNodes);\r\n const titel = childNodes.find((n) => getNodeName(n) === \"Titel\")?.textContent;\r\n const bron = childNodes.find((n) => getNodeName(n) === \"Bron\");\r\n\r\n const illustratieNode = childNodes.find((n) => getNodeName(n) === \"Illustratie\");\r\n const bijschriftNode = childNodes.find((n) => getNodeName(n) === \"Bijschrift\");\r\n\r\n if (illustratieNode instanceof Element) {\r\n const illustratie = {\r\n naam: illustratieNode.getAttribute(\"naam\"),\r\n breedte: illustratieNode.getAttribute(\"breedte\"),\r\n hoogte: illustratieNode.getAttribute(\"hoogte\"),\r\n uitlijning: illustratieNode.getAttribute(\"uitlijning\"),\r\n alt: illustratieNode.getAttribute(\"alt\"),\r\n schaal: illustratieNode.getAttribute(\"schaal\"),\r\n };\r\n\r\n const bijschrift =\r\n bijschriftNode instanceof Element\r\n ? {\r\n inhoud: bijschriftNode.childNodes,\r\n locatie: bijschriftNode.getAttribute(\"locatie\") ?? \"onder\",\r\n }\r\n : undefined;\r\n\r\n return (\r\n <div class={`dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : \"onder\"}`}>\r\n {titel && <span class=\"figuur-titel\">{titel}</span>}\r\n {bijschrift?.locatie === \"boven\" && (\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n )}\r\n <dso-image-overlay>\r\n {titel && (\r\n <div slot=\"titel\">\r\n <span>{titel}</span>\r\n </div>\r\n )}\r\n <img\r\n src={illustratie.naam ?? undefined}\r\n alt={illustratie.alt ?? titel ?? illustratie.naam ?? undefined}\r\n onLoad={(event: Event) => this.onImageLoad(event, Number(illustratie.schaal))}\r\n />\r\n {(bijschrift \|\| bron) && (\r\n <div slot=\"bijschrift\">\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n </div>\r\n )}\r\n </dso-image-overlay>\r\n {(bijschrift?.locatie === \"onder\" \|\| (!bijschrift && bron)) && (\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n )}\r\n </div>\r\n );\r\n }\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInhoudNode implements OzonContentNode {\r\n name = [\"Inhoud\", \"ContainerBlocksType\", \"BlockMixedcontentMetMaximaleInlinesMarkersPopupsType\"];\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <div class=\"dso-rich-content\">{mapNodeToJsx(node.childNodes)}</div>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineTekstAfbeeldingNode implements OzonContentNode {\r\n name = [\"InlineTekstAfbeelding\", \"Illustratie\"];\r\n\r\n render(node: Element) {\r\n return (\r\n <img\r\n src={node.getAttribute(\"naam\") ?? undefined}\r\n alt={node.getAttribute(\"naam\") ?? undefined}\r\n height={node.getAttribute(\"hoogte\") ?? undefined}\r\n width={node.getAttribute(\"breedte\") ?? undefined}\r\n />\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineNodes implements OzonContentNode {\r\n name = [\"sub\", \"sup\", \"strong\", \"b\", \"u\", \"i\", \"br\"];\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n if (node.localName === \"br\") {\r\n return <br />;\r\n }\r\n\r\n const Tag = node.localName;\r\n\r\n return <Tag>{mapNodeToJsx(node.childNodes)}</Tag>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntIoRefNode implements OzonContentNode {\r\n name = \"IntIoRef\";\r\n\r\n render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n const ref = node.getAttribute(\"ref\");\r\n if (!ref) {\r\n return mapNodeToJsx(node.childNodes);\r\n }\r\n\r\n const intRefOnClick = (event: MouseEvent) => {\r\n event.preventDefault();\r\n\r\n const target = event.currentTarget;\r\n if (!(target instanceof HTMLAnchorElement)) {\r\n return;\r\n }\r\n\r\n const { href } = target;\r\n\r\n emitAnchorClick({\r\n node: this.name,\r\n href,\r\n documentComponent: ref,\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n return (\r\n <a href={`#${ref}`} onClick={intRefOnClick}>\r\n {mapNodeToJsx(node.childNodes)}\r\n </a>\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntRefNode implements OzonContentNode {\r\n name = \"IntRef\";\r\n\r\n render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n const ref = node.getAttribute(\"ref\");\r\n if (!ref) {\r\n return mapNodeToJsx(node.childNodes);\r\n }\r\n\r\n const intRefOnClick = (event: MouseEvent) => {\r\n event.preventDefault();\r\n\r\n const target = event.currentTarget;\r\n if (!(target instanceof HTMLAnchorElement)) {\r\n return;\r\n }\r\n\r\n const { href } = target;\r\n\r\n emitAnchorClick({\r\n node: this.name,\r\n href,\r\n documentComponent: ref,\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n return (\r\n <a href={`#${ref}`} onClick={intRefOnClick}>\r\n {mapNodeToJsx(node.childNodes)}\r\n </a>\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentLijstNode implements OzonContentNode {\r\n name = \"Lijst\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const childNodes = Array.from(node.childNodes);\r\n const aanhef = childNodes.find((n) => getNodeName(n) === \"Lijstaanhef\");\r\n const sluiting = childNodes.find((n) => getNodeName(n) === \"Lijstsluiting\");\r\n const listItems = childNodes.filter((n) => getNodeName(n) === \"Li\");\r\n\r\n return (\r\n <div class=\"dso-ozon-lijst od-Lijst\">\r\n {aanhef && mapNodeToJsx(aanhef)}\r\n <ul class={node.getAttribute(\"type\") ?? \"\"}>\r\n {listItems.map((item) => {\r\n const itemNodes = Array.from(item.childNodes);\r\n const liNummer = itemNodes.find((n) => getNodeName(n) === \"LiNummer\")?.childNodes;\r\n\r\n return (\r\n <li class=\"od-Li\">\r\n {liNummer && <span class=\"od-LiNummer\">{mapNodeToJsx(liNummer)}</span>}\r\n {mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== \"LiNummer\"))}\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n {sluiting && mapNodeToJsx(sluiting)}\r\n </div>\r\n );\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNieuweTekstNode implements OzonContentNode {\r\n name = \"NieuweTekst\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <ins>{mapNodeToJsx(node.childNodes)}</ins>;\r\n }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNootNode implements OzonContentNode {\r\n name = \"Noot\";\r\n\r\n handles = [\"NootNummer\"];\r\n\r\n identify(): string \| undefined {\r\n return \"Noot\";\r\n }\r\n\r\n render(node: Element, { mapNodeToJsx, state: openNoteId, setState }: OzonContentNodeContext<string \| undefined>) {\r\n const noteId = node.getAttribute(\"id\");\r\n if (!noteId) {\r\n console.error(\"Noot node without id\", node);\r\n\r\n return <Fragment />;\r\n }\r\n\r\n const noteControlsId = `dso-ozon-note-${noteId}`;\r\n\r\n const childNodes = Array.from(node.childNodes);\r\n const nootNummer = childNodes.find((n) => getNodeName(n) === \"NootNummer\")?.textContent ?? noteId;\r\n\r\n return (\r\n <>\r\n <sup>\r\n <button\r\n type=\"button\"\r\n class=\"toggle-note\"\r\n aria-describedby={noteControlsId}\r\n onClick={() => setState?.(openNoteId === noteId ? undefined : noteId)}\r\n onBlur={() => setState?.(undefined)}\r\n aria-expanded={openNoteId === noteId ? \"true\" : \"false\"}\r\n >\r\n {nootNummer}\r\n </button>\r\n </sup>\r\n <dso-tooltip active={openNoteId === noteId} id={noteControlsId} stateless descriptive>\r\n <span role=\"section\">{mapNodeToJsx(Array.from(node.querySelectorAll(\":scope > Al\")))}</span>\r\n </dso-tooltip>\r\n </>\r\n );\r\n }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentOpschriftNode implements OzonContentNode {\r\n name = \"Opschrift\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n }\r\n}\r\n","import { Colspecs } from \"./colspec.interface\";\r\n\r\nexport function mapColspecs(count: number, nodeList: NodeListOf<Element>): Colspecs {\r\n const elements = Array.from(nodeList);\r\n const totalWidth = getTotalWidth(elements);\r\n\r\n return {\r\n totalWidth,\r\n count,\r\n columns: elements.map((element, index) => {\r\n const colNumber = element.getAttribute(\"colnum\");\r\n\r\n return {\r\n name: element.getAttribute(\"colname\") ?? \"\",\r\n number: colNumber ? parseInt(colNumber, 10) : index + 1,\r\n width: getWidth(totalWidth, element),\r\n };\r\n }),\r\n };\r\n}\r\n\r\nfunction getTotalWidth(elements: Element[]): number {\r\n return elements.reduce((totalWidth, element) => {\r\n const width = element.getAttribute(\"colwidth\")?.replace(/[^0-9]/, \"\") ?? \"\";\r\n const colWidth = parseInt(width, 10);\r\n\r\n return totalWidth + (isNaN(colWidth) ? 0 : colWidth);\r\n }, 0);\r\n}\r\n\r\nfunction getWidth(totalWidth: number, element: Element): string \| undefined {\r\n const width = element.getAttribute(\"colwidth\");\r\n\r\n if (!width) {\r\n return undefined;\r\n }\r\n\r\n if (width === \"\") {\r\n return \"100%\";\r\n }\r\n\r\n if (width.includes(\"\") \|\| width.match(/^[\\d+]$/)) {\r\n const colWidth = parseInt(width.replace(/[^0-9]/, \"\"), 10);\r\n\r\n return `${Math.round((colWidth / totalWidth) * 100)}%`;\r\n }\r\n\r\n return width;\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nexport const Colgroup: FunctionalComponent<{ colspecs: Colspecs }> = ({ colspecs }) =>\r\n colspecs.columns.length > 0 ? (\r\n <colgroup>\r\n {colspecs.columns.map((colspec) => (\r\n <col style={{ width: colspec.width }} />\r\n ))}\r\n </colgroup>\r\n ) : (\r\n <Fragment />\r\n );\r\n","import { FunctionalComponent } from \"@stencil/core\";\r\nimport { h, JSXBase } from \"@stencil/core/internal\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nfunction getData(cell: Element) {\r\n return {\r\n moreRows: cell.getAttribute(\"morerows\"),\r\n nameStart: cell.getAttribute(\"namest\"),\r\n nameEnd: cell.getAttribute(\"nameend\"),\r\n };\r\n}\r\n\r\nfunction getColspan({ columns }: Colspecs, nameStart: string, nameEnd: string): number \| undefined {\r\n const colspecStart = columns.find((c) => c.name === nameStart);\r\n const colspecEnd = columns.find((c) => c.name === nameEnd);\r\n if (!colspecStart \|\| !colspecEnd) {\r\n return undefined;\r\n }\r\n\r\n const colspan = colspecEnd.number - colspecStart.number + 1;\r\n\r\n return colspan === 1 ? undefined : colspan;\r\n}\r\n\r\nexport const Cell: FunctionalComponent<{\r\n context: OzonContentNodeContext;\r\n colspecs: Colspecs \| undefined;\r\n cell: Element;\r\n}> = ({ context: { mapNodeToJsx }, colspecs, cell }) => {\r\n const { moreRows, nameStart, nameEnd } = getData(cell);\r\n\r\n const td: JSXBase.TdHTMLAttributes<HTMLTableCellElement> = {\r\n rowSpan: moreRows ? parseInt(moreRows, 10) + 1 : undefined,\r\n colSpan: colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined,\r\n };\r\n\r\n return <td {...td}>{mapNodeToJsx(cell.childNodes)}</td>;\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\nimport { Cell } from \"./table-cell\";\r\n\r\nexport const Rows: FunctionalComponent<{\r\n context: OzonContentNodeContext;\r\n colspecs: Colspecs \| undefined;\r\n rows: Element[];\r\n}> = ({ context, colspecs, rows }) => {\r\n return (\r\n <>\r\n {rows.map((row) => (\r\n <tr>\r\n {Array.from(row.children).map((cell) => (\r\n <Cell cell={cell} colspecs={colspecs} context={context} />\r\n ))}\r\n </tr>\r\n ))}\r\n </>\r\n );\r\n};\r\n","import { h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getNodeName } from \"../../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../../ozon-content-node.interface\";\r\n\r\nimport { mapColspecs } from \"./colspec/colspec-mapper\";\r\nimport { Colgroup } from \"./table-colgroup\";\r\nimport { Rows } from \"./table-rows\";\r\n\r\nfunction mapData(node: Element) {\r\n const tgroup = node.querySelector(\":scope > tgroup\");\r\n const colAttribute = tgroup?.getAttribute(\"cols\") ?? undefined;\r\n const columnCount = colAttribute ? parseInt(colAttribute, 10) : undefined;\r\n\r\n return {\r\n caption: node.querySelector(\":scope > title\")?.textContent ?? undefined,\r\n colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(\":scope > colspec\")) : undefined,\r\n headRows: Array.from(node.querySelectorAll(\":scope > tgroup > thead > row\")),\r\n bodyRows: Array.from(node.querySelectorAll(\":scope > tgroup > tbody > row\")),\r\n editAction: node.getAttribute(\"wijzigactie\"),\r\n };\r\n}\r\n\r\nexport class OzonContentTableNode implements OzonContentNode {\r\n name = \"table\";\r\n\r\n handles = [\"title\", \"tgroup\", \"colspec\", \"thead\", \"tbody\", \"row\", \"cell\"];\r\n\r\n id = uuidv4();\r\n\r\n render(node: Element, context: OzonContentNodeContext) {\r\n const { caption, colspecs, headRows, bodyRows, editAction } = mapData(node);\r\n\r\n const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === \"Bron\");\r\n\r\n return (\r\n <dso-table>\r\n <table\r\n class={clsx(\"table dso-table-vertical-lines\", {\r\n \"dso-del\": editAction === \"verwijder\",\r\n \"dso-ins\": editAction === \"voegtoe\",\r\n })}\r\n {...(bron ? { \"aria-describedby\": this.id } : {})}\r\n >\r\n {caption && <caption>{caption}</caption>}\r\n {colspecs && <Colgroup colspecs={colspecs} />}\r\n {headRows.length > 0 && (\r\n <thead>\r\n <Rows rows={headRows} colspecs={colspecs} context={context}></Rows>\r\n </thead>\r\n )}\r\n {bodyRows.length > 0 && (\r\n <tbody>\r\n <Rows rows={bodyRows} colspecs={colspecs} context={context}></Rows>\r\n </tbody>\r\n )}\r\n </table>\r\n {bron && <div id={this.id}>{context.mapNodeToJsx(bron)}</div>}\r\n </dso-table>\r\n );\r\n }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentTextNode implements OzonContentNode {\r\n name = \"#text\";\r\n\r\n render(node: Node) {\r\n return <Fragment>{node.textContent}</Fragment>;\r\n }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentVerwijderdeTekstNode implements OzonContentNode {\r\n name = \"VerwijderdeTekst\";\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n return <del>{mapNodeToJsx(node.childNodes)}</del>;\r\n }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"./get-node-name.function\";\r\nimport { OzonContentAlNode } from \"./nodes/al.node\";\r\nimport { OzonContentBronNode } from \"./nodes/bron.node\";\r\nimport { OzonContentDocumentNode } from \"./nodes/document.node\";\r\nimport { OzonContentExtRefNode } from \"./nodes/ext-ref.node\";\r\nimport { OzonContentFallbackNode } from \"./nodes/fallback.node\";\r\nimport { OzonContentFiguurNode } from \"./nodes/figuur.node\";\r\nimport { OzonContentInhoudNode } from \"./nodes/inhoud.node\";\r\nimport { OzonContentInlineTekstAfbeeldingNode } from \"./nodes/inline-tekst-afbeelding.node\";\r\nimport { OzonContentInlineNodes } from \"./nodes/inline.nodes\";\r\nimport { OzonContentIntIoRefNode } from \"./nodes/int-io-ref.node\";\r\nimport { OzonContentIntRefNode } from \"./nodes/int-ref.node\";\r\nimport { OzonContentLijstNode } from \"./nodes/lijst.node\";\r\nimport { OzonContentNieuweTekstNode } from \"./nodes/nieuwe-tekst.node\";\r\nimport { OzonContentNootNode } from \"./nodes/noot.node\";\r\nimport { OzonContentOpschriftNode } from \"./nodes/opschrift.node\";\r\nimport { OzonContentTableNode } from \"./nodes/table.node\";\r\nimport { OzonContentTextNode } from \"./nodes/text.node\";\r\nimport { OzonContentVerwijderdeTekstNode } from \"./nodes/verwijderde-tekst.node\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentNode } from \"./ozon-content-node.interface\";\r\n\r\nexport class Mapper {\r\n private cache: { xml: string; document: Document } \| undefined;\r\n\r\n private mappers: OzonContentNode[] = [\r\n new OzonContentTextNode(),\r\n new OzonContentDocumentNode(),\r\n new OzonContentInhoudNode(),\r\n new OzonContentOpschriftNode(),\r\n new OzonContentIntRefNode(),\r\n new OzonContentExtRefNode(),\r\n new OzonContentAlNode(),\r\n new OzonContentInlineNodes(),\r\n new OzonContentInlineTekstAfbeeldingNode(),\r\n new OzonContentNootNode(),\r\n new OzonContentTableNode(),\r\n new OzonContentIntIoRefNode(),\r\n new OzonContentFiguurNode(),\r\n new OzonContentLijstNode(),\r\n new OzonContentBronNode(),\r\n new OzonContentNieuweTekstNode(),\r\n new OzonContentVerwijderdeTekstNode(),\r\n ];\r\n\r\n private skip = this.mappers.reduce<string[]>((t, m) => {\r\n if (m.handles) {\r\n t.push(...m.handles);\r\n }\r\n\r\n return t;\r\n }, []);\r\n\r\n private fallbackNode = new OzonContentFallbackNode();\r\n\r\n private domParser = new DOMParser();\r\n\r\n private findMapper(name: string): OzonContentNode \| undefined {\r\n if (this.skip.includes(name)) {\r\n return undefined;\r\n }\r\n\r\n return (\r\n this.mappers.find((m) => {\r\n if (Array.isArray(m.name)) {\r\n return m.name.includes(name);\r\n }\r\n\r\n return m.name === name;\r\n }) ?? this.fallbackNode\r\n );\r\n }\r\n\r\n mapNodeToJsx(node: Node \| Node[] \| NodeList, context: OzonContentContext, path: Node[]): JSX.Element {\r\n if (node instanceof NodeList) {\r\n return <Fragment>{Array.from(node).map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n }\r\n\r\n if (Array.isArray(node)) {\r\n return <Fragment>{node.map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n }\r\n\r\n const nodeName = getNodeName(node);\r\n const mapper = this.findMapper(nodeName);\r\n if (!mapper) {\r\n return <Fragment />;\r\n }\r\n\r\n const identity = mapper.identify?.(node);\r\n\r\n const state = identity ? context.state[identity] : undefined;\r\n const setState = identity ? (s: unknown) => context.setState({ ...context.state, [identity]: s }) : undefined;\r\n\r\n return mapper.render(node, {\r\n mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),\r\n emitAnchorClick: context.emitAnchorClick,\r\n setState,\r\n state,\r\n path,\r\n });\r\n }\r\n\r\n transform(xml: string, context: OzonContentContext): JSX.Element {\r\n if (!xml) {\r\n return <Fragment />;\r\n }\r\n\r\n if (!this.cache \|\| this.cache.xml !== xml) {\r\n const document = this.domParser.parseFromString(xml, \"text/xml\");\r\n if (document.querySelector(\"html > body > parsererror\")) {\r\n console.error(document);\r\n\r\n return <Fragment />;\r\n }\r\n\r\n this.cache = { xml, document };\r\n }\r\n\r\n const xmlDocument = this.cache.document;\r\n\r\n return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);\r\n }\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/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n\r\n:host(:not([inline])) {\r\n display: block;\r\n}\r\n\r\n:host([inline]) {\r\n display: inline;\r\n}\r\n\r\n:host([deleted]) {\r\n * {\r\n text-decoration: line-through !important;\r\n }\r\n}\r\n\r\n:host([interactive]) {\r\n @include anchor.root($is-html-a-element: false);\r\n\r\n color: colors.$bosgroen;\r\n font-weight: 600;\r\n text-decoration: none;\r\n}\r\n\r\n:host([interactive=\"sub\"]) {\r\n color: colors.$grijs-90;\r\n}\r\n\r\n.sr-only,\r\n.deleted-start,\r\n.deleted-end {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton.toggle-note {\r\n @include button.tertiary($modifiers: false);\r\n}\r\n\r\nspan[role=\"section\"],\r\nspan[role=\"paragraph\"] {\r\n display: block;\r\n}\r\n\r\n:host(:not([inline])) .fallback {\r\n display: block;\r\n}\r\n\r\na {\r\n @include anchor.root();\r\n}\r\n\r\n// Styling below copied from DSO Viewer 20211011\r\n\r\n.od-Term {\r\n font-weight: 700;\r\n}\r\n\r\n.od-Definitie,\r\n.od-Tussenkop {\r\n font-style: italic;\r\n}\r\n\r\n.od-Inhoud,\r\n.od-Inhoud > .od-Lijst,\r\n.od-IntIoRef,\r\n.od-Lidnr,\r\n.od-LiNr,\r\n.od-Opschrift,\r\n.od-Tussenkop {\r\n display: inline;\r\n}\r\n\r\n.od-Al {\r\n margin-bottom: 0.75em;\r\n}\r\n\r\n.od-IntIoRef {\r\n border-bottom: 1px dotted;\r\n}\r\n\r\n.dso-ozon-bron {\r\n font-style: italic;\r\n font-size: 0.75rem;\r\n}\r\n\r\n.dso-ozon-figuur {\r\n margin-bottom: units.$u2;\r\n\r\n .figuur-bijschrift {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n }\r\n\r\n &.bijschrift-boven {\r\n .figuur-bijschrift {\r\n padding-bottom: 0.25rem;\r\n }\r\n }\r\n\r\n &.bijschrift-onder {\r\n .figuur-bijschrift {\r\n padding-top: 0.25rem;\r\n }\r\n }\r\n\r\n .figuur-titel {\r\n color: colors.$mauve;\r\n display: block;\r\n font-weight: 500;\r\n padding-bottom: 0.5rem;\r\n }\r\n}\r\n\r\n.dso-ozon-lijst {\r\n span.od-Lijstaanhef,\r\n span.od-Lijstsluiting {\r\n margin-bottom: units.$ru2;\r\n }\r\n\r\n ul {\r\n &.expliciet {\r\n list-style: none;\r\n\r\n > .od-Li {\r\n position: relative;\r\n\r\n > span.od-LiNummer {\r\n position: absolute;\r\n left: units.$u6 * -1 + 4;\r\n text-align: right;\r\n width: units.$u5;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.od-Tabel thead {\r\n font-weight: 600;\r\n}\r\n\r\n.od-Kadertekst {\r\n border: 1px solid #e5e5e5;\r\n margin-bottom: 1rem;\r\n padding: 1rem;\r\n}\r\n\r\n.dso-del {\r\n background-color: colors.$danger-bg-color;\r\n color: colors.$zwart;\r\n text-decoration: line-through;\r\n\r\n a {\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n.dso-ins {\r\n background-color: colors.$success-bg-color;\r\n box-shadow: insert.$insert-box-shadow;\r\n color: colors.$zwart;\r\n\r\n a {\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n.dso-rich-content {\r\n @include rich-content.children();\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Host, JSX } from \"@stencil/core\";\r\nimport { isTabbable } from \"tabbable\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentAnchorClick, OzonContentClick } from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\n@Component({\r\n tag: \"dso-ozon-content\",\r\n styleUrl: \"ozon-content.scss\",\r\n shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n /*\r\n The XML to be rendered.\r\n /\r\n @Prop()\r\n content: string \| undefined;\r\n\r\n /\r\n Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n /\r\n @Prop({ reflect: true })\r\n inline = false;\r\n\r\n /\r\n Marks content as deleted using visual and accessible clues.\r\n /\r\n @Prop({ reflect: true })\r\n deleted = false;\r\n\r\n /\r\n Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\r\n \r\n Do not use this without an accessible companion element! `interactive` is only\r\n * meant to ease the use of the companion element for mouse/touch users.\r\n \r\n * `true`: Interactive anchor-look-alike\r\n * * `\"sub\"`: Interactive anchor-look-alike for sub navigation\r\n * * `false \| undefined`: Disabled\r\n /\r\n @Prop({ reflect: true })\r\n interactive: \"sub\" \| \"\" \| boolean = false;\r\n\r\n @State()\r\n state: OzonContentNodeState = {};\r\n\r\n /\r\n Emitted when `<a>` is clicked.\r\n /\r\n @Event()\r\n dsoAnchorClick!: EventEmitter<OzonContentAnchorClick>;\r\n\r\n /\r\n These events are only emitted when the component is `interactive`.\r\n */\r\n @Event()\r\n dsoClick!: EventEmitter<OzonContentClick>;\r\n\r\n @Element()\r\n host!: HTMLDsoOzonContentElement;\r\n\r\n private mapper = new Mapper();\r\n\r\n private handleHostOnClick(e: UIEvent) {\r\n // '' is `true`: <dso-ozon-content interactive>\r\n if (this.interactive !== \"\" && !this.interactive) {\r\n return;\r\n }\r\n\r\n const doIt =\r\n e\r\n .composedPath()\r\n .find(\r\n (eventTarget) => eventTarget === this.host \|\| (eventTarget instanceof HTMLElement && isTabbable(eventTarget))\r\n ) === this.host;\r\n\r\n if (doIt) {\r\n this.dsoClick.emit({ originalEvent: e });\r\n }\r\n }\r\n\r\n render(): JSX.Element {\r\n const context: OzonContentContext = {\r\n state: this.state,\r\n setState: (state) => (this.state = state),\r\n emitAnchorClick: this.dsoAnchorClick.emit,\r\n };\r\n\r\n const transformed = this.mapper.transform(this.content ?? \"\", context);\r\n\r\n if (this.deleted) {\r\n return (\r\n <section>\r\n <slot name=\"prefix\" />\r\n <span class=\"deleted-start\">Begin verwijderd element</span>\r\n {transformed}\r\n <span class=\"deleted-end\">Einde verwijderd element</span>\r\n <slot name=\"suffix\" />\r\n </section>\r\n );\r\n }\r\n\r\n return (\r\n <Host onClick={(e: UIEvent) => this.handleHostOnClick(e)}>\r\n <slot name=\"prefix\" />\r\n {transformed}\r\n <slot name=\"suffix\" />\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}

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

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

package/dist/dso-toolkit/{p-422bcf93.entry.js.map → p-1fe715e4.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["mapControlsCss","transitionDuration","MapControls","this","panelTitle","_MapControls_closeButtonElement","set","_MapControls_toggleButtonElement","open","watchOpen","hideContent","setTimeout","_a","__classPrivateFieldGet","focus","async","e","dsoToggle","emit","originalEvent","render","h","Host","type","id","class","onClick","toggleVisibility","ref","element","__classPrivateFieldSet","icon","dsoZoomIn","disabled","disableZoom","dsoZoomOut","hidden"],"sources":["./src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","./src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n bottom: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n width: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n top: units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n position: absolute;\r\n right: calc(100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size});\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n top: core-map-controls-variables.$controls-margin;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n @include button.map-focus();\r\n\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n flex: 0 0 100%;\r\n height: core-map-controls-variables.$zoom-button-size;\r\n min-width: auto;\r\n width: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-bottom-left-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n padding: 0;\r\n position: absolute;\r\n right: core-map-controls-variables.$controls-margin;\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .toggle-visibility-button {\r\n height: units.$u5;\r\n margin-right: 0;\r\n min-width: auto;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n width: units.$u5;\r\n\r\n dso-icon {\r\n margin-right: 0;\r\n }\r\n\r\n span {\r\n visibility: hidden;\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n top: units.$u9;\r\n }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n private panelTitle = \"Kaartlagen\";\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>Kaartlagen</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom in</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom uit</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.panelTitle}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>Verberg paneel {this.panelTitle}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAiB,~~6tjB~~,kwBCIvB,MAAMC,EAAqB,I,MAOdC,EAAW,M,0IACdC,KAAAC,WAAa,aAyErBC,EAAAC,IAAAH,UAAA,GACAI,EAAAD,IAAAH,UAAA,G,UApEO,M,6CAkCQA,KAAKK,I,CAGpBC,UAAUD,GACR,GAAIA,EAAM,CACRL,KAAKO,YAAc,MAEnBC,YAAW,SAAAC,EAAM,OAAAA,EAAAC,EAAAV,KAAIE,EAAA,QAAoB,MAAAO,SAAA,SAAAA,EAAEE,OAAO,GAAEb,E,KAC/C,CACLU,YAAW,K,MACTR,KAAKO,YAAc,MAEnBE,EAAAC,EAAAV,KAAII,EAAA,QAAqB,MAAAK,SAAA,SAAAA,EAAEE,OAAO,GACjCb,E,EAWPc,uBAAuBC,GACrBb,KAAKK,MAAQL,KAAKK,KAElBL,KAAKc,UAAUC,KAAK,CAClBC,cAAeH,EACfR,KAAML,KAAKK,M,CAOfY,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,UACEE,KAAK,SACLC,GAAG,2BACHC,MAAM,2BACNC,QAAUV,GAAMb,KAAKwB,iBAAiBX,GACtCY,IAAMC,GAAaC,EAAA3B,KAAII,EAAwBsB,EAAO,MAEtDR,EAAA,YAAUU,KAAK,WACfV,EAAA,2BAEFA,EAAA,OAAKI,MAAM,gBACTJ,EAAA,UACEE,KAAK,SACLG,QAAUV,GAAMb,KAAK6B,UAAUd,KAAKF,GACpCiB,SAAU9B,KAAK+B,cAAgB,MAAQ/B,KAAK+B,cAAgB,QAE5Db,EAAA,uBACAA,EAAA,YAAUU,KAAK,UAEjBV,EAAA,UACEE,KAAK,SACLG,QAAUV,GAAMb,KAAKgC,WAAWjB,KAAKF,GACrCiB,SAAU9B,KAAK+B,cAAgB,OAAS/B,KAAK+B,cAAgB,QAE7Db,EAAA,wBACAA,EAAA,YAAUU,KAAK,YAGnBV,EAAA,WAASe,OAAQjC,KAAKO,aACpBW,EAAA,cACEA,EAAA,UAAKlB,KAAKC,YACViB,EAAA,UACEE,KAAK,SACLE,MAAM,eACNC,QAAUV,GAAMb,KAAKwB,iBAAiBX,GACtCY,IAAMC,GAAaC,EAAA3B,KAAIE,EAAuBwB,EAAO,MAErDR,EAAA,8BAAsBlB,KAAKC,YAC3BiB,EAAA,YAAUU,KAAK,YAGnBV,EAAA,sBACEA,EAAA,OAAKI,MAAM,WACTJ,EAAA,gB"}
1	+ {"version":3,"names":["mapControlsCss","transitionDuration","MapControls","this","panelTitle","_MapControls_closeButtonElement","set","_MapControls_toggleButtonElement","open","watchOpen","hideContent","setTimeout","_a","__classPrivateFieldGet","focus","async","e","dsoToggle","emit","originalEvent","render","h","Host","type","id","class","onClick","toggleVisibility","ref","element","__classPrivateFieldSet","icon","dsoZoomIn","disabled","disableZoom","dsoZoomOut","hidden"],"sources":["./src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","./src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n bottom: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n width: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n top: units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n position: absolute;\r\n right: calc(100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size});\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n top: core-map-controls-variables.$controls-margin;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n @include button.map-focus();\r\n\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n flex: 0 0 100%;\r\n height: core-map-controls-variables.$zoom-button-size;\r\n min-width: auto;\r\n width: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-bottom-left-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n padding: 0;\r\n position: absolute;\r\n right: core-map-controls-variables.$controls-margin;\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .toggle-visibility-button {\r\n height: units.$u5;\r\n margin-right: 0;\r\n min-width: auto;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n width: units.$u5;\r\n\r\n dso-icon {\r\n margin-right: 0;\r\n }\r\n\r\n span {\r\n visibility: hidden;\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n top: units.$u9;\r\n }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n private panelTitle = \"Kaartlagen\";\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>Kaartlagen</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom in</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom uit</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.panelTitle}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>Verberg paneel {this.panelTitle}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAiB,u5jB,kwBCIvB,MAAMC,EAAqB,I,MAOdC,EAAW,M,0IACdC,KAAAC,WAAa,aAyErBC,EAAAC,IAAAH,UAAA,GACAI,EAAAD,IAAAH,UAAA,G,UApEO,M,6CAkCQA,KAAKK,I,CAGpBC,UAAUD,GACR,GAAIA,EAAM,CACRL,KAAKO,YAAc,MAEnBC,YAAW,SAAAC,EAAM,OAAAA,EAAAC,EAAAV,KAAIE,EAAA,QAAoB,MAAAO,SAAA,SAAAA,EAAEE,OAAO,GAAEb,E,KAC/C,CACLU,YAAW,K,MACTR,KAAKO,YAAc,MAEnBE,EAAAC,EAAAV,KAAII,EAAA,QAAqB,MAAAK,SAAA,SAAAA,EAAEE,OAAO,GACjCb,E,EAWPc,uBAAuBC,GACrBb,KAAKK,MAAQL,KAAKK,KAElBL,KAAKc,UAAUC,KAAK,CAClBC,cAAeH,EACfR,KAAML,KAAKK,M,CAOfY,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,UACEE,KAAK,SACLC,GAAG,2BACHC,MAAM,2BACNC,QAAUV,GAAMb,KAAKwB,iBAAiBX,GACtCY,IAAMC,GAAaC,EAAA3B,KAAII,EAAwBsB,EAAO,MAEtDR,EAAA,YAAUU,KAAK,WACfV,EAAA,2BAEFA,EAAA,OAAKI,MAAM,gBACTJ,EAAA,UACEE,KAAK,SACLG,QAAUV,GAAMb,KAAK6B,UAAUd,KAAKF,GACpCiB,SAAU9B,KAAK+B,cAAgB,MAAQ/B,KAAK+B,cAAgB,QAE5Db,EAAA,uBACAA,EAAA,YAAUU,KAAK,UAEjBV,EAAA,UACEE,KAAK,SACLG,QAAUV,GAAMb,KAAKgC,WAAWjB,KAAKF,GACrCiB,SAAU9B,KAAK+B,cAAgB,OAAS/B,KAAK+B,cAAgB,QAE7Db,EAAA,wBACAA,EAAA,YAAUU,KAAK,YAGnBV,EAAA,WAASe,OAAQjC,KAAKO,aACpBW,EAAA,cACEA,EAAA,UAAKlB,KAAKC,YACViB,EAAA,UACEE,KAAK,SACLE,MAAM,eACNC,QAAUV,GAAMb,KAAKwB,iBAAiBX,GACtCY,IAAMC,GAAaC,EAAA3B,KAAIE,EAAuBwB,EAAO,MAErDR,EAAA,8BAAsBlB,KAAKC,YAC3BiB,EAAA,YAAUU,KAAK,YAGnBV,EAAA,sBACEA,EAAA,OAAKI,MAAM,WACTJ,EAAA,gB"}

package/dist/dso-toolkit/p-27dfadbf.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as n,h as t,F as o}from"./p-ce928197.js";import{c as e}from"./p-91963e3d.js";import"./p-5950644a.js";const r=":host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.wrapper {\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n visibility: hidden;\n width: 100%;\n}\n.wrapper.visible {\n visibility: visible;\n}\n\n.dimscreen {\n background-color: #000;\n height: 100%;\n opacity: 0.4;\n width: 100%;\n}\n\n.open-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n bottom: 16px;\n font-family: Asap, sans-serif;\n position: fixed;\n right: 16px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n outline-offset: 2px;\n}\n.open-button:active {\n outline: 0;\n}\n.open-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open-button:active {\n background-color: #173521;\n border-color: #173521;\n color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.open-button.dso-small {\n line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open-button:hover {\n cursor: pointer;\n}\n.open-button.open {\n display: none;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border-right: 0;\n border-top: 0;\n border-radius: 0 0 0 8px;\n height: 40px;\n min-width: 40px;\n padding: 0;\n position: fixed;\n right: 0;\n width: 40px;\n top: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close-button.dso-small {\n line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n height: 16px;\n width: 16px;\n}\n.close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n height: 16px;\n width: 16px;\n}\n.close-button dso-icon {\n margin-left: 0;\n margin-right: 0;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n cursor: pointer;\n}\n.close-button.close {\n display: none;\n}\n\n.iframe-container {\n background-color: #fff;\n border: 0;\n border-left: 1px solid #ccc;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n height: 100%;\n position: absolute;\n top: 0;\n transition: right 0.5s;\n}\n@media screen and (max-width: 480px) {\n .iframe-container {\n right: -320px;\n width: 320px;\n }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n .iframe-container {\n right: -480px;\n width: 480px;\n }\n}\n@media screen and (min-width: 768px) {\n .iframe-container {\n right: -640px;\n width: 640px;\n }\n}\n.iframe-container.open {\n right: 0;\n}\n\niframe {\n border: 0;\n height: 100%;\n width: 100%;\n}";const s=500;const i=class{constructor(t){n(this,t);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),s)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),s)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const t=document.querySelector("body");if(n==="open"){t===null\|\|t===void 0?void 0:t.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{t===null\|\|t===void 0?void 0:t.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,t;if(!this.panelWrapperElement){return}this.trap=e(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(t=this.closeButtonElement)!==null&&t!==void 0?t:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null\|\|n===void 0?void 0:n.deactivate();delete this.trap}}render(){return t(o,null,t("button",{type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},t("dso-icon",{icon:"help"}),t("span",null,this.label)),t("div",{id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},t("div",{class:"dimscreen",onClick:this.closeClick}),t("div",{class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?t("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):t("div",null)),t("button",{type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};i.style=r;export{i as dso_helpcenter_panel};
2	+ //# sourceMappingURL=p-27dfadbf.entry.js.map

package/dist/dso-toolkit/{p-b627d9ac.entry.js.map → p-27dfadbf.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["helpcenterPanelCss","maxCssTransitionMilliseconds","HelpcenterPanel","this","iframeLoaded","openClick","visibility","slideState","setTimeout","isOpen","loadIframe","closeClick","watchUrl","url","iframeUrl","watchIsOpen","body","document","querySelector","style","setProperty","removeProperty","keyDownListener","event","key","createTrap","panelWrapperElement","trap","createFocusTrap","allowOutsideClick","tabbableOptions","getShadowRoot","setReturnFocus","_a","openButtonElement","initialFocus","_b","closeButtonElement","activate","componentDidRender","deactivate","render","h","Fragment","type","onClick","class","ref","element","icon","label","id","role","src","tabindex","onLoad"],"sources":["./src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","./src/components/helpcenter-panel/helpcenter-panel.tsx"],"sourcesContent":["@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@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n height: 100%;\r\n left: 0;\r\n position: fixed;\r\n top: 0;\r\n visibility: hidden;\r\n width: 100%;\r\n\r\n &.visible {\r\n visibility: visible;\r\n }\r\n}\r\n\r\n.dimscreen {\r\n background-color: colors.$zwart;\r\n height: 100%;\r\n opacity: 0.4;\r\n width: 100%;\r\n}\r\n\r\n.open-button {\r\n @include button.primary($modifiers: false);\r\n\r\n border: 0;\r\n bottom: units.$u2;\r\n font-family: typography.$font-family-base;\r\n position: fixed;\r\n right: units.$u2;\r\n box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n\r\n &.open {\r\n display: none;\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.secondary($modifiers: false);\r\n\r\n border-right: 0;\r\n border-top: 0;\r\n border-radius: 0 0 0 units.$u1;\r\n height: units.$u5;\r\n min-width: units.$u5;\r\n padding: 0;\r\n position: fixed;\r\n right: 0;\r\n width: units.$u5;\r\n top: 0;\r\n\r\n dso-icon {\r\n margin-left: 0;\r\n margin-right: 0;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n &:hover,\r\n &:active,\r\n &:focus {\r\n cursor: pointer;\r\n }\r\n\r\n &.close {\r\n display: none;\r\n }\r\n}\r\n\r\n.iframe-container {\r\n background-color: colors.$wit;\r\n border: 0;\r\n border-left: 1px solid colors.$grijs-20;\r\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n transition: right 0.5s;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n right: -320px;\r\n width: 320px;\r\n }\r\n\r\n @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n right: -480px;\r\n width: 480px;\r\n }\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n right: -640px;\r\n width: 640px;\r\n }\r\n\r\n &.open {\r\n right: 0;\r\n }\r\n}\r\n\r\niframe {\r\n border: 0;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n tag: \"dso-helpcenter-panel\",\r\n styleUrl: \"helpcenter-panel.scss\",\r\n shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n private iframeUrl?: string;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private panelWrapperElement?: HTMLDivElement;\r\n\r\n private openButtonElement?: HTMLButtonElement;\r\n\r\n private closeButtonElement?: HTMLButtonElement;\r\n\r\n private iframeLoaded = false;\r\n\r\n /*\r\n The label on the help button that activates the Helpcenter.\r\n /\r\n @Prop()\r\n label = \"Hulp nodig\";\r\n\r\n /\r\n The URL that's loaded when the Helpcenter opens.\r\n */\r\n @Prop()\r\n url!: string;\r\n\r\n @State()\r\n visibility: \"visible\" \| \"hidden\" = \"hidden\";\r\n\r\n @State()\r\n isOpen: \"open\" \| \"close\" = \"close\";\r\n\r\n @State()\r\n slideState: \"open\" \| \"close\" = \"close\";\r\n\r\n @State()\r\n loadIframe = false;\r\n\r\n @Watch(\"url\")\r\n watchUrl(url: string) {\r\n if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n this.iframeUrl = url;\r\n }\r\n }\r\n\r\n @Watch(\"isOpen\")\r\n watchIsOpen(isOpen: \"open\" \| \"close\") {\r\n const body = document.querySelector(\"body\");\r\n\r\n if (isOpen === \"open\") {\r\n body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n if (this.iframeUrl !== this.url) {\r\n this.iframeUrl = this.url;\r\n }\r\n } else {\r\n body?.style.removeProperty(\"overflow\");\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n this.closeClick();\r\n }\r\n }\r\n\r\n private createTrap() {\r\n if (!this.panelWrapperElement) {\r\n return;\r\n }\r\n\r\n this.trap = createFocusTrap(this.panelWrapperElement, {\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n setReturnFocus: this.openButtonElement ?? false,\r\n initialFocus: this.closeButtonElement ?? false,\r\n }).activate();\r\n }\r\n\r\n private openClick = () => {\r\n this.visibility = \"visible\";\r\n this.slideState = \"open\";\r\n setTimeout(() => {\r\n this.isOpen = \"open\";\r\n });\r\n if (!this.loadIframe) {\r\n setTimeout(() => {\r\n this.loadIframe = true;\r\n }, maxCssTransitionMilliseconds);\r\n }\r\n };\r\n\r\n private closeClick = () => {\r\n this.isOpen = \"close\";\r\n this.slideState = \"close\";\r\n setTimeout(() => {\r\n this.visibility = \"hidden\";\r\n }, maxCssTransitionMilliseconds);\r\n };\r\n\r\n componentDidRender() {\r\n if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n this.createTrap();\r\n } else if (this.isOpen === \"close\" && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n type=\"button\"\r\n onClick={this.openClick}\r\n class={`open-button ${this.isOpen}`}\r\n aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n aria-haspopup=\"dialog\"\r\n aria-controls=\"dso-panel-wrapper\"\r\n ref={(element) => (this.openButtonElement = element)}\r\n >\r\n <dso-icon icon=\"help\"></dso-icon>\r\n <span>{this.label}</span>\r\n </button>\r\n <div\r\n id=\"dso-panel-wrapper\"\r\n class={`wrapper ${this.visibility}`}\r\n aria-label=\"helpcentrum\"\r\n role=\"dialog\"\r\n ref={(element) => (this.panelWrapperElement = element)}\r\n >\r\n <div class=\"dimscreen\" onClick={this.closeClick} />\r\n <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n {this.loadIframe ? (\r\n <iframe\r\n src={this.iframeUrl}\r\n tabindex=\"0\"\r\n onLoad={() => {\r\n this.createTrap();\r\n this.iframeLoaded = true;\r\n }}\r\n />\r\n ) : (\r\n <div />\r\n )}\r\n </div>\r\n <button\r\n type=\"button\"\r\n class={`close-button ${this.isOpen}`}\r\n onClick={this.closeClick}\r\n aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n aria-controls=\"dso-panel-wrapper\"\r\n ref={(element) => (this.closeButtonElement = element)}\r\n >\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"8GAAA,MAAMA,EAAqB,8sWCI3B,MAAMC,EAA+B,I,MAOxBC,EAAe,M,yBAWlBC,KAAAC,aAAe,MAsEfD,KAAAE,UAAY,KAClBF,KAAKG,WAAa,UAClBH,KAAKI,WAAa,OAClBC,YAAW,KACTL,KAAKM,OAAS,MAAM,IAEtB,IAAKN,KAAKO,WAAY,CACpBF,YAAW,KACTL,KAAKO,WAAa,IAAI,GACrBT,E,GAICE,KAAAQ,WAAa,KACnBR,KAAKM,OAAS,QACdN,KAAKI,WAAa,QAClBC,YAAW,KACTL,KAAKG,WAAa,QAAQ,GACzBL,EAA6B,E,WAlF1B,a,mCAS2B,S,YAGR,Q,gBAGI,Q,gBAGlB,K,CAGbW,SAASC,GACP,GAAIV,KAAKM,SAAW,QAAUN,KAAKW,YAAcD,EAAK,CACpDV,KAAKW,UAAYD,C,EAKrBE,YAAYN,GACV,MAAMO,EAAOC,SAASC,cAAc,QAEpC,GAAIT,IAAW,OAAQ,CACrBO,IAAI,MAAJA,SAAI,SAAJA,EAAMG,MAAMC,YAAY,WAAY,UAEpC,GAAIjB,KAAKW,YAAcX,KAAKU,IAAK,CAC/BV,KAAKW,UAAYX,KAAKU,G,MAEnB,CACLG,IAAI,MAAJA,SAAI,SAAJA,EAAMG,MAAME,eAAe,W,EAK/BC,gBAAgBC,GACd,GAAIA,EAAMC,MAAQ,UAAYrB,KAAKM,SAAW,OAAQ,CACpDN,KAAKQ,Y,EAIDc,a,QACN,IAAKtB,KAAKuB,oBAAqB,CAC7B,M,CAGFvB,KAAKwB,KAAOC,EAAgBzB,KAAKuB,oBAAqB,CACpDG,kBAAmB,KACnBC,gBAAiB,CACfC,cAAe,MAEjBC,gBAAgBC,EAAA9B,KAAK+B,qBAAiB,MAAAD,SAAA,EAAAA,EAAI,MAC1CE,cAAcC,EAAAjC,KAAKkC,sBAAkB,MAAAD,SAAA,EAAAA,EAAI,QACxCE,U,CAwBLC,qB,MACE,GAAIpC,KAAKM,SAAW,QAAUN,KAAKC,eAAiBD,KAAKwB,KAAM,CAC7DxB,KAAKsB,Y,MACA,GAAItB,KAAKM,SAAW,SAAWN,KAAKwB,KAAM,EAC/CM,EAAA9B,KAAKwB,QAAI,MAAAM,SAAA,SAAAA,EAAEO,oBAEJrC,KAAKwB,I,EAIhBc,SACE,OACEC,EAAAC,EAAA,KACED,EAAA,UACEE,KAAK,SACLC,QAAS1C,KAAKE,UACdyC,MAAO,eAAe3C,KAAKM,SAAQ,gBACpBN,KAAKM,SAAW,OAAS,OAAS,QAAO,gBAC1C,SAAQ,gBACR,oBACdsC,IAAMC,GAAa7C,KAAK+B,kBAAoBc,GAE5CN,EAAA,YAAUO,KAAK,SACfP,EAAA,YAAOvC,KAAK+C,QAEdR,EAAA,OACES,GAAG,oBACHL,MAAO,WAAW3C,KAAKG,aAAY,aACxB,cACX8C,KAAK,SACLL,IAAMC,GAAa7C,KAAKuB,oBAAsBsB,GAE9CN,EAAA,OAAKI,MAAM,YAAYD,QAAS1C,KAAKQ,aACrC+B,EAAA,OAAKI,MAAO,oBAAoB3C,KAAKI,aAAY,YAAY,UAC1DJ,KAAKO,WACJgC,EAAA,UACEW,IAAKlD,KAAKW,UACVwC,SAAS,IACTC,OAAQ,KACNpD,KAAKsB,aACLtB,KAAKC,aAAe,IAAI,IAI5BsC,EAAA,aAGJA,EAAA,UACEE,KAAK,SACLE,MAAO,gBAAgB3C,KAAKM,SAC5BoC,QAAS1C,KAAKQ,WAAU,gBACTR,KAAKM,SAAW,OAAS,OAAS,QAAO,gBAC1C,oBACdsC,IAAMC,GAAa7C,KAAKkC,mBAAqBW,GAE7CN,EAAA,YAAUO,KAAK,UACfP,EAAA,QAAMI,MAAM,WAAS,a"}
1	+ {"version":3,"names":["helpcenterPanelCss","maxCssTransitionMilliseconds","HelpcenterPanel","this","iframeLoaded","openClick","visibility","slideState","setTimeout","isOpen","loadIframe","closeClick","watchUrl","url","iframeUrl","watchIsOpen","body","document","querySelector","style","setProperty","removeProperty","keyDownListener","event","key","createTrap","panelWrapperElement","trap","createFocusTrap","allowOutsideClick","tabbableOptions","getShadowRoot","setReturnFocus","_a","openButtonElement","initialFocus","_b","closeButtonElement","activate","componentDidRender","deactivate","render","h","Fragment","type","onClick","class","ref","element","icon","label","id","role","src","tabindex","onLoad"],"sources":["./src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","./src/components/helpcenter-panel/helpcenter-panel.tsx"],"sourcesContent":["@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@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n height: 100%;\r\n left: 0;\r\n position: fixed;\r\n top: 0;\r\n visibility: hidden;\r\n width: 100%;\r\n\r\n &.visible {\r\n visibility: visible;\r\n }\r\n}\r\n\r\n.dimscreen {\r\n background-color: colors.$zwart;\r\n height: 100%;\r\n opacity: 0.4;\r\n width: 100%;\r\n}\r\n\r\n.open-button {\r\n @include button.primary($modifiers: false);\r\n\r\n border: 0;\r\n bottom: units.$u2;\r\n font-family: typography.$font-family-base;\r\n position: fixed;\r\n right: units.$u2;\r\n box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n\r\n &.open {\r\n display: none;\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.secondary($modifiers: false);\r\n\r\n border-right: 0;\r\n border-top: 0;\r\n border-radius: 0 0 0 units.$u1;\r\n height: units.$u5;\r\n min-width: units.$u5;\r\n padding: 0;\r\n position: fixed;\r\n right: 0;\r\n width: units.$u5;\r\n top: 0;\r\n\r\n dso-icon {\r\n margin-left: 0;\r\n margin-right: 0;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n &:hover,\r\n &:active,\r\n &:focus {\r\n cursor: pointer;\r\n }\r\n\r\n &.close {\r\n display: none;\r\n }\r\n}\r\n\r\n.iframe-container {\r\n background-color: colors.$wit;\r\n border: 0;\r\n border-left: 1px solid colors.$grijs-20;\r\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n transition: right 0.5s;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n right: -320px;\r\n width: 320px;\r\n }\r\n\r\n @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n right: -480px;\r\n width: 480px;\r\n }\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n right: -640px;\r\n width: 640px;\r\n }\r\n\r\n &.open {\r\n right: 0;\r\n }\r\n}\r\n\r\niframe {\r\n border: 0;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n tag: \"dso-helpcenter-panel\",\r\n styleUrl: \"helpcenter-panel.scss\",\r\n shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n private iframeUrl?: string;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private panelWrapperElement?: HTMLDivElement;\r\n\r\n private openButtonElement?: HTMLButtonElement;\r\n\r\n private closeButtonElement?: HTMLButtonElement;\r\n\r\n private iframeLoaded = false;\r\n\r\n /*\r\n The label on the help button that activates the Helpcenter.\r\n /\r\n @Prop()\r\n label = \"Hulp nodig\";\r\n\r\n /\r\n The URL that's loaded when the Helpcenter opens.\r\n */\r\n @Prop()\r\n url!: string;\r\n\r\n @State()\r\n visibility: \"visible\" \| \"hidden\" = \"hidden\";\r\n\r\n @State()\r\n isOpen: \"open\" \| \"close\" = \"close\";\r\n\r\n @State()\r\n slideState: \"open\" \| \"close\" = \"close\";\r\n\r\n @State()\r\n loadIframe = false;\r\n\r\n @Watch(\"url\")\r\n watchUrl(url: string) {\r\n if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n this.iframeUrl = url;\r\n }\r\n }\r\n\r\n @Watch(\"isOpen\")\r\n watchIsOpen(isOpen: \"open\" \| \"close\") {\r\n const body = document.querySelector(\"body\");\r\n\r\n if (isOpen === \"open\") {\r\n body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n if (this.iframeUrl !== this.url) {\r\n this.iframeUrl = this.url;\r\n }\r\n } else {\r\n body?.style.removeProperty(\"overflow\");\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n this.closeClick();\r\n }\r\n }\r\n\r\n private createTrap() {\r\n if (!this.panelWrapperElement) {\r\n return;\r\n }\r\n\r\n this.trap = createFocusTrap(this.panelWrapperElement, {\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n setReturnFocus: this.openButtonElement ?? false,\r\n initialFocus: this.closeButtonElement ?? false,\r\n }).activate();\r\n }\r\n\r\n private openClick = () => {\r\n this.visibility = \"visible\";\r\n this.slideState = \"open\";\r\n setTimeout(() => {\r\n this.isOpen = \"open\";\r\n });\r\n if (!this.loadIframe) {\r\n setTimeout(() => {\r\n this.loadIframe = true;\r\n }, maxCssTransitionMilliseconds);\r\n }\r\n };\r\n\r\n private closeClick = () => {\r\n this.isOpen = \"close\";\r\n this.slideState = \"close\";\r\n setTimeout(() => {\r\n this.visibility = \"hidden\";\r\n }, maxCssTransitionMilliseconds);\r\n };\r\n\r\n componentDidRender() {\r\n if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n this.createTrap();\r\n } else if (this.isOpen === \"close\" && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n type=\"button\"\r\n onClick={this.openClick}\r\n class={`open-button ${this.isOpen}`}\r\n aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n aria-haspopup=\"dialog\"\r\n aria-controls=\"dso-panel-wrapper\"\r\n ref={(element) => (this.openButtonElement = element)}\r\n >\r\n <dso-icon icon=\"help\"></dso-icon>\r\n <span>{this.label}</span>\r\n </button>\r\n <div\r\n id=\"dso-panel-wrapper\"\r\n class={`wrapper ${this.visibility}`}\r\n aria-label=\"helpcentrum\"\r\n role=\"dialog\"\r\n ref={(element) => (this.panelWrapperElement = element)}\r\n >\r\n <div class=\"dimscreen\" onClick={this.closeClick} />\r\n <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n {this.loadIframe ? (\r\n <iframe\r\n src={this.iframeUrl}\r\n tabindex=\"0\"\r\n onLoad={() => {\r\n this.createTrap();\r\n this.iframeLoaded = true;\r\n }}\r\n />\r\n ) : (\r\n <div />\r\n )}\r\n </div>\r\n <button\r\n type=\"button\"\r\n class={`close-button ${this.isOpen}`}\r\n onClick={this.closeClick}\r\n aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n aria-controls=\"dso-panel-wrapper\"\r\n ref={(element) => (this.closeButtonElement = element)}\r\n >\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"8GAAA,MAAMA,EAAqB,owWCI3B,MAAMC,EAA+B,I,MAOxBC,EAAe,M,yBAWlBC,KAAAC,aAAe,MAsEfD,KAAAE,UAAY,KAClBF,KAAKG,WAAa,UAClBH,KAAKI,WAAa,OAClBC,YAAW,KACTL,KAAKM,OAAS,MAAM,IAEtB,IAAKN,KAAKO,WAAY,CACpBF,YAAW,KACTL,KAAKO,WAAa,IAAI,GACrBT,E,GAICE,KAAAQ,WAAa,KACnBR,KAAKM,OAAS,QACdN,KAAKI,WAAa,QAClBC,YAAW,KACTL,KAAKG,WAAa,QAAQ,GACzBL,EAA6B,E,WAlF1B,a,mCAS2B,S,YAGR,Q,gBAGI,Q,gBAGlB,K,CAGbW,SAASC,GACP,GAAIV,KAAKM,SAAW,QAAUN,KAAKW,YAAcD,EAAK,CACpDV,KAAKW,UAAYD,C,EAKrBE,YAAYN,GACV,MAAMO,EAAOC,SAASC,cAAc,QAEpC,GAAIT,IAAW,OAAQ,CACrBO,IAAI,MAAJA,SAAI,SAAJA,EAAMG,MAAMC,YAAY,WAAY,UAEpC,GAAIjB,KAAKW,YAAcX,KAAKU,IAAK,CAC/BV,KAAKW,UAAYX,KAAKU,G,MAEnB,CACLG,IAAI,MAAJA,SAAI,SAAJA,EAAMG,MAAME,eAAe,W,EAK/BC,gBAAgBC,GACd,GAAIA,EAAMC,MAAQ,UAAYrB,KAAKM,SAAW,OAAQ,CACpDN,KAAKQ,Y,EAIDc,a,QACN,IAAKtB,KAAKuB,oBAAqB,CAC7B,M,CAGFvB,KAAKwB,KAAOC,EAAgBzB,KAAKuB,oBAAqB,CACpDG,kBAAmB,KACnBC,gBAAiB,CACfC,cAAe,MAEjBC,gBAAgBC,EAAA9B,KAAK+B,qBAAiB,MAAAD,SAAA,EAAAA,EAAI,MAC1CE,cAAcC,EAAAjC,KAAKkC,sBAAkB,MAAAD,SAAA,EAAAA,EAAI,QACxCE,U,CAwBLC,qB,MACE,GAAIpC,KAAKM,SAAW,QAAUN,KAAKC,eAAiBD,KAAKwB,KAAM,CAC7DxB,KAAKsB,Y,MACA,GAAItB,KAAKM,SAAW,SAAWN,KAAKwB,KAAM,EAC/CM,EAAA9B,KAAKwB,QAAI,MAAAM,SAAA,SAAAA,EAAEO,oBAEJrC,KAAKwB,I,EAIhBc,SACE,OACEC,EAAAC,EAAA,KACED,EAAA,UACEE,KAAK,SACLC,QAAS1C,KAAKE,UACdyC,MAAO,eAAe3C,KAAKM,SAAQ,gBACpBN,KAAKM,SAAW,OAAS,OAAS,QAAO,gBAC1C,SAAQ,gBACR,oBACdsC,IAAMC,GAAa7C,KAAK+B,kBAAoBc,GAE5CN,EAAA,YAAUO,KAAK,SACfP,EAAA,YAAOvC,KAAK+C,QAEdR,EAAA,OACES,GAAG,oBACHL,MAAO,WAAW3C,KAAKG,aAAY,aACxB,cACX8C,KAAK,SACLL,IAAMC,GAAa7C,KAAKuB,oBAAsBsB,GAE9CN,EAAA,OAAKI,MAAM,YAAYD,QAAS1C,KAAKQ,aACrC+B,EAAA,OAAKI,MAAO,oBAAoB3C,KAAKI,aAAY,YAAY,UAC1DJ,KAAKO,WACJgC,EAAA,UACEW,IAAKlD,KAAKW,UACVwC,SAAS,IACTC,OAAQ,KACNpD,KAAKsB,aACLtB,KAAKC,aAAe,IAAI,IAI5BsC,EAAA,aAGJA,EAAA,UACEE,KAAK,SACLE,MAAO,gBAAgB3C,KAAKM,SAC5BoC,QAAS1C,KAAKQ,WAAU,gBACTR,KAAKM,SAAW,OAAS,OAAS,QAAO,gBAC1C,oBACdsC,IAAMC,GAAa7C,KAAKkC,mBAAqBW,GAE7CN,EAAA,YAAUO,KAAK,UACfP,EAAA,QAAMI,MAAM,WAAS,a"}

package/dist/dso-toolkit/p-70a28e3f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as d,h as s,F as t,a}from"./p-ce928197.js";import{c as i}from"./p-91963e3d.js";import{v as e}from"./p-5d7f4ff2.js";import"./p-5950644a.js";const r="@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}},::after,::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-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}.dso-modal{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);margin-left:auto;margin-right:auto;margin-top:clamp(40px, 15vh, 15vh);max-width:640px;opacity:1}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal>.dso-dialog>.dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:16px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-left:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{margin-bottom:8px;margin-top:8px;min-height:216px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{top:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-height:auto;overflow:auto;padding:8px 32px}}.dso-modal-overlay{background-color:rgba(255, 255, 255, 0.8);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";const l=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=e();this.hasFooter=undefined;this.modalTitle=undefined;this.role="dialog";this.showCloseButton=true;this.initialFocus=undefined;this.returnFocus=undefined}componentWillLoad(){this.hasFooter=this.host.querySelector("[slot = 'footer']")!==null}componentDidLoad(){this.setFocusTrap()}disconnectedCallback(){var o;(o=this.trap)===null\|\|o===void 0?void 0:o.deactivate({onDeactivate:()=>undefined})}render(){var o;return s(t,null,s("div",{class:"dso-modal-overlay"}),s("div",{class:"dso-modal",role:(o=this.role)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.modalElement=o},s("div",{class:"dso-dialog",role:"document",ref:o=>this.dialogElement=o},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))):s("span",{class:"sr-only",id:this.ariaId},"Dialoog"),s("dso-scrollable",null,s("div",{class:"dso-body",tabIndex:0},s("slot",{name:"body"}))),this.hasFooter&&s("div",{class:"dso-footer"},s("slot",{name:"footer"})))))}setFocusTrap(){if(this.dialogElement&&!this.trap){this.trap=i(this.dialogElement,{initialFocus:()=>{var o,d,s;if(this.initialFocus){const o=this.host.querySelector(this.initialFocus);if(!o){console.warn(`element '${this.initialFocus}' could not be found`)}else{return o}}return(s=(o=this.host.querySelector("div[slot='footer'] .dso-primary"))!==null&&o!==void 0?o:(d=this.modalElement)===null\|\|d===void 0?void 0:d.querySelector(".dso-close"))!==null&&s!==void 0?s:false},allowOutsideClick:true,setReturnFocus:o=>{var d,s;return(s=(d=this.returnFocus)===null\|\|d===void 0?void 0:d.call(this,o))!==null&&s!==void 0?s:o},escapeDeactivates:true,tabbableOptions:{getShadowRoot:true},clickOutsideDeactivates:o=>{if(o instanceof MouseEvent&&o.composedPath()[0]===this.modalElement){return true}return false},onDeactivate:()=>{delete this.trap;this.dsoClose.emit({originalEvent:undefined})}}).activate()}}get host(){return a(this)}};l.style=r;export{l as dso_modal};
2	+ //# sourceMappingURL=p-70a28e3f.entry.js.map