npm - @dso-toolkit/core - Versions diffs - 79.1.0 → 80.0.0 - Mend

@dso-toolkit/core 79.1.0 → 80.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 (586) hide show

package/dist/components/icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"icon-button.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/functional-components/tooltip/position-tooltip.function.ts","src/functional-components/tooltip/tooltip.functional-component.tsx","src/components/icon-button/icon-button.scss?tag=dso-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["import { Placement, arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\n\r\nimport { TooltipOptions } from \"./tooltip.interfaces\";\r\n\r\n/*\r\n Positions the Tooltip relative to its reference element.\r\n * The position is recalculated automatically on scroll, resize, or\r\n * element changes via `autoUpdate`, but is otherwise based only on the\r\n * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.\r\n /\r\nexport function positionTooltip(options: TooltipOptions) {\r\n const {\r\n referenceElement,\r\n tipRef,\r\n tipArrowRef,\r\n placementTip,\r\n topPositionSmallViewPort,\r\n halfMainAxisOffset,\r\n forceVisible = false,\r\n } = options;\r\n\r\n return autoUpdate(referenceElement, tipRef, () => {\r\n const padding = 5;\r\n const arrowLength = tipArrowRef.offsetWidth;\r\n const axisOffsetCalc = Math.sqrt(2 arrowLength ** 2);\r\n const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;\r\n const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;\r\n const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;\r\n\r\n // Set placement to top if viewport is small and topPositionSmallViewPort is set to true\r\n const placement: Placement = smallViewport ? \"top\" : placementTip;\r\n\r\n computePosition(referenceElement, tipRef, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset({\r\n mainAxis: mainAxisOffset,\r\n alignmentAxis: -arrowPadding,\r\n }),\r\n flip({\r\n padding,\r\n }),\r\n shift({\r\n padding,\r\n }),\r\n arrow({\r\n padding: arrowPadding,\r\n element: tipArrowRef,\r\n }),\r\n hide({\r\n padding: arrowPadding + arrowLength + padding,\r\n }),\r\n ],\r\n placement,\r\n }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {\r\n if (middlewareData.hide) {\r\n // Tooltip needs to be visible at all times on small viewports or when forceVisible is true\r\n const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;\r\n\r\n Object.assign(tipRef.style, {\r\n // Both of these properties have a CSS transition\r\n visibility: disappear ? \"hidden\" : \"visible\",\r\n opacity: disappear ? 0 : 1,\r\n });\r\n }\r\n\r\n Object.assign(tipRef.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n strategy,\r\n });\r\n\r\n const side = computedPlacement.split(\"-\")[0];\r\n\r\n const staticSide = side\r\n ? {\r\n top: \"bottom\",\r\n right: \"left\",\r\n bottom: \"top\",\r\n left: \"right\",\r\n }[side]\r\n : \"top\";\r\n\r\n let angle;\r\n switch (staticSide) {\r\n default:\r\n case \"top\":\r\n angle = 45;\r\n break;\r\n case \"right\":\r\n angle = 135;\r\n break;\r\n case \"bottom\":\r\n angle = 225;\r\n break;\r\n case \"left\":\r\n angle = 315;\r\n break;\r\n }\r\n\r\n if (middlewareData.arrow && staticSide) {\r\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n Object.assign(tipArrowRef.style, {\r\n right: \"\",\r\n bottom: \"\",\r\n left: arrowX ? `${arrowX}px` : \"\",\r\n top: arrowY ? `${arrowY}px` : \"\",\r\n [staticSide]: `${-arrowLength / 2}px`,\r\n transform: `rotate(${angle}deg)`,\r\n });\r\n }\r\n });\r\n });\r\n}\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n visible: boolean;\r\n onAfterHidden: () => void;\r\n tipElementRef: (ref: HTMLDivElement \| undefined) => void;\r\n tipArrowElementRef: (ref: HTMLSpanElement \| undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n children,\r\n) => (\r\n <div\r\n popover=\"manual\"\r\n id=\"tooltip\"\r\n class={clsx([\"dso-tooltip\", { visible }])}\r\n ref={tipElementRef}\r\n onTransitionEnd={(e) => {\r\n e.stopPropagation();\r\n\r\n if (e.propertyName === \"opacity\" && !visible) {\r\n onAfterHidden();\r\n }\r\n }}\r\n >\r\n <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n <div class=\"tooltip-inner\">{children}</div>\r\n </div>\r\n);\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"../../functional-components/tooltip\";\r\n\r\n@include tooltip.include(colors.$grijs-60, 4px, units.$u1, 0, units.$u1);\r\n\r\n:host {\r\n display: inline-block;\r\n line-height: 1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-secondary {\r\n @include button.secondary();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: calc(#{units.$u1} - 1px);\r\n padding-block: calc(#{units.$u1} - 1px);\r\n }\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.base();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: 0;\r\n padding-block: 0;\r\n\r\n color: var(--_dso-icon-button-tertiary-color, button.$tertiary-color);\r\n background-color: transparent;\r\n border: 0;\r\n }\r\n\r\n &:not([disabled]) {\r\n &:hover {\r\n color: var(\r\n --_dso-icon-button-tertiary-hover-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-hover-color)\r\n );\r\n }\r\n\r\n &:active {\r\n color: var(\r\n --_dso-icon-button-tertiary-active-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-hover-color)\r\n );\r\n }\r\n }\r\n\r\n &[disabled] {\r\n color: var(\r\n --_dso-icon-button-tertiary-disabled-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-disabled-color)\r\n );\r\n }\r\n}\r\n\r\n.dso-map {\r\n @include button.map();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: units.$u1;\r\n padding-block: units.$u1;\r\n border: 0;\r\n margin-inline-end: 0;\r\n box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));\r\n border-radius: var(--_dso-icon-button-map-border-radius, button.$border-radius);\r\n }\r\n}\r\n\r\n.icon-button {\r\n min-inline-size: auto;\r\n cursor: pointer;\r\n\r\n &[disabled] {\r\n cursor: default;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { IconButtonClickEvent, IconButtonVariant } from \"./icon-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-icon-button\",\r\n styleUrl: \"icon-button.scss\",\r\n shadow: true,\r\n})\r\nexport class IconButton implements ComponentInterface {\r\n /*\r\n The alias of the icon in the button.\r\n /\r\n @Prop({ reflect: true })\r\n icon!: string \| undefined;\r\n\r\n /\r\n The label of the Icon Button which is shown on hover in a tooltip.\r\n /\r\n @Prop({ reflect: true })\r\n label!: string \| undefined;\r\n\r\n /\r\n The variant of the Icon Button.\r\n /\r\n @Prop({ reflect: true })\r\n variant?: IconButtonVariant = \"secondary\";\r\n\r\n /\r\n The placement of the tooltip on hover and focus of the Icon Button.\r\n /\r\n @Prop({ reflect: true })\r\n tooltipPlacement: TooltipPlacement = \"top\";\r\n\r\n /\r\n To disable the Icon Button\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Emitted when the user clicks the Icon Button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<IconButtonClickEvent>;\r\n\r\n @State()\r\n showTooltip = false;\r\n\r\n /\r\n Focuses the button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.buttonElRef?.focus();\r\n }\r\n\r\n private buttonElRef?: HTMLButtonElement;\r\n private tooltipElRef?: HTMLDivElement;\r\n private tipArrowElRef?: HTMLSpanElement;\r\n private tooltipTimeout?: number;\r\n private cleanUp: TooltipClean \| undefined;\r\n private lastClickTime = 0;\r\n private tooltipShowDelay = 500;\r\n\r\n private handleShowTooltip = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n\r\n // Don't show the tooltip if the button is clicked within 500ms of the last click\r\n if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {\r\n return;\r\n }\r\n\r\n if (this.tooltipTimeout) {\r\n clearTimeout(this.tooltipTimeout);\r\n }\r\n\r\n this.tooltipTimeout = window.setTimeout(() => {\r\n this.showTooltip = true;\r\n this.tooltipElRef?.showPopover();\r\n\r\n if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {\r\n this.cleanUp = positionTooltip({\r\n referenceElement: this.buttonElRef,\r\n tipRef: this.tooltipElRef,\r\n tipArrowRef: this.tipArrowElRef,\r\n placementTip: this.tooltipPlacement,\r\n topPositionSmallViewPort: false,\r\n halfMainAxisOffset: false,\r\n forceVisible: true,\r\n });\r\n }\r\n }, this.tooltipShowDelay);\r\n };\r\n\r\n private handleHideTooltip = () => {\r\n if (this.tooltipTimeout) {\r\n clearTimeout(this.tooltipTimeout);\r\n }\r\n\r\n this.showTooltip = false;\r\n this.tooltipElRef?.hidePopover();\r\n\r\n if (!this.showTooltip && this.cleanUp) {\r\n this.cleanUp();\r\n this.cleanUp = undefined;\r\n }\r\n };\r\n\r\n private handleClick = (e: MouseEvent) => {\r\n this.lastClickTime = Date.now();\r\n this.handleHideTooltip();\r\n this.dsoClick.emit({ originalEvent: e });\r\n };\r\n\r\n render() {\r\n return (\r\n <button\r\n ref={(el) => (this.buttonElRef = el)}\r\n type=\"button\"\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n class={`icon-button dso-${this.variant}`}\r\n onMouseEnter={this.handleShowTooltip}\r\n onMouseLeave={this.handleHideTooltip}\r\n onFocus={this.handleShowTooltip}\r\n onBlur={this.handleHideTooltip}\r\n onClick={this.handleClick}\r\n >\r\n <dso-icon icon={this.icon} />\r\n <Tooltip\r\n visible={this.showTooltip}\r\n onAfterHidden={this.handleHideTooltip}\r\n tipElementRef={(element) => (this.tooltipElRef = element)}\r\n tipArrowElementRef={(element) => (this.tipArrowElRef = element)}\r\n >\r\n {this.label}\r\n </Tooltip>\r\n </button>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"icon-button.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/functional-components/tooltip/position-tooltip.function.ts","src/functional-components/tooltip/tooltip.functional-component.tsx","src/components/icon-button/icon-button.scss?tag=dso-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["import { Placement, arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\n\r\nimport { TooltipOptions } from \"./tooltip.interfaces\";\r\n\r\n/*\r\n Positions the Tooltip relative to its reference element.\r\n * The position is recalculated automatically on scroll, resize, or\r\n * element changes via `autoUpdate`, but is otherwise based only on the\r\n * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.\r\n /\r\nexport function positionTooltip(options: TooltipOptions) {\r\n const {\r\n referenceElement,\r\n tipRef,\r\n tipArrowRef,\r\n placementTip,\r\n topPositionSmallViewPort,\r\n halfMainAxisOffset,\r\n forceVisible = false,\r\n } = options;\r\n\r\n return autoUpdate(referenceElement, tipRef, () => {\r\n const padding = 5;\r\n const arrowLength = tipArrowRef.offsetWidth;\r\n const axisOffsetCalc = Math.sqrt(2 arrowLength ** 2);\r\n const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;\r\n const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;\r\n const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;\r\n\r\n // Set placement to top if viewport is small and topPositionSmallViewPort is set to true\r\n const placement: Placement = smallViewport ? \"top\" : placementTip;\r\n\r\n computePosition(referenceElement, tipRef, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset({\r\n mainAxis: mainAxisOffset,\r\n alignmentAxis: -arrowPadding,\r\n }),\r\n flip({\r\n padding,\r\n }),\r\n shift({\r\n padding,\r\n }),\r\n arrow({\r\n padding: arrowPadding,\r\n element: tipArrowRef,\r\n }),\r\n hide({\r\n padding: arrowPadding + arrowLength + padding,\r\n }),\r\n ],\r\n placement,\r\n }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {\r\n if (middlewareData.hide) {\r\n // Tooltip needs to be visible at all times on small viewports or when forceVisible is true\r\n const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;\r\n\r\n Object.assign(tipRef.style, {\r\n // Both of these properties have a CSS transition\r\n visibility: disappear ? \"hidden\" : \"visible\",\r\n opacity: disappear ? 0 : 1,\r\n });\r\n }\r\n\r\n Object.assign(tipRef.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n strategy,\r\n });\r\n\r\n const side = computedPlacement.split(\"-\")[0];\r\n\r\n const staticSide = side\r\n ? {\r\n top: \"bottom\",\r\n right: \"left\",\r\n bottom: \"top\",\r\n left: \"right\",\r\n }[side]\r\n : \"top\";\r\n\r\n let angle;\r\n switch (staticSide) {\r\n default:\r\n case \"top\":\r\n angle = 45;\r\n break;\r\n case \"right\":\r\n angle = 135;\r\n break;\r\n case \"bottom\":\r\n angle = 225;\r\n break;\r\n case \"left\":\r\n angle = 315;\r\n break;\r\n }\r\n\r\n if (middlewareData.arrow && staticSide) {\r\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n Object.assign(tipArrowRef.style, {\r\n right: \"\",\r\n bottom: \"\",\r\n left: arrowX ? `${arrowX}px` : \"\",\r\n top: arrowY ? `${arrowY}px` : \"\",\r\n [staticSide]: `${-arrowLength / 2}px`,\r\n transform: `rotate(${angle}deg)`,\r\n });\r\n }\r\n });\r\n });\r\n}\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n visible: boolean;\r\n onAfterHidden: () => void;\r\n tipElementRef: (ref: HTMLDivElement \| undefined) => void;\r\n tipArrowElementRef: (ref: HTMLSpanElement \| undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n children,\r\n) => (\r\n <div\r\n popover=\"manual\"\r\n id=\"tooltip\"\r\n class={clsx([\"dso-tooltip\", { visible }])}\r\n ref={tipElementRef}\r\n onTransitionEnd={(e) => {\r\n e.stopPropagation();\r\n\r\n if (e.propertyName === \"opacity\" && !visible) {\r\n onAfterHidden();\r\n }\r\n }}\r\n >\r\n <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n <div class=\"tooltip-inner\">{children}</div>\r\n </div>\r\n);\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"../../functional-components/tooltip\";\r\n\r\n@include tooltip.include(colors.$grijs-60, 4px, units.$u1, 0, units.$u1);\r\n\r\n:host {\r\n display: inline-block;\r\n line-height: 1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-secondary {\r\n @include button.secondary();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: calc(#{units.$u1} - 1px);\r\n padding-block: calc(#{units.$u1} - 1px);\r\n }\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.base();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: 0;\r\n padding-block: 0;\r\n\r\n color: var(--_dso-icon-button-tertiary-color, button.$tertiary-color);\r\n background-color: transparent;\r\n border: 0;\r\n }\r\n\r\n &:not([disabled]) {\r\n &:hover {\r\n color: var(\r\n --_dso-icon-button-tertiary-hover-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-hover-color)\r\n );\r\n }\r\n\r\n &:active {\r\n color: var(\r\n --_dso-icon-button-tertiary-active-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-hover-color)\r\n );\r\n }\r\n }\r\n\r\n &[disabled] {\r\n color: var(\r\n --_dso-icon-button-tertiary-disabled-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-disabled-color)\r\n );\r\n }\r\n}\r\n\r\n.dso-map {\r\n @include button.map();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: units.$u1;\r\n padding-block: units.$u1;\r\n border: 0;\r\n margin-inline-end: 0;\r\n box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));\r\n border-radius: var(--_dso-icon-button-map-border-radius, button.$border-radius);\r\n }\r\n}\r\n\r\n.icon-button {\r\n min-inline-size: auto;\r\n cursor: pointer;\r\n\r\n &[disabled] {\r\n cursor: default;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { IconButtonClickEvent, IconButtonVariant } from \"./icon-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-icon-button\",\r\n styleUrl: \"icon-button.scss\",\r\n shadow: true,\r\n})\r\nexport class IconButton implements ComponentInterface {\r\n /*\r\n The alias of the icon in the button.\r\n /\r\n @Prop({ reflect: true })\r\n icon!: string \| undefined;\r\n\r\n /\r\n The label of the Icon Button which is shown on hover in a tooltip.\r\n /\r\n @Prop({ reflect: true })\r\n label!: string \| undefined;\r\n\r\n /\r\n The variant of the Icon Button.\r\n /\r\n @Prop({ reflect: true })\r\n variant?: IconButtonVariant = \"secondary\";\r\n\r\n /\r\n The placement of the tooltip on hover and focus of the Icon Button.\r\n /\r\n @Prop({ reflect: true })\r\n tooltipPlacement: TooltipPlacement = \"top\";\r\n\r\n /\r\n To disable the Icon Button\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Emitted when the user clicks the Icon Button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<IconButtonClickEvent>;\r\n\r\n @State()\r\n showTooltip = false;\r\n\r\n /\r\n Focuses the button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.buttonElRef?.focus();\r\n }\r\n\r\n private buttonElRef?: HTMLButtonElement;\r\n private tooltipElRef?: HTMLDivElement;\r\n private tipArrowElRef?: HTMLSpanElement;\r\n private tooltipTimeout?: number;\r\n private cleanUp: TooltipClean \| undefined;\r\n private lastClickTime = 0;\r\n private tooltipShowDelay = 500;\r\n\r\n private handleShowTooltip = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n\r\n // Don't show the tooltip if the button is clicked within 500ms of the last click\r\n if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {\r\n return;\r\n }\r\n\r\n if (this.tooltipTimeout) {\r\n clearTimeout(this.tooltipTimeout);\r\n }\r\n\r\n this.tooltipTimeout = window.setTimeout(() => {\r\n this.showTooltip = true;\r\n this.tooltipElRef?.showPopover();\r\n\r\n if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {\r\n this.cleanUp = positionTooltip({\r\n referenceElement: this.buttonElRef,\r\n tipRef: this.tooltipElRef,\r\n tipArrowRef: this.tipArrowElRef,\r\n placementTip: this.tooltipPlacement,\r\n topPositionSmallViewPort: false,\r\n halfMainAxisOffset: false,\r\n forceVisible: true,\r\n });\r\n }\r\n }, this.tooltipShowDelay);\r\n };\r\n\r\n private handleHideTooltip = () => {\r\n if (this.tooltipTimeout) {\r\n clearTimeout(this.tooltipTimeout);\r\n }\r\n\r\n this.showTooltip = false;\r\n this.tooltipElRef?.hidePopover();\r\n\r\n if (!this.showTooltip && this.cleanUp) {\r\n this.cleanUp();\r\n this.cleanUp = undefined;\r\n }\r\n };\r\n\r\n private handleClick = (e: MouseEvent) => {\r\n this.lastClickTime = Date.now();\r\n this.handleHideTooltip();\r\n this.dsoClick.emit({ originalEvent: e });\r\n };\r\n\r\n render() {\r\n return (\r\n <button\r\n ref={(el) => (this.buttonElRef = el)}\r\n type=\"button\"\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n class={`icon-button dso-${this.variant}`}\r\n onMouseEnter={this.handleShowTooltip}\r\n onMouseLeave={this.handleHideTooltip}\r\n onFocus={this.handleShowTooltip}\r\n onBlur={this.handleHideTooltip}\r\n onClick={this.handleClick}\r\n >\r\n <dso-icon icon={this.icon} />\r\n <Tooltip\r\n visible={this.showTooltip}\r\n onAfterHidden={this.handleHideTooltip}\r\n tipElementRef={(element) => (this.tooltipElRef = element)}\r\n tipArrowElementRef={(element) => (this.tipArrowElRef = element)}\r\n >\r\n {this.label}\r\n </Tooltip>\r\n </button>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/icon.js CHANGED Viewed

@@ -244,11 +244,9 @@ var lightBulb = `<svg id="light-bulb" xmlns="http://www.w3.org/2000/svg" viewBox
 `;
 var locationOutline = `<svg id="location-outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <g>
-    <ellipse cx="12" cy="8.57" rx="4.5" ry="4.29" fill="none"/>
-    <path d="M12,1.71A7.28,7.28,0,0,0,4.8,8.57c0,6,6.2,13.72,7.2,13.72s7.2-7.72,7.2-13.72C19.2,5.14,15.6,1.71,12,1.71Zm0,11.15A4.4,4.4,0,0,1,7.5,8.57,4.39,4.39,0,0,1,12,4.29a4.39,4.39,0,0,1,4.5,4.28A4.4,4.4,0,0,1,12,12.86Z" fill="#e17000"/>
-    <path d="M12,0C7.21,0,3,4,3,8.57c0,3.85,2.18,7.91,3.48,10C8,21,10.25,24,12,24s4-3,5.53-5.45c1.3-2.07,3.47-6.13,3.47-10C21,4.17,16.63,0,12,0Zm0,22.29c-1,0-7.2-7.72-7.2-13.72A7.28,7.28,0,0,1,12,1.71c3.6,0,7.2,3.43,7.2,6.86C19.2,14.57,13,22.29,12,22.29Z"/>
-  </g>
+  <path fill="#E17000" d="M12 5.14a4.853 4.853 0 0 0-4.8 4.573c0 4 4.133 9.147 4.8 9.147.667 0 4.8-5.147 4.8-9.147 0-2.286-2.4-4.573-4.8-4.573Zm0 7.433a2.933 2.933 0 0 1-3-2.86 2.927 2.927 0 0 1 3-2.853 2.927 2.927 0 0 1 3 2.853 2.933 2.933 0 0 1-3 2.86Z"/>
+  <path fill="#000" d="M12 4C8.807 4 6 6.667 6 9.713c0 2.567 1.453 5.274 2.32 6.667C9.333 18 10.833 20 12 20c1.167 0 2.667-2 3.687-3.633C16.553 14.987 18 12.28 18 9.7 18 6.78 15.087 4 12 4Zm0 14.86c-.667 0-4.8-5.147-4.8-9.147A4.853 4.853 0 0 1 12 5.14c2.4 0 4.8 2.287 4.8 4.573 0 4-4.133 9.147-4.8 9.147Z"/>
+  <path fill="#191919" d="M13.667 9.745c0-.831-.716-1.558-1.667-1.558-.95 0-1.667.727-1.667 1.558 0 .83.716 1.558 1.667 1.558.95 0 1.667-.728 1.667-1.558Zm1.333 0c0 1.626-1.373 2.89-3 2.89s-3-1.264-3-2.89c0-1.627 1.373-2.892 3-2.892s3 1.265 3 2.892Z"/>
 </svg>
 `;
@@ -700,7 +698,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '91579533cecc7a0b6f7cfecb9d888a884894beee', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'b1e25292f9290e70a6328fd2b2318a06b7a7b281', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get style() { return iconCss; }

package/dist/components/icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"icon.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/icon/icon.scss?tag=dso-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/icon\";\r\n\r\n:host {\r\n display: inline-block;\r\n block-size: icon.$size;\r\n vertical-align: icon.$vertical-align;\r\n inline-size: icon.$size;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.icon-container {\r\n display: block;\r\n line-height: 0;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\nimport air from \"dso-toolkit/src/icons/air.svg\";\r\nimport angleDown from \"dso-toolkit/src/icons/angle-down.svg\";\r\nimport angleLeft from \"dso-toolkit/src/icons/angle-left.svg\";\r\nimport angleRight from \"dso-toolkit/src/icons/angle-right.svg\";\r\nimport angleUp from \"dso-toolkit/src/icons/angle-up.svg\";\r\nimport asterisk from \"dso-toolkit/src/icons/asterisk.svg\";\r\nimport balloon from \"dso-toolkit/src/icons/balloon.svg\";\r\nimport bars from \"dso-toolkit/src/icons/bars.svg\";\r\nimport bell from \"dso-toolkit/src/icons/bell.svg\";\r\nimport buildings from \"dso-toolkit/src/icons/buildings.svg\";\r\nimport calendar from \"dso-toolkit/src/icons/calendar.svg\";\r\nimport call from \"dso-toolkit/src/icons/call.svg\";\r\nimport caretDown from \"dso-toolkit/src/icons/caret-down.svg\";\r\nimport checkCircle from \"dso-toolkit/src/icons/check-circle.svg\";\r\nimport check from \"dso-toolkit/src/icons/check.svg\";\r\nimport chevronDown from \"dso-toolkit/src/icons/chevron-down.svg\";\r\nimport chevronLeft from \"dso-toolkit/src/icons/chevron-left.svg\";\r\nimport chevronRight from \"dso-toolkit/src/icons/chevron-right.svg\";\r\nimport chevronUp from \"dso-toolkit/src/icons/chevron-up.svg\";\r\nimport circleNotch from \"dso-toolkit/src/icons/circle-notch.svg\";\r\nimport clock from \"dso-toolkit/src/icons/clock.svg\";\r\nimport copy from \"dso-toolkit/src/icons/copy.svg\";\r\nimport crown from \"dso-toolkit/src/icons/crown.svg\";\r\nimport cultural from \"dso-toolkit/src/icons/cultural.svg\";\r\nimport document from \"dso-toolkit/src/icons/document.svg\";\r\nimport download from \"dso-toolkit/src/icons/download.svg\";\r\nimport email from \"dso-toolkit/src/icons/email.svg\";\r\nimport energy from \"dso-toolkit/src/icons/energy.svg\";\r\nimport environment from \"dso-toolkit/src/icons/environment.svg\";\r\nimport exclamation from \"dso-toolkit/src/icons/exclamation.svg\";\r\nimport externalLink from \"dso-toolkit/src/icons/external-link.svg\";\r\nimport eyeSlash from \"dso-toolkit/src/icons/eye-slash.svg\";\r\nimport eye from \"dso-toolkit/src/icons/eye.svg\";\r\nimport filter from \"dso-toolkit/src/icons/filter.svg\";\r\nimport forbidden from \"dso-toolkit/src/icons/forbidden.svg\";\r\nimport hammer from \"dso-toolkit/src/icons/hammer.svg\";\r\nimport health from \"dso-toolkit/src/icons/health.svg\";\r\nimport helpActive from \"dso-toolkit/src/icons/help-active.svg\";\r\nimport help from \"dso-toolkit/src/icons/help.svg\";\r\nimport house from \"dso-toolkit/src/icons/house.svg\";\r\nimport infoActive from \"dso-toolkit/src/icons/info-active.svg\";\r\nimport infoI from \"dso-toolkit/src/icons/info-i.svg\";\r\nimport info from \"dso-toolkit/src/icons/info.svg\";\r\nimport infrastructure from \"dso-toolkit/src/icons/infrastructure.svg\";\r\nimport label from \"dso-toolkit/src/icons/label.svg\";\r\nimport land from \"dso-toolkit/src/icons/land.svg\";\r\nimport landscape from \"dso-toolkit/src/icons/landscape.svg\";\r\nimport layers from \"dso-toolkit/src/icons/layers.svg\";\r\nimport lightBulb from \"dso-toolkit/src/icons/light-bulb.svg\";\r\nimport locationOutline from \"dso-toolkit/src/icons/location-outline.svg\";\r\nimport locationSearch from \"dso-toolkit/src/icons/location-search.svg\";\r\nimport location from \"dso-toolkit/src/icons/location.svg\";\r\nimport lock from \"dso-toolkit/src/icons/lock.svg\";\r\nimport magnet from \"dso-toolkit/src/icons/magnet.svg\";\r\nimport mail from \"dso-toolkit/src/icons/mail.svg\";\r\nimport mapLayers from \"dso-toolkit/src/icons/map-layers.svg\";\r\nimport mapLocation from \"dso-toolkit/src/icons/map-location.svg\";\r\nimport marker from \"dso-toolkit/src/icons/marker.svg\";\r\nimport measurement from \"dso-toolkit/src/icons/measurement.svg\";\r\nimport minusCircle from \"dso-toolkit/src/icons/minus-circle.svg\";\r\nimport minusSquare from \"dso-toolkit/src/icons/minus-square.svg\";\r\nimport minus from \"dso-toolkit/src/icons/minus.svg\";\r\nimport more from \"dso-toolkit/src/icons/more.svg\";\r\nimport municipality from \"dso-toolkit/src/icons/municipality.svg\";\r\nimport nature from \"dso-toolkit/src/icons/nature.svg\";\r\nimport newWindow from \"dso-toolkit/src/icons/new-window.svg\";\r\nimport paperclip from \"dso-toolkit/src/icons/paperclip.svg\";\r\nimport parking from \"dso-toolkit/src/icons/parking.svg\";\r\nimport pencil from \"dso-toolkit/src/icons/pencil.svg\";\r\nimport pinOutline from \"dso-toolkit/src/icons/pin-outline.svg\";\r\nimport pin from \"dso-toolkit/src/icons/pin.svg\";\r\nimport plusCircle from \"dso-toolkit/src/icons/plus-circle.svg\";\r\nimport plusSquare from \"dso-toolkit/src/icons/plus-square.svg\";\r\nimport plus from \"dso-toolkit/src/icons/plus.svg\";\r\nimport print from \"dso-toolkit/src/icons/print.svg\";\r\nimport procedures from \"dso-toolkit/src/icons/procedures.svg\";\r\nimport redo from \"dso-toolkit/src/icons/redo.svg\";\r\nimport safety from \"dso-toolkit/src/icons/safety.svg\";\r\nimport scale from \"dso-toolkit/src/icons/scale.svg\";\r\nimport search from \"dso-toolkit/src/icons/search.svg\";\r\nimport sitemap from \"dso-toolkit/src/icons/sitemap.svg\";\r\nimport soil from \"dso-toolkit/src/icons/soil.svg\";\r\nimport sortAscending from \"dso-toolkit/src/icons/sort-ascending.svg\";\r\nimport sortDescending from \"dso-toolkit/src/icons/sort-descending.svg\";\r\nimport sort from \"dso-toolkit/src/icons/sort.svg\";\r\nimport sound from \"dso-toolkit/src/icons/sound.svg\";\r\nimport spinner from \"dso-toolkit/src/icons/spinner.svg\";\r\nimport statusDanger from \"dso-toolkit/src/icons/status-danger.svg\";\r\nimport statusError from \"dso-toolkit/src/icons/status-error.svg\";\r\nimport statusInfo from \"dso-toolkit/src/icons/status-info.svg\";\r\nimport statusSuccess from \"dso-toolkit/src/icons/status-success.svg\";\r\nimport statusWarningInlineNegative from \"dso-toolkit/src/icons/status-warning-inline-negative.svg\";\r\nimport statusWarningInline from \"dso-toolkit/src/icons/status-warning-inline.svg\";\r\nimport statusWarning from \"dso-toolkit/src/icons/status-warning.svg\";\r\nimport table from \"dso-toolkit/src/icons/table.svg\";\r\nimport times from \"dso-toolkit/src/icons/times.svg\";\r\nimport toDoList from \"dso-toolkit/src/icons/to-do-list.svg\";\r\nimport trash from \"dso-toolkit/src/icons/trash.svg\";\r\nimport undo from \"dso-toolkit/src/icons/undo.svg\";\r\nimport userLine from \"dso-toolkit/src/icons/user-line.svg\";\r\nimport user from \"dso-toolkit/src/icons/user.svg\";\r\nimport users from \"dso-toolkit/src/icons/users.svg\";\r\nimport water from \"dso-toolkit/src/icons/water.svg\";\r\nimport wipWip from \"dso-toolkit/src/icons/wip-wip.svg\";\r\n\r\nconst icons = [\r\n { alias: \"air\", svg: air },\r\n { alias: \"angle-down\", svg: angleDown },\r\n { alias: \"angle-left\", svg: angleLeft },\r\n { alias: \"angle-right\", svg: angleRight },\r\n { alias: \"angle-up\", svg: angleUp },\r\n { alias: \"asterisk\", svg: asterisk },\r\n { alias: \"balloon\", svg: balloon },\r\n { alias: \"bars\", svg: bars },\r\n { alias: \"bell\", svg: bell },\r\n { alias: \"buildings\", svg: buildings },\r\n { alias: \"calendar\", svg: calendar },\r\n { alias: \"call\", svg: call },\r\n { alias: \"caret-down\", svg: caretDown },\r\n { alias: \"check\", svg: check },\r\n { alias: \"check-circle\", svg: checkCircle },\r\n { alias: \"chevron-down\", svg: chevronDown },\r\n { alias: \"chevron-left\", svg: chevronLeft },\r\n { alias: \"chevron-right\", svg: chevronRight },\r\n { alias: \"chevron-up\", svg: chevronUp },\r\n { alias: \"circle-notch\", svg: circleNotch },\r\n { alias: \"clock\", svg: clock },\r\n { alias: \"copy\", svg: copy },\r\n { alias: \"crown\", svg: crown },\r\n { alias: \"cultural\", svg: cultural },\r\n { alias: \"document\", svg: document },\r\n { alias: \"download\", svg: download },\r\n { alias: \"email\", svg: email },\r\n { alias: \"energy\", svg: energy },\r\n { alias: \"environment\", svg: environment },\r\n { alias: \"exclamation\", svg: exclamation },\r\n { alias: \"external-link\", svg: externalLink },\r\n { alias: \"eye-slash\", svg: eyeSlash },\r\n { alias: \"eye\", svg: eye },\r\n { alias: \"filter\", svg: filter },\r\n { alias: \"forbidden\", svg: forbidden },\r\n { alias: \"hammer\", svg: hammer },\r\n { alias: \"health\", svg: health },\r\n { alias: \"help-active\", svg: helpActive },\r\n { alias: \"help\", svg: help },\r\n { alias: \"house\", svg: house },\r\n { alias: \"info-active\", svg: infoActive },\r\n { alias: \"info-i\", svg: infoI },\r\n { alias: \"info\", svg: info },\r\n { alias: \"infrastructure\", svg: infrastructure },\r\n { alias: \"label\", svg: label },\r\n { alias: \"land\", svg: land },\r\n { alias: \"landscape\", svg: landscape },\r\n { alias: \"layers\", svg: layers },\r\n { alias: \"light-bulb\", svg: lightBulb },\r\n { alias: \"location\", svg: location },\r\n { alias: \"location-outline\", svg: locationOutline },\r\n { alias: \"location-search\", svg: locationSearch },\r\n { alias: \"lock\", svg: lock },\r\n { alias: \"magnet\", svg: magnet },\r\n { alias: \"mail\", svg: mail },\r\n { alias: \"map-layers\", svg: mapLayers },\r\n { alias: \"map-location\", svg: mapLocation },\r\n { alias: \"marker\", svg: marker },\r\n { alias: \"measurement\", svg: measurement },\r\n { alias: \"minus-circle\", svg: minusCircle },\r\n { alias: \"minus-square\", svg: minusSquare },\r\n { alias: \"minus\", svg: minus },\r\n { alias: \"more\", svg: more },\r\n { alias: \"municipality\", svg: municipality },\r\n { alias: \"nature\", svg: nature },\r\n { alias: \"new-window\", svg: newWindow },\r\n { alias: \"paperclip\", svg: paperclip },\r\n { alias: \"parking\", svg: parking },\r\n { alias: \"pencil\", svg: pencil },\r\n { alias: \"pin\", svg: pin },\r\n { alias: \"pin-outline\", svg: pinOutline },\r\n { alias: \"plus-circle\", svg: plusCircle },\r\n { alias: \"plus-square\", svg: plusSquare },\r\n { alias: \"plus\", svg: plus },\r\n { alias: \"print\", svg: print },\r\n { alias: \"procedures\", svg: procedures },\r\n { alias: \"spinner\", svg: spinner },\r\n { alias: \"redo\", svg: redo },\r\n { alias: \"safety\", svg: safety },\r\n { alias: \"scale\", svg: scale },\r\n { alias: \"search\", svg: search },\r\n { alias: \"sitemap\", svg: sitemap },\r\n { alias: \"soil\", svg: soil },\r\n { alias: \"sort-ascending\", svg: sortAscending },\r\n { alias: \"sort-descending\", svg: sortDescending },\r\n { alias: \"sort\", svg: sort },\r\n { alias: \"sound\", svg: sound },\r\n { alias: \"status-danger\", svg: statusDanger },\r\n { alias: \"status-error\", svg: statusError },\r\n { alias: \"status-info\", svg: statusInfo },\r\n { alias: \"status-success\", svg: statusSuccess },\r\n { alias: \"status-warning\", svg: statusWarning },\r\n { alias: \"status-warning-inline\", svg: statusWarningInline },\r\n { alias: \"status-warning-inline-negative\", svg: statusWarningInlineNegative },\r\n { alias: \"table\", svg: table },\r\n { alias: \"times\", svg: times },\r\n { alias: \"to-do-list\", svg: toDoList },\r\n { alias: \"trash\", svg: trash },\r\n { alias: \"undo\", svg: undo },\r\n { alias: \"user-line\", svg: userLine },\r\n { alias: \"user\", svg: user },\r\n { alias: \"users\", svg: users },\r\n { alias: \"water\", svg: water },\r\n { alias: \"wip-wip\", svg: wipWip },\r\n];\r\n\r\n@Component({\r\n tag: \"dso-icon\",\r\n styleUrl: \"./icon.scss\",\r\n shadow: true,\r\n})\r\nexport class Icon {\r\n /*\r\n The alias of the icon.\r\n */\r\n @Prop()\r\n icon?: string;\r\n\r\n render() {\r\n if (this.icon) {\r\n const icon = icons.find((i) => i.alias === this.icon);\r\n if (!icon) {\r\n throw new TypeError(`Unknown svg: ${this.icon}`);\r\n }\r\n\r\n return <span class=\"icon-container\" innerHTML={icon.svg} />;\r\n }\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"icon.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/icon/icon.scss?tag=dso-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/icon\";\r\n\r\n:host {\r\n display: inline-block;\r\n block-size: icon.$size;\r\n vertical-align: icon.$vertical-align;\r\n inline-size: icon.$size;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.icon-container {\r\n display: block;\r\n line-height: 0;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\nimport air from \"dso-toolkit/src/icons/air.svg\";\r\nimport angleDown from \"dso-toolkit/src/icons/angle-down.svg\";\r\nimport angleLeft from \"dso-toolkit/src/icons/angle-left.svg\";\r\nimport angleRight from \"dso-toolkit/src/icons/angle-right.svg\";\r\nimport angleUp from \"dso-toolkit/src/icons/angle-up.svg\";\r\nimport asterisk from \"dso-toolkit/src/icons/asterisk.svg\";\r\nimport balloon from \"dso-toolkit/src/icons/balloon.svg\";\r\nimport bars from \"dso-toolkit/src/icons/bars.svg\";\r\nimport bell from \"dso-toolkit/src/icons/bell.svg\";\r\nimport buildings from \"dso-toolkit/src/icons/buildings.svg\";\r\nimport calendar from \"dso-toolkit/src/icons/calendar.svg\";\r\nimport call from \"dso-toolkit/src/icons/call.svg\";\r\nimport caretDown from \"dso-toolkit/src/icons/caret-down.svg\";\r\nimport checkCircle from \"dso-toolkit/src/icons/check-circle.svg\";\r\nimport check from \"dso-toolkit/src/icons/check.svg\";\r\nimport chevronDown from \"dso-toolkit/src/icons/chevron-down.svg\";\r\nimport chevronLeft from \"dso-toolkit/src/icons/chevron-left.svg\";\r\nimport chevronRight from \"dso-toolkit/src/icons/chevron-right.svg\";\r\nimport chevronUp from \"dso-toolkit/src/icons/chevron-up.svg\";\r\nimport circleNotch from \"dso-toolkit/src/icons/circle-notch.svg\";\r\nimport clock from \"dso-toolkit/src/icons/clock.svg\";\r\nimport copy from \"dso-toolkit/src/icons/copy.svg\";\r\nimport crown from \"dso-toolkit/src/icons/crown.svg\";\r\nimport cultural from \"dso-toolkit/src/icons/cultural.svg\";\r\nimport document from \"dso-toolkit/src/icons/document.svg\";\r\nimport download from \"dso-toolkit/src/icons/download.svg\";\r\nimport email from \"dso-toolkit/src/icons/email.svg\";\r\nimport energy from \"dso-toolkit/src/icons/energy.svg\";\r\nimport environment from \"dso-toolkit/src/icons/environment.svg\";\r\nimport exclamation from \"dso-toolkit/src/icons/exclamation.svg\";\r\nimport externalLink from \"dso-toolkit/src/icons/external-link.svg\";\r\nimport eyeSlash from \"dso-toolkit/src/icons/eye-slash.svg\";\r\nimport eye from \"dso-toolkit/src/icons/eye.svg\";\r\nimport filter from \"dso-toolkit/src/icons/filter.svg\";\r\nimport forbidden from \"dso-toolkit/src/icons/forbidden.svg\";\r\nimport hammer from \"dso-toolkit/src/icons/hammer.svg\";\r\nimport health from \"dso-toolkit/src/icons/health.svg\";\r\nimport helpActive from \"dso-toolkit/src/icons/help-active.svg\";\r\nimport help from \"dso-toolkit/src/icons/help.svg\";\r\nimport house from \"dso-toolkit/src/icons/house.svg\";\r\nimport infoActive from \"dso-toolkit/src/icons/info-active.svg\";\r\nimport infoI from \"dso-toolkit/src/icons/info-i.svg\";\r\nimport info from \"dso-toolkit/src/icons/info.svg\";\r\nimport infrastructure from \"dso-toolkit/src/icons/infrastructure.svg\";\r\nimport label from \"dso-toolkit/src/icons/label.svg\";\r\nimport land from \"dso-toolkit/src/icons/land.svg\";\r\nimport landscape from \"dso-toolkit/src/icons/landscape.svg\";\r\nimport layers from \"dso-toolkit/src/icons/layers.svg\";\r\nimport lightBulb from \"dso-toolkit/src/icons/light-bulb.svg\";\r\nimport locationOutline from \"dso-toolkit/src/icons/location-outline.svg\";\r\nimport locationSearch from \"dso-toolkit/src/icons/location-search.svg\";\r\nimport location from \"dso-toolkit/src/icons/location.svg\";\r\nimport lock from \"dso-toolkit/src/icons/lock.svg\";\r\nimport magnet from \"dso-toolkit/src/icons/magnet.svg\";\r\nimport mail from \"dso-toolkit/src/icons/mail.svg\";\r\nimport mapLayers from \"dso-toolkit/src/icons/map-layers.svg\";\r\nimport mapLocation from \"dso-toolkit/src/icons/map-location.svg\";\r\nimport marker from \"dso-toolkit/src/icons/marker.svg\";\r\nimport measurement from \"dso-toolkit/src/icons/measurement.svg\";\r\nimport minusCircle from \"dso-toolkit/src/icons/minus-circle.svg\";\r\nimport minusSquare from \"dso-toolkit/src/icons/minus-square.svg\";\r\nimport minus from \"dso-toolkit/src/icons/minus.svg\";\r\nimport more from \"dso-toolkit/src/icons/more.svg\";\r\nimport municipality from \"dso-toolkit/src/icons/municipality.svg\";\r\nimport nature from \"dso-toolkit/src/icons/nature.svg\";\r\nimport newWindow from \"dso-toolkit/src/icons/new-window.svg\";\r\nimport paperclip from \"dso-toolkit/src/icons/paperclip.svg\";\r\nimport parking from \"dso-toolkit/src/icons/parking.svg\";\r\nimport pencil from \"dso-toolkit/src/icons/pencil.svg\";\r\nimport pinOutline from \"dso-toolkit/src/icons/pin-outline.svg\";\r\nimport pin from \"dso-toolkit/src/icons/pin.svg\";\r\nimport plusCircle from \"dso-toolkit/src/icons/plus-circle.svg\";\r\nimport plusSquare from \"dso-toolkit/src/icons/plus-square.svg\";\r\nimport plus from \"dso-toolkit/src/icons/plus.svg\";\r\nimport print from \"dso-toolkit/src/icons/print.svg\";\r\nimport procedures from \"dso-toolkit/src/icons/procedures.svg\";\r\nimport redo from \"dso-toolkit/src/icons/redo.svg\";\r\nimport safety from \"dso-toolkit/src/icons/safety.svg\";\r\nimport scale from \"dso-toolkit/src/icons/scale.svg\";\r\nimport search from \"dso-toolkit/src/icons/search.svg\";\r\nimport sitemap from \"dso-toolkit/src/icons/sitemap.svg\";\r\nimport soil from \"dso-toolkit/src/icons/soil.svg\";\r\nimport sortAscending from \"dso-toolkit/src/icons/sort-ascending.svg\";\r\nimport sortDescending from \"dso-toolkit/src/icons/sort-descending.svg\";\r\nimport sort from \"dso-toolkit/src/icons/sort.svg\";\r\nimport sound from \"dso-toolkit/src/icons/sound.svg\";\r\nimport spinner from \"dso-toolkit/src/icons/spinner.svg\";\r\nimport statusDanger from \"dso-toolkit/src/icons/status-danger.svg\";\r\nimport statusError from \"dso-toolkit/src/icons/status-error.svg\";\r\nimport statusInfo from \"dso-toolkit/src/icons/status-info.svg\";\r\nimport statusSuccess from \"dso-toolkit/src/icons/status-success.svg\";\r\nimport statusWarningInlineNegative from \"dso-toolkit/src/icons/status-warning-inline-negative.svg\";\r\nimport statusWarningInline from \"dso-toolkit/src/icons/status-warning-inline.svg\";\r\nimport statusWarning from \"dso-toolkit/src/icons/status-warning.svg\";\r\nimport table from \"dso-toolkit/src/icons/table.svg\";\r\nimport times from \"dso-toolkit/src/icons/times.svg\";\r\nimport toDoList from \"dso-toolkit/src/icons/to-do-list.svg\";\r\nimport trash from \"dso-toolkit/src/icons/trash.svg\";\r\nimport undo from \"dso-toolkit/src/icons/undo.svg\";\r\nimport userLine from \"dso-toolkit/src/icons/user-line.svg\";\r\nimport user from \"dso-toolkit/src/icons/user.svg\";\r\nimport users from \"dso-toolkit/src/icons/users.svg\";\r\nimport water from \"dso-toolkit/src/icons/water.svg\";\r\nimport wipWip from \"dso-toolkit/src/icons/wip-wip.svg\";\r\n\r\nconst icons = [\r\n { alias: \"air\", svg: air },\r\n { alias: \"angle-down\", svg: angleDown },\r\n { alias: \"angle-left\", svg: angleLeft },\r\n { alias: \"angle-right\", svg: angleRight },\r\n { alias: \"angle-up\", svg: angleUp },\r\n { alias: \"asterisk\", svg: asterisk },\r\n { alias: \"balloon\", svg: balloon },\r\n { alias: \"bars\", svg: bars },\r\n { alias: \"bell\", svg: bell },\r\n { alias: \"buildings\", svg: buildings },\r\n { alias: \"calendar\", svg: calendar },\r\n { alias: \"call\", svg: call },\r\n { alias: \"caret-down\", svg: caretDown },\r\n { alias: \"check\", svg: check },\r\n { alias: \"check-circle\", svg: checkCircle },\r\n { alias: \"chevron-down\", svg: chevronDown },\r\n { alias: \"chevron-left\", svg: chevronLeft },\r\n { alias: \"chevron-right\", svg: chevronRight },\r\n { alias: \"chevron-up\", svg: chevronUp },\r\n { alias: \"circle-notch\", svg: circleNotch },\r\n { alias: \"clock\", svg: clock },\r\n { alias: \"copy\", svg: copy },\r\n { alias: \"crown\", svg: crown },\r\n { alias: \"cultural\", svg: cultural },\r\n { alias: \"document\", svg: document },\r\n { alias: \"download\", svg: download },\r\n { alias: \"email\", svg: email },\r\n { alias: \"energy\", svg: energy },\r\n { alias: \"environment\", svg: environment },\r\n { alias: \"exclamation\", svg: exclamation },\r\n { alias: \"external-link\", svg: externalLink },\r\n { alias: \"eye-slash\", svg: eyeSlash },\r\n { alias: \"eye\", svg: eye },\r\n { alias: \"filter\", svg: filter },\r\n { alias: \"forbidden\", svg: forbidden },\r\n { alias: \"hammer\", svg: hammer },\r\n { alias: \"health\", svg: health },\r\n { alias: \"help-active\", svg: helpActive },\r\n { alias: \"help\", svg: help },\r\n { alias: \"house\", svg: house },\r\n { alias: \"info-active\", svg: infoActive },\r\n { alias: \"info-i\", svg: infoI },\r\n { alias: \"info\", svg: info },\r\n { alias: \"infrastructure\", svg: infrastructure },\r\n { alias: \"label\", svg: label },\r\n { alias: \"land\", svg: land },\r\n { alias: \"landscape\", svg: landscape },\r\n { alias: \"layers\", svg: layers },\r\n { alias: \"light-bulb\", svg: lightBulb },\r\n { alias: \"location\", svg: location },\r\n { alias: \"location-outline\", svg: locationOutline },\r\n { alias: \"location-search\", svg: locationSearch },\r\n { alias: \"lock\", svg: lock },\r\n { alias: \"magnet\", svg: magnet },\r\n { alias: \"mail\", svg: mail },\r\n { alias: \"map-layers\", svg: mapLayers },\r\n { alias: \"map-location\", svg: mapLocation },\r\n { alias: \"marker\", svg: marker },\r\n { alias: \"measurement\", svg: measurement },\r\n { alias: \"minus-circle\", svg: minusCircle },\r\n { alias: \"minus-square\", svg: minusSquare },\r\n { alias: \"minus\", svg: minus },\r\n { alias: \"more\", svg: more },\r\n { alias: \"municipality\", svg: municipality },\r\n { alias: \"nature\", svg: nature },\r\n { alias: \"new-window\", svg: newWindow },\r\n { alias: \"paperclip\", svg: paperclip },\r\n { alias: \"parking\", svg: parking },\r\n { alias: \"pencil\", svg: pencil },\r\n { alias: \"pin\", svg: pin },\r\n { alias: \"pin-outline\", svg: pinOutline },\r\n { alias: \"plus-circle\", svg: plusCircle },\r\n { alias: \"plus-square\", svg: plusSquare },\r\n { alias: \"plus\", svg: plus },\r\n { alias: \"print\", svg: print },\r\n { alias: \"procedures\", svg: procedures },\r\n { alias: \"spinner\", svg: spinner },\r\n { alias: \"redo\", svg: redo },\r\n { alias: \"safety\", svg: safety },\r\n { alias: \"scale\", svg: scale },\r\n { alias: \"search\", svg: search },\r\n { alias: \"sitemap\", svg: sitemap },\r\n { alias: \"soil\", svg: soil },\r\n { alias: \"sort-ascending\", svg: sortAscending },\r\n { alias: \"sort-descending\", svg: sortDescending },\r\n { alias: \"sort\", svg: sort },\r\n { alias: \"sound\", svg: sound },\r\n { alias: \"status-danger\", svg: statusDanger },\r\n { alias: \"status-error\", svg: statusError },\r\n { alias: \"status-info\", svg: statusInfo },\r\n { alias: \"status-success\", svg: statusSuccess },\r\n { alias: \"status-warning\", svg: statusWarning },\r\n { alias: \"status-warning-inline\", svg: statusWarningInline },\r\n { alias: \"status-warning-inline-negative\", svg: statusWarningInlineNegative },\r\n { alias: \"table\", svg: table },\r\n { alias: \"times\", svg: times },\r\n { alias: \"to-do-list\", svg: toDoList },\r\n { alias: \"trash\", svg: trash },\r\n { alias: \"undo\", svg: undo },\r\n { alias: \"user-line\", svg: userLine },\r\n { alias: \"user\", svg: user },\r\n { alias: \"users\", svg: users },\r\n { alias: \"water\", svg: water },\r\n { alias: \"wip-wip\", svg: wipWip },\r\n];\r\n\r\n@Component({\r\n tag: \"dso-icon\",\r\n styleUrl: \"./icon.scss\",\r\n shadow: true,\r\n})\r\nexport class Icon {\r\n /*\r\n The alias of the icon.\r\n */\r\n @Prop()\r\n icon?: string;\r\n\r\n render() {\r\n if (this.icon) {\r\n const icon = icons.find((i) => i.alias === this.icon);\r\n if (!icon) {\r\n throw new TypeError(`Unknown svg: ${this.icon}`);\r\n }\r\n\r\n return <span class=\"icon-container\" innerHTML={icon.svg} />;\r\n }\r\n }\r\n}\r\n"],"version":3}

package/dist/components/image-overlay.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { c as createFocusTrap } from './focus-trap.esm.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon-button.js';
-const imageOverlayCss = ":host{display:inline-block;position:relative}:host(:hover) .open,.open:focus{opacity:1}.open{opacity:0;position:absolute;inset-inline-end:16px;inset-block-start:16px}.dimmer{position:fixed;inset:0;z-index:19;display:flex;padding:32px;background-color:rgba(255, 255, 255, 0.8);justify-content:center}.wrapper{align-self:center;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);line-height:0;outline:4px solid #fff;position:relative;z-index:20}.wrapper .title{background-color:#fff;font-weight:700;line-height:initial;padding:8px;position:absolute}.wrapper img{inline-size:auto;block-size:auto;max-inline-size:100%;max-block-size:calc(100vh - 64px)}.wrapper .figuur-bijschrift:not([hidden]){display:block;font-size:0.75rem;font-style:italic;padding-block-end:12px;padding-block-start:16px}.close{position:absolute;inset-block-start:16px;inset-inline-end:16px}ins.editaction-add{display:inline-block;margin-block-end:8px;padding:8px;text-decoration:none}ins.editaction-add{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins.editaction-add{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}ins.editaction-add .wrapper{outline:none;padding:8px}ins.editaction-add .wrapper{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins.editaction-add .wrapper{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}ins.editaction-add .wrapper .editaction-label{line-height:1.5}ins.editaction-add .wrapper .close{inset-block-start:48px}ins.editaction-add .open{inset-block-start:48px}del.editaction-remove{display:inline-block;margin-block-end:8px;padding:8px}del.editaction-remove{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del.editaction-remove{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove{font-family:sans-serif}}del.editaction-remove .wrapper{outline:none;padding:8px}del.editaction-remove .wrapper{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del.editaction-remove .wrapper{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove .wrapper{font-family:sans-serif}}del.editaction-remove .wrapper .title{text-decoration:line-through}del.editaction-remove .wrapper .editaction-label{line-height:1.5}del.editaction-remove .wrapper .close{inset-block-start:48px}del.editaction-remove .open{inset-block-start:48px}.editaction-label{font-style:italic;margin-block-end:8px}";
+const imageOverlayCss = ":host{display:inline-block;position:relative}:host(:hover) .open,.open:focus{opacity:1}.open{opacity:0;position:absolute;inset-inline-end:16px;inset-block-start:16px}.dimmer{position:fixed;inset:0;z-index:19;display:flex;padding:32px;background-color:rgba(255, 255, 255, 0.8);justify-content:center}.wrapper{align-self:center;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);line-height:0;outline:4px solid #fff;position:relative;z-index:20}.wrapper .title{background-color:#fff;font-weight:700;line-height:initial;padding:8px;position:absolute}.wrapper img{inline-size:auto;block-size:auto;max-inline-size:100%;max-block-size:calc(100vh - 64px)}.wrapper .figuur-bijschrift:not([hidden]){display:block;font-size:0.75rem;font-style:italic;padding-block-end:12px;padding-block-start:16px}.close{position:absolute;inset-block-start:16px;inset-inline-end:16px}ins.editaction-add{display:inline-block;margin-block-end:8px;padding:8px;text-decoration:none}ins.editaction-add{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins.editaction-add{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}ins.editaction-add .wrapper{outline:none;padding:8px}ins.editaction-add .wrapper{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins.editaction-add .wrapper{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}ins.editaction-add .wrapper .editaction-label{line-height:1.5}ins.editaction-add .wrapper .close{inset-block-start:48px}ins.editaction-add .open{inset-block-start:48px}del.editaction-remove{display:inline-block;margin-block-end:8px;padding:8px}del.editaction-remove{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del.editaction-remove{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove{font-family:sans-serif}}del.editaction-remove .wrapper{outline:none;padding:8px}del.editaction-remove .wrapper{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del.editaction-remove .wrapper{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove .wrapper{font-family:sans-serif}}del.editaction-remove .wrapper .title{text-decoration:line-through}del.editaction-remove .wrapper .editaction-label{line-height:1.5}del.editaction-remove .wrapper .close{inset-block-start:48px}del.editaction-remove .open{inset-block-start:48px}.editaction-label{font-style:italic;margin-block-end:8px}";
 const wijzigactieLabels = {
     verwijder: "Verwijderd",

package/dist/components/image-overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"image-overlay.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n opacity: 1;\r\n}\r\n\r\n.open {\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 0;\r\n position: absolute;\r\n inset-inline-end: units.$u2;\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.dimmer {\r\n position: fixed;\r\n inset: 0;\r\n z-index: zindex.$image-overlay - 1;\r\n display: flex;\r\n padding: units.$u4;\r\n background-color: color.scale(colors.$wit, $alpha: -20%);\r\n justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n align-self: center;\r\n box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n line-height: 0;\r\n outline: 4px solid colors.$wit;\r\n position: relative;\r\n z-index: zindex.$image-overlay;\r\n\r\n .title {\r\n background-color: colors.$wit;\r\n font-weight: 700;\r\n line-height: initial;\r\n padding: units.$u1;\r\n position: absolute;\r\n }\r\n\r\n img {\r\n inline-size: auto;\r\n block-size: auto;\r\n max-inline-size: 100%;\r\n max-block-size: calc(100vh - #{units.$u8});\r\n }\r\n\r\n .figuur-bijschrift:not([hidden]) {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n padding-block-end: units.$u1 * 1.5;\r\n padding-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.close {\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n }\r\n}\r\n\r\nins.editaction-add {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include insert.element();\r\n @include insert.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include insert.root();\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\ndel.editaction-remove {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .title {\r\n text-decoration: line-through;\r\n }\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-block-end: units.$u1;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n FunctionalComponent,\r\n Host,\r\n Listen,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" \| \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n verwijder: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n active: boolean;\r\n src: string \| undefined;\r\n alt: string \| undefined;\r\n ref: (element: HTMLHeadingElement \| undefined) => void;\r\n click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n active &&\r\n src && (\r\n <div class=\"dimmer\">\r\n <div class=\"wrapper\" ref={ref}>\r\n {children[2]}\r\n {children[0]}\r\n <img src={src} alt={alt} />\r\n <dso-icon-button icon=\"times\" variant=\"map\" class=\"close\" label=\"Sluiten\" onDsoClick={click} />\r\n {children[1]}\r\n </div>\r\n </div>\r\n );\r\n\r\n@Component({\r\n tag: \"dso-image-overlay\",\r\n styleUrl: \"./image-overlay.scss\",\r\n shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoImageOverlayElement;\r\n\r\n /*\r\n The wijzigactie.\r\n */\r\n @Prop()\r\n wijzigactie?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n zoomable = false;\r\n\r\n private iconButtonElement: HTMLDsoIconButtonElement \| undefined;\r\n\r\n private wrapperElement: HTMLDivElement \| undefined;\r\n\r\n private trap: FocusTrap \| undefined;\r\n\r\n private titelSlot: HTMLElement \| null = null;\r\n\r\n private bijschriftSlot: HTMLElement \| null = null;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n @Listen(\"load\", { capture: true })\r\n loadListener(event: Event) {\r\n if (event.target instanceof HTMLImageElement) {\r\n this.setZoomable(event.target);\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n }\r\n\r\n componentDidLoad() {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(() => {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (imgElement instanceof HTMLImageElement) {\r\n this.setZoomable(imgElement);\r\n }\r\n }, 200),\r\n );\r\n\r\n this.mutationObserver = new MutationObserver((e) => {\r\n forceUpdate(this.host);\r\n\r\n if (e[0]?.type === \"childList\") {\r\n this.resizeObserver?.disconnect();\r\n // <img> is gone or a new element.\r\n this.initZoomableImage();\r\n }\r\n });\r\n\r\n this.mutationObserver.observe(this.host, {\r\n attributes: true,\r\n subtree: true,\r\n attributeFilter: [\"src\", \"alt\"],\r\n childList: true,\r\n });\r\n\r\n this.initZoomableImage();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.trap?.deactivate();\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n private initZoomableImage(): void {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (!(imgElement instanceof HTMLImageElement)) {\r\n return;\r\n }\r\n\r\n // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n if (imgElement.complete) {\r\n this.setZoomable(imgElement);\r\n }\r\n\r\n this.resizeObserver?.observe(imgElement);\r\n }\r\n\r\n private setZoomable(imageElement: HTMLImageElement): void {\r\n const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n this.zoomable = width < naturalWidth \|\| height < naturalHeight;\r\n }\r\n\r\n private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n return wijzigactie === \"voegtoe\" \|\| wijzigactie === \"verwijder\";\r\n }\r\n\r\n render() {\r\n const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n const editActionLabel: string \| undefined =\r\n (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) \|\| undefined;\r\n\r\n const button = this.zoomable && (\r\n <dso-icon-button\r\n icon=\"external-link\"\r\n class=\"open\"\r\n variant=\"map\"\r\n label=\"Afbeelding vergroot weergeven\"\r\n ref={(element) => (this.iconButtonElement = element)}\r\n onDsoClick={() => (this.active = true)}\r\n />\r\n );\r\n\r\n if (this.wijzigactie === \"verwijder\") {\r\n return (\r\n <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n <del class=\"editaction-remove\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </del>\r\n </Host>\r\n );\r\n }\r\n\r\n if (this.wijzigactie === \"voegtoe\") {\r\n return (\r\n <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n <ins class=\"editaction-add\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </ins>\r\n </Host>\r\n );\r\n }\r\n\r\n return (\r\n <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active && this.wrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.wrapperElement, {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n this.active = false;\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.iconButtonElement ?? false,\r\n onDeactivate: () => (this.active = false),\r\n tabbableOptions: {\r\n getShadowRoot: (node) => node.shadowRoot ?? undefined,\r\n },\r\n }).activate();\r\n } else if (!this.active && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"image-overlay.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n opacity: 1;\r\n}\r\n\r\n.open {\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 0;\r\n position: absolute;\r\n inset-inline-end: units.$u2;\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.dimmer {\r\n position: fixed;\r\n inset: 0;\r\n z-index: zindex.$image-overlay - 1;\r\n display: flex;\r\n padding: units.$u4;\r\n background-color: color.scale(colors.$wit, $alpha: -20%);\r\n justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n align-self: center;\r\n box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n line-height: 0;\r\n outline: 4px solid colors.$wit;\r\n position: relative;\r\n z-index: zindex.$image-overlay;\r\n\r\n .title {\r\n background-color: colors.$wit;\r\n font-weight: 700;\r\n line-height: initial;\r\n padding: units.$u1;\r\n position: absolute;\r\n }\r\n\r\n img {\r\n inline-size: auto;\r\n block-size: auto;\r\n max-inline-size: 100%;\r\n max-block-size: calc(100vh - #{units.$u8});\r\n }\r\n\r\n .figuur-bijschrift:not([hidden]) {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n padding-block-end: units.$u1 * 1.5;\r\n padding-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.close {\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n }\r\n}\r\n\r\nins.editaction-add {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include insert.element();\r\n @include insert.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include insert.root();\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\ndel.editaction-remove {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .title {\r\n text-decoration: line-through;\r\n }\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-block-end: units.$u1;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n FunctionalComponent,\r\n Host,\r\n Listen,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" \| \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n verwijder: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n active: boolean;\r\n src: string \| undefined;\r\n alt: string \| undefined;\r\n ref: (element: HTMLHeadingElement \| undefined) => void;\r\n click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n active &&\r\n src && (\r\n <div class=\"dimmer\">\r\n <div class=\"wrapper\" ref={ref}>\r\n {children[2]}\r\n {children[0]}\r\n <img src={src} alt={alt} />\r\n <dso-icon-button icon=\"times\" variant=\"map\" class=\"close\" label=\"Sluiten\" onDsoClick={click} />\r\n {children[1]}\r\n </div>\r\n </div>\r\n );\r\n\r\n@Component({\r\n tag: \"dso-image-overlay\",\r\n styleUrl: \"./image-overlay.scss\",\r\n shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoImageOverlayElement;\r\n\r\n /*\r\n The wijzigactie.\r\n */\r\n @Prop()\r\n wijzigactie?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n zoomable = false;\r\n\r\n private iconButtonElement: HTMLDsoIconButtonElement \| undefined;\r\n\r\n private wrapperElement: HTMLDivElement \| undefined;\r\n\r\n private trap: FocusTrap \| undefined;\r\n\r\n private titelSlot: HTMLElement \| null = null;\r\n\r\n private bijschriftSlot: HTMLElement \| null = null;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n @Listen(\"load\", { capture: true })\r\n loadListener(event: Event) {\r\n if (event.target instanceof HTMLImageElement) {\r\n this.setZoomable(event.target);\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n }\r\n\r\n componentDidLoad() {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(() => {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (imgElement instanceof HTMLImageElement) {\r\n this.setZoomable(imgElement);\r\n }\r\n }, 200),\r\n );\r\n\r\n this.mutationObserver = new MutationObserver((e) => {\r\n forceUpdate(this.host);\r\n\r\n if (e[0]?.type === \"childList\") {\r\n this.resizeObserver?.disconnect();\r\n // <img> is gone or a new element.\r\n this.initZoomableImage();\r\n }\r\n });\r\n\r\n this.mutationObserver.observe(this.host, {\r\n attributes: true,\r\n subtree: true,\r\n attributeFilter: [\"src\", \"alt\"],\r\n childList: true,\r\n });\r\n\r\n this.initZoomableImage();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.trap?.deactivate();\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n private initZoomableImage(): void {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (!(imgElement instanceof HTMLImageElement)) {\r\n return;\r\n }\r\n\r\n // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n if (imgElement.complete) {\r\n this.setZoomable(imgElement);\r\n }\r\n\r\n this.resizeObserver?.observe(imgElement);\r\n }\r\n\r\n private setZoomable(imageElement: HTMLImageElement): void {\r\n const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n this.zoomable = width < naturalWidth \|\| height < naturalHeight;\r\n }\r\n\r\n private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n return wijzigactie === \"voegtoe\" \|\| wijzigactie === \"verwijder\";\r\n }\r\n\r\n render() {\r\n const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n const editActionLabel: string \| undefined =\r\n (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) \|\| undefined;\r\n\r\n const button = this.zoomable && (\r\n <dso-icon-button\r\n icon=\"external-link\"\r\n class=\"open\"\r\n variant=\"map\"\r\n label=\"Afbeelding vergroot weergeven\"\r\n ref={(element) => (this.iconButtonElement = element)}\r\n onDsoClick={() => (this.active = true)}\r\n />\r\n );\r\n\r\n if (this.wijzigactie === \"verwijder\") {\r\n return (\r\n <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n <del class=\"editaction-remove\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </del>\r\n </Host>\r\n );\r\n }\r\n\r\n if (this.wijzigactie === \"voegtoe\") {\r\n return (\r\n <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n <ins class=\"editaction-add\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </ins>\r\n </Host>\r\n );\r\n }\r\n\r\n return (\r\n <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active && this.wrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.wrapperElement, {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n this.active = false;\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.iconButtonElement ?? false,\r\n onDeactivate: () => (this.active = false),\r\n tabbableOptions: {\r\n getShadowRoot: (node) => node.shadowRoot ?? undefined,\r\n },\r\n }).activate();\r\n } else if (!this.active && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n}\r\n"],"version":3}

package/dist/components/info-button.js CHANGED Viewed

@@ -29,7 +29,7 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTM
         this.dsoToggle.emit({ originalEvent, active: this.active });
     }
     render() {
-        return (h(Host, { key: '6387050fefb7b82f81bb3ff2b7ce41add76c42e6', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        return (h(Host, { key: '2a72a80cba88504aca92b8ae300cd35499c9ba09', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
         // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
         h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label)))));
     }

package/dist/components/info.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@sten
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon-button.js';
-const infoCss = ":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const infoCss = ":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 const Info = /*@__PURE__*/ proxyCustomElement(class Info extends HTMLElement {
     constructor() {
@@ -12,7 +12,7 @@ const Info = /*@__PURE__*/ proxyCustomElement(class Info extends HTMLElement {
         this.dsoClose = createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (h(Fragment, { key: 'ef05039995b42879c537eb147fea4e0d3050bc68' }, h("slot", { key: '0f1477b6b3809a2600fd85fb7690bfc8a41e5851' }), !this.fixed && (h("dso-icon-button", { key: 'efb099b477dcd030afaf73abc83c174e1a4c0c4d', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: 'e56d65f7ab90eb011507a5576f1460cdc8bb38b9' }, h("slot", { key: '12a120e754039ddadcb368569859c8dd1106dc4f' }), !this.fixed && (h("dso-icon-button", { key: 'efa35e83f593f354fca58c176e27579f86f0ab3c', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get style() { return infoCss; }
 }, [257, "dso-info", {

package/dist/components/info.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"info.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,~~gkDAAgkD~~;;~~MCOnkD~~,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAA,WAAA,CAAA;;;;;;;IAmBf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAC7D,CACH,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\ndso-icon-button {\r\n position: absolute;\r\n inset-inline-end: units.$u1;\r\n inset-block-start: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <dso-icon-button\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n />\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"info.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,8sDAA8sD;;MCOjtD,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAA,WAAA,CAAA;;;;;;;IAmBf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAC7D,CACH,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\ndso-icon-button {\r\n position: absolute;\r\n inset-inline-end: units.$u1;\r\n inset-block-start: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <dso-icon-button\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n />\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/label.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
-const labelCss = ":host{display:inline-block;max-inline-size:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{--_dso-icon-button-tertiary-color:#fff;background-color:#275937;border-color:#275937;color:#fff}.dso-label.dso-label-success{--_dso-icon-button-tertiary-color:#fff;background-color:#39870c;border-color:#39870c;color:#fff}.dso-label.dso-label-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-label.dso-label-error{--_dso-icon-button-tertiary-color:#fff;background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;border-color:#fff;color:#191919}.dso-label.dso-label-bright{outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{--_dso-icon-button-tertiary-color:#fff;background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.dso-label.dso-label-filter{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}.dso-label.dso-label-filter{border-inline-start:5px solid #6ca4d9}.dso-label.dso-label-toegevoegd{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-toegevoegd{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}.dso-label.dso-label-verwijderd{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-verwijderd{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){.dso-label.dso-label-verwijderd{font-family:sans-serif}}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}dso-icon-button{float:inline-end;margin-inline-start:8px;margin-inline-end:-4px}";
+const labelCss = ":host{display:inline-block;max-inline-size:100%;font-weight:normal}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-info{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#6ca4d9;color:#191919}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-primary{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#275937;color:#fff}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}.dso-label.dso-label-success{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#39870c;color:#fff}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}.dso-label.dso-label-warning{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#dcd400;color:#191919}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-error{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#ce3f51;color:#fff}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}.dso-label.dso-label-bright{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}.dso-label.dso-label-bright{outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#8b4a6a;color:#fff}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}.dso-label.dso-label-filter{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-filter{border-inline-start:5px solid #6ca4d9}.dso-label.dso-label-toegevoegd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-toegevoegd{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}.dso-label.dso-label-verwijderd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-verwijderd{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){.dso-label.dso-label-verwijderd{font-family:sans-serif}}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}dso-icon-button{float:inline-end;margin-inline-start:8px;margin-inline-end:-4px}";
 const resizeObserver = new ResizeObserver(debounce((entries) => {
     entries.forEach(({ target }) => {
@@ -104,13 +104,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '0b6cf34b6aefcbb4957ba2e6b9d163a2d6918fa2' }, h("span", { key: '9eec335d89922ffd095b36f8cb34fa5fc226510c', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: 'cb1e816c5125dd32494e323f8ec4c48ad701cdda' }, h("span", { key: '2967b653516412692e28fd7db19e860a63576147', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'f79b2c501b4cea497996c2488e014e0542c367e7', name: "symbol" }), h("span", { key: '87b4b6fabc51e6c5f1e4f803ecedd2737b0cc492', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: 'd0dba7bf64d2bed153e7ea4ab9a9abc15eb6bd41', name: "symbol" }), h("span", { key: '00ec26450674ef900dd5fd32bd72edbe5ff80111', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '7026faaf04f728f6a322d1e33ab7f7dbe449552e' })), this.removable && (h("dso-icon-button", { key: '3f587acbe6b4b0e08f1f4c7c64fbd27efa2445f7', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '9ba3f90d4484c61d4757c9dc7929d9c583ef598d', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '6cc69332961817bdfa40e691addbf227efb27900' })), this.removable && (h("dso-icon-button", { key: 'ff4ebb1e4ea6dbe05826a6a2c9c7d8779b02b96d', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '99377bdeaaaecfe0f71363417bbed46ea9a0af89', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -119,10 +119,10 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     }; }
     static get style() { return labelCss; }
 }, [257, "dso-label", {
-        "compact": [4],
+        "compact": [516],
         "removable": [516],
-        "status": [1],
-        "truncate": [4],
+        "status": [513],
+        "truncate": [516],
         "removeHover": [32],
         "removeFocus": [32],
         "textHover": [32],

package/dist/components/label.js.map CHANGED Viewed

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