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

@dso-toolkit/core 79.0.0 → 79.1.0

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

Files changed (810) hide show

package/dist/bundle/dso-onboarding-tip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-onboarding-tip.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/onboarding-tip/onboarding-tip.scss?tag=dso-onboarding-tip&encapsulation=shadow","src/components/onboarding-tip/onboarding-tip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"onboarding-tip.variables\" as onboarding-tip-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: flex !important;\r\n align-items: center !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n\r\n color: colors.$wit !important;\r\n line-height: 1.375 !important;\r\n}\r\n\r\n:host {\r\n --_dso-button-primary-background-color: #{colors.$wit};\r\n --_dso-button-primary-border-color: #{colors.$wit};\r\n --_dso-button-primary-color: #{colors.$zwart};\r\n --_dso-button-primary-hover-background-color: #{colors.$grijs-20};\r\n --_dso-button-primary-hover-border-color: #{colors.$grijs-20};\r\n --_dso-button-primary-hover-color: #{colors.$zwart};\r\n --_dso-button-primary-active-background-color: #{colors.$grijs-40};\r\n --_dso-button-primary-active-border-color: #{colors.$grijs-40};\r\n --_dso-button-primary-active-color: #{colors.$zwart};\r\n --_dso-button-primary-disabled-background-color: #{colors.$wit};\r\n --_dso-button-primary-disabled-border-color: #{colors.$wit};\r\n --_dso-button-primary-disabled-color: #{colors.$grijs-30};\r\n\r\n --_dso-button-secondary-background-color: #{colors.$wit};\r\n --_dso-button-secondary-border-color: #{colors.$wit};\r\n --_dso-button-secondary-color: #{colors.$zwart};\r\n --_dso-button-secondary-hover-background-color: #{colors.$grijs-20};\r\n --_dso-button-secondary-hover-border-color: #{colors.$grijs-20};\r\n --_dso-button-secondary-hover-color: #{colors.$zwart};\r\n --_dso-button-secondary-active-background-color: #{colors.$grijs-40};\r\n --_dso-button-secondary-active-border-color: #{colors.$grijs-40};\r\n --_dso-button-secondary-active-color: #{colors.$zwart};\r\n --_dso-button-secondary-disabled-background-color: #{colors.$wit};\r\n --_dso-button-secondary-disabled-border-color: #{colors.$wit};\r\n --_dso-button-secondary-disabled-color: #{colors.$grijs-30};\r\n\r\n display: block;\r\n filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));\r\n\r\n // Visibility & opacity are updated using Floating-UI\r\n transition:\r\n visibility onboarding-tip-variables.$transition-time,\r\n opacity onboarding-tip-variables.$transition-time;\r\n}\r\n\r\n// Startup fade-in transition\r\n:host(:not([ready])) {\r\n opacity: 1;\r\n animation: onboarding-tip-variables.$transition-time ease-in 1 normal both fadeInOpacity;\r\n}\r\n\r\n:host([popover]) {\r\n margin: 0 !important;\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n overflow: unset;\r\n}\r\n\r\n.onboarding-tip {\r\n font-family: typography.$font-family-base;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n overflow-wrap: anywhere;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n font-size: typography.$font-size-small;\r\n inset-block-start: 0;\r\n inset-inline-start: 0;\r\n z-index: zindex.$onboarding-tip;\r\n\r\n @media screen and (max-width: onboarding-tip-variables.$max-inline-size) {\r\n padding-inline-start: units.$u1 !important;\r\n }\r\n}\r\n\r\n.dso-close {\r\n @include button.element();\r\n\r\n position: absolute;\r\n inset-block-start: 0;\r\n inset-inline-end: 0;\r\n block-size: units.$u4;\r\n inline-size: units.$u4;\r\n padding: 0;\r\n background-color: transparent;\r\n border: 0;\r\n text-align: center;\r\n}\r\n\r\n.onboarding-tip-inner {\r\n --link-color: #{colors.$wit};\r\n --link-hover-color: #{colors.$grijs-30};\r\n --link-visited-color: #{colors.$grijs-50};\r\n\r\n max-inline-size: min(#{onboarding-tip-variables.$max-inline-size}, calc(100vw - 2 * #{units.$u1}));\r\n max-block-size: calc(100vh - 10px); // 10px is the padding given to floating-ui\r\n overflow: auto;\r\n padding-block: onboarding-tip-variables.$padding-block;\r\n padding-inline: onboarding-tip-variables.$padding-inline;\r\n border-radius: onboarding-tip-variables.$border-radius;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n position: relative;\r\n z-index: 2; // z-index higher than the arrow\r\n\r\n @include set-colors.apply(onboarding-tip-variables.$background-color, $icons: false, $links: false);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n max-block-size: unset;\r\n }\r\n}\r\n\r\n.onboarding-tip-arrow {\r\n border-start-start-radius: onboarding-tip-variables.$border-radius;\r\n position: absolute;\r\n block-size: onboarding-tip-variables.$arrow-block-size;\r\n inline-size: onboarding-tip-variables.$arrow-inline-size;\r\n background: onboarding-tip-variables.$background-color;\r\n z-index: 1;\r\n pointer-events: none;\r\n}\r\n\r\n.onboarding-tip-content-wrapper {\r\n padding-inline: units.$u2;\r\n padding-block-end: units.$u2;\r\n}\r\n\r\n.onboarding-tip-content-heading {\r\n display: flex;\r\n\r\n dso-icon {\r\n margin-inline-end: units.$u1;\r\n }\r\n}\r\n\r\n@keyframes fadeInOpacity {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n","import { arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\nimport { Side } from \"@floating-ui/utils\";\r\nimport { Placement } from \"@popperjs/core\";\r\nimport { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { OnboardingTipCloseEvent, OnboardingTipPlacement } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-onboarding-tip\",\r\n styleUrl: \"onboarding-tip.scss\",\r\n shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoOnboardingTipElement;\r\n\r\n /*\r\n Where to place the Onboarding Tip relative to its reference element.\r\n /\r\n @Prop()\r\n placement: OnboardingTipPlacement = \"right\";\r\n\r\n /\r\n Emitted when the user closes the Onboarding Tip.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n @State()\r\n ready = false;\r\n\r\n componentDidRender() {\r\n if (!this.host.matches(\":popover-open\")) {\r\n this.host.showPopover();\r\n }\r\n\r\n if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.host.matches(\":popover-open\")) {\r\n this.host.hidePopover();\r\n }\r\n\r\n this.cleanUp?.();\r\n this.cleanUp = undefined;\r\n }\r\n\r\n /\r\n This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated\r\n * only using the passed arguments.\r\n /\r\n private static positionTip(\r\n referenceElement: HTMLElement,\r\n tipRef: HTMLDsoOnboardingTipElement,\r\n tipArrowRef: HTMLDivElement,\r\n position: Side,\r\n ) {\r\n const padding = 5;\r\n return autoUpdate(referenceElement, tipRef, () => {\r\n const arrowLength = tipArrowRef.offsetWidth;\r\n\r\n // Get half the arrow box's hypotenuse length\r\n const mainAxisOffset = Math.sqrt(2 arrowLength ** 2) / 2;\r\n\r\n // 1.5 times the diagonal of the arrow box\r\n const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;\r\n\r\n // Same as media-query-breakpoints.$screen-md-min\r\n const smallViewport = document.body.clientWidth < 992;\r\n\r\n // Only use top and bottom placement when the viewport is small\r\n const placement: Placement = smallViewport ? \"top\" : `${position}-start`;\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 }) => {\r\n if (middlewareData.hide) {\r\n // Tooltip needs to be visible at all times on small viewports\r\n const disappear = !smallViewport && middlewareData.hide.referenceHidden;\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 });\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\r\n render() {\r\n return (\r\n <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n <div class=\"onboarding-tip\" role=\"tooltip\">\r\n <div class=\"onboarding-tip-inner\">\r\n <div class=\"onboarding-tip-content-wrapper\">\r\n {this.headingSlottedElement !== null && (\r\n <div class=\"onboarding-tip-content-heading\">\r\n <dso-icon icon=\"light-bulb\"></dso-icon>\r\n <slot name=\"heading\" />\r\n </div>\r\n )}\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private tipArrowRef: HTMLDivElement \| undefined;\r\n\r\n private get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n private cleanUp: ReturnType<typeof autoUpdate> \| undefined;\r\n\r\n private get referenceElement(): HTMLElement \| undefined {\r\n const id = this.host.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.host.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n return reference;\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-onboarding-tip.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,mmGAAmmG;;MCY/mG,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;;AASE;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAqB,OAAO;AASrC,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAyFd;IAvFC,kBAAkB,GAAA;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;;AAGzB,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,WAAW,YAAYA,CAAW,EAAE;AACrF,YAAA,IAAI,CAAC,OAAO,GAAG,eAAe,CAAC;gBAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBACvC,MAAM,EAAE,IAAI,CAAC,IAAI;gBACjB,WAAW,EAAE,IAAI,CAAC,WAAW;AAC7B,gBAAA,YAAY,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,CAAQ,MAAA,CAAA;AACvC,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kBAAkB,EAAE,IAAI;AACzB,aAAA,CAAC;;;IAIN,oBAAoB,GAAA;;QAClB,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;AACtC,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;;QAGzB,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;AAChB,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;IAG1B,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAA,EACjF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,EACxC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,EACxC,IAAI,CAAC,qBAAqB,KAAK,IAAI,KAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gCAAgC,EAAA,EACzC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAY,CAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACP,EACD,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3D,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAC,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,EAAQ,CAAA,CAC5E,CACD;;AAMX,IAAA,IAAY,qBAAqB,GAAA;QAC/B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC;;AAKpD,IAAA,IAAY,gBAAgB,GAAA;AAC1B,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE;QAEvB,IAAI,CAAC,EAAE,EAAE;AACP,YAAA,OAAO,CAAC,IAAI,CAAC,iEAAiE,CAAC;YAE/E;;QAGF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACxC,IAAI,EAAE,QAAQ,YAAY,QAAQ,IAAI,QAAQ,YAAY,UAAU,CAAC,EAAE;AACrE,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,kDAAA,CAAoD,CAAC;YAElE;;QAGF,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAc,CAAsB,mBAAA,EAAA,EAAE,CAAI,EAAA,CAAA,CAAC;QACnF,IAAI,CAAC,SAAS,EAAE;AACd,YAAA,OAAO,CAAC,IAAI,CAAC,0DAA0D,EAAE,CAAA,CAAE,CAAC;YAE5E;;AAGF,QAAA,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/onboarding-tip/onboarding-tip.scss?tag=dso-onboarding-tip&encapsulation=shadow","src/components/onboarding-tip/onboarding-tip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"onboarding-tip.variables\" as onboarding-tip-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: flex !important;\r\n align-items: center !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n\r\n color: colors.$wit !important;\r\n line-height: 1.375 !important;\r\n}\r\n\r\n:host {\r\n --_dso-button-primary-background-color: #{colors.$wit};\r\n --_dso-button-primary-border-color: #{colors.$wit};\r\n --_dso-button-primary-color: #{colors.$zwart};\r\n --_dso-button-primary-hover-background-color: #{colors.$grijs-20};\r\n --_dso-button-primary-hover-border-color: #{colors.$grijs-20};\r\n --_dso-button-primary-hover-color: #{colors.$zwart};\r\n --_dso-button-primary-active-background-color: #{colors.$grijs-40};\r\n --_dso-button-primary-active-border-color: #{colors.$grijs-40};\r\n --_dso-button-primary-active-color: #{colors.$zwart};\r\n --_dso-button-primary-disabled-background-color: #{colors.$wit};\r\n --_dso-button-primary-disabled-border-color: #{colors.$wit};\r\n --_dso-button-primary-disabled-color: #{colors.$grijs-30};\r\n\r\n --_dso-button-secondary-background-color: #{colors.$wit};\r\n --_dso-button-secondary-border-color: #{colors.$wit};\r\n --_dso-button-secondary-color: #{colors.$zwart};\r\n --_dso-button-secondary-hover-background-color: #{colors.$grijs-20};\r\n --_dso-button-secondary-hover-border-color: #{colors.$grijs-20};\r\n --_dso-button-secondary-hover-color: #{colors.$zwart};\r\n --_dso-button-secondary-active-background-color: #{colors.$grijs-40};\r\n --_dso-button-secondary-active-border-color: #{colors.$grijs-40};\r\n --_dso-button-secondary-active-color: #{colors.$zwart};\r\n --_dso-button-secondary-disabled-background-color: #{colors.$wit};\r\n --_dso-button-secondary-disabled-border-color: #{colors.$wit};\r\n --_dso-button-secondary-disabled-color: #{colors.$grijs-30};\r\n\r\n display: block;\r\n filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));\r\n\r\n // Visibility & opacity are updated using Floating-UI\r\n transition:\r\n visibility onboarding-tip-variables.$transition-time,\r\n opacity onboarding-tip-variables.$transition-time;\r\n}\r\n\r\n// Startup fade-in transition\r\n:host(:not([ready])) {\r\n opacity: 1;\r\n animation: onboarding-tip-variables.$transition-time ease-in 1 normal both fadeInOpacity;\r\n}\r\n\r\n:host([popover]) {\r\n margin: 0 !important;\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n overflow: unset;\r\n}\r\n\r\n.onboarding-tip {\r\n font-family: typography.$font-family-base;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n overflow-wrap: anywhere;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n font-size: typography.$font-size-small;\r\n inset-block-start: 0;\r\n inset-inline-start: 0;\r\n z-index: zindex.$onboarding-tip;\r\n\r\n @media screen and (max-width: onboarding-tip-variables.$max-inline-size) {\r\n padding-inline-start: units.$u1 !important;\r\n }\r\n}\r\n\r\n.dso-close {\r\n position: absolute;\r\n inset-block-start: 4px;\r\n inset-inline-end: 4px;\r\n}\r\n\r\n.onboarding-tip-inner {\r\n --link-color: #{colors.$wit};\r\n --link-hover-color: #{colors.$grijs-30};\r\n --link-visited-color: #{colors.$grijs-50};\r\n\r\n max-inline-size: min(#{onboarding-tip-variables.$max-inline-size}, calc(100vw - 2 * #{units.$u1}));\r\n max-block-size: calc(100vh - 10px); // 10px is the padding given to floating-ui\r\n overflow: auto;\r\n padding-block: onboarding-tip-variables.$padding-block;\r\n padding-inline: onboarding-tip-variables.$padding-inline;\r\n border-radius: onboarding-tip-variables.$border-radius;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n position: relative;\r\n z-index: 2; // z-index higher than the arrow\r\n\r\n @include set-colors.apply(onboarding-tip-variables.$background-color, $icons: false, $links: false);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n max-block-size: unset;\r\n }\r\n}\r\n\r\n.onboarding-tip-arrow {\r\n border-start-start-radius: onboarding-tip-variables.$border-radius;\r\n position: absolute;\r\n block-size: onboarding-tip-variables.$arrow-block-size;\r\n inline-size: onboarding-tip-variables.$arrow-inline-size;\r\n background: onboarding-tip-variables.$background-color;\r\n z-index: 1;\r\n pointer-events: none;\r\n}\r\n\r\n.onboarding-tip-content-wrapper {\r\n padding-inline: units.$u2;\r\n padding-block-end: units.$u2;\r\n}\r\n\r\n.onboarding-tip-content-heading {\r\n display: flex;\r\n\r\n dso-icon {\r\n margin-inline-end: units.$u1;\r\n }\r\n}\r\n\r\n@keyframes fadeInOpacity {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-onboarding-tip\",\r\n styleUrl: \"onboarding-tip.scss\",\r\n shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoOnboardingTipElement;\r\n\r\n /*\r\n Where to place the Onboarding Tip relative to its reference element.\r\n /\r\n @Prop()\r\n placement: TooltipPlacement = \"right\";\r\n\r\n /\r\n Emitted when the user closes the Onboarding Tip.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n @State()\r\n ready = false;\r\n\r\n componentDidRender() {\r\n if (!this.host.matches(\":popover-open\")) {\r\n this.host.showPopover();\r\n }\r\n\r\n if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n this.cleanUp = positionTooltip({\r\n referenceElement: this.referenceElement,\r\n tipRef: this.host,\r\n tipArrowRef: this.tipArrowRef,\r\n placementTip: `${this.placement}-start`,\r\n topPositionSmallViewPort: true,\r\n halfMainAxisOffset: true,\r\n });\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.host.matches(\":popover-open\")) {\r\n this.host.hidePopover();\r\n }\r\n\r\n this.cleanUp?.();\r\n this.cleanUp = undefined;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n <div class=\"onboarding-tip\" role=\"tooltip\">\r\n <div class=\"onboarding-tip-inner\">\r\n <div class=\"onboarding-tip-content-wrapper\">\r\n {this.headingSlottedElement !== null && (\r\n <div class=\"onboarding-tip-content-heading\">\r\n <dso-icon icon=\"light-bulb\"></dso-icon>\r\n <slot name=\"heading\" />\r\n </div>\r\n )}\r\n <dso-icon-button\r\n class=\"dso-close\"\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n />\r\n <slot></slot>\r\n </div>\r\n </div>\r\n <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private tipArrowRef: HTMLDivElement \| undefined;\r\n\r\n private get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n private cleanUp: TooltipClean \| undefined;\r\n\r\n private get referenceElement(): HTMLElement \| undefined {\r\n const id = this.host.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.host.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n return reference;\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-ozon-content.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { O as OzonContent, d as defineCustomElement$1 } from './p-B7tl4vEP.js';
+import { O as OzonContent, d as defineCustomElement$1 } from './p-CTcIwB2o.js';
 const DsoOzonContent = OzonContent;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-pagination.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$3 } from './p-BTM2KYEF.js';
-import { d as defineCustomElement$2 } from './p-DAJsc8Jk.js';
+import { d as defineCustomElement$3 } from './p-Dwv_hVo9.js';
+import { d as defineCustomElement$2 } from './p-B1X31Uiw.js';
 const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination ul{padding-inline-start:initial;text-align:center}.pagination ul>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination ul>li>a,.pagination ul>li>span{align-items:center;color:#39870c;display:flex;block-size:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px;padding-block:2px;padding-inline:2px}.pagination ul>li>a:active{background-color:#ebf3e6}.pagination ul>li>span{border:2px solid transparent;border-radius:1rem}.pagination ul>li a{line-height:2rem;text-decoration:none}.pagination ul>li a:hover,.pagination ul>li a:focus{text-decoration:none}.pagination ul>li a:hover::after,.pagination ul>li a:focus::after{border-block-end-color:#39870c}.pagination ul>li a::after{border-block-end:3px solid transparent;inset-block-end:0;content:\"\";display:inline-block;inset-inline-start:0;position:absolute;inline-size:100%}.pagination ul>li.active span{background-color:#39870c;color:#fff}.pagination ul>li+li{margin-inline-start:8px}.dso-page-hidden{visibility:hidden}.sr-only.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";

package/dist/bundle/dso-panel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { P as Panel, d as defineCustomElement$1 } from './p-XWtPZYtK.js';
+import { P as Panel, d as defineCustomElement$1 } from './p-yEg3EESJ.js';
 const DsoPanel = Panel;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-plekinfo-card.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-Dm38fPV4.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-BTM2KYEF.js';
+import { d as defineCustomElement$2 } from './p-Dwv_hVo9.js';
-const plekinfoCardCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins 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 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 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 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{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del 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 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 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 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{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{display:flex;align-items:start;column-gap:8px}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:8px !important}}::slotted([slot=heading]){display:inline !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interaction]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interaction]){flex-basis:100% !important;margin-block-start:16px !important}}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}";
+const plekinfoCardCss = "ins{text-decoration:none}ins{--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 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 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 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 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{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}del{--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 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 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 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 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{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{display:flex;align-items:start;column-gap:8px}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:8px !important}}::slotted([slot=heading]){display:inline !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interaction]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interaction]){flex-basis:100% !important;margin-block-start:16px !important}}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}";
 const WrapWijzigactie = ({ wijzigactie }, children) => {
     if (wijzigactie === "voegtoe") {
@@ -50,7 +50,7 @@ const PlekinfoCard = /*@__PURE__*/ proxyCustomElement(class PlekinfoCard extends
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '7f3be40ea02949d97bbe86d086949522e901436a', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'a5675d4dd1049e1d7cf463acf89f38129636ecc3', wijzigactie: this.wijzigactie }, h("div", { key: '635421895dc1698b54c9248b1082f29f45049a8d', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'c16565055d4c2bc88f8326a5c9faaba69ddef3c7', name: "symbol" })), h("div", { key: '207c6f1e741f004d94ccea1051828eac9a343593', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '08245c5be48eacfb2803c823014d8523d652418d', name: "meta" }), this.interaction !== null && h("slot", { key: '77aa9a57edb4d70a380b1a4e8b9f41b55150892a', name: "interaction" })), h("div", { key: 'e811b2c12d5c3560778a935d55e80e1c527e0f09', class: "dso-plekinfo-card-content" }, h("slot", { key: '51babf8c2d33176709d0027d6a7abcf3d41074f7', name: "content" })))));
+        return (h(Host, { key: '332ec131f42579005a42d89342a9b32e86a6997d', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'e16ee664be89ae2ced9dced43cf6146c45b9c474', wijzigactie: this.wijzigactie }, h("div", { key: '3ebc696f26ef762a8b04f24c4362a234585fb71e', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '4ab459813050641dbdebe28928f1b2ea75667875', name: "symbol" })), h("div", { key: '317c27f7263bb7ecb4f35c3089e1f7f190f3699b', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '493f6bc69e167c46e874fae15ad596d5694314ff', name: "meta" }), this.interaction !== null && h("slot", { key: '00f7fcd4113cb464bb55221659dc6e71a89a4ad3', name: "interaction" })), h("div", { key: '3add2177328f84a7fd7067d11299124ce3fe7676', class: "dso-plekinfo-card-content" }, h("slot", { key: '9ea4620de28d349740c50e9696cf1c580a414143', name: "content" })))));
     }
     get host() { return this; }
     static get style() { return plekinfoCardCss; }

package/dist/bundle/dso-plekinfo-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-plekinfo-card.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/plekinfo-card\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n\r\n .dso-plekinfo-card-heading {\r\n display: flex;\r\n align-items: start;\r\n column-gap: units.$u1;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n margin-block-start: units.$u1;\r\n }\r\n\r\n .dso-plekinfo-card-symbol {\r\n grid-row: span 2;\r\n\r\n margin-inline-end: units.$u1;\r\n }\r\n\r\n &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: plekinfo-card.$background-color-hover;\r\n }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: plekinfo-card.$background-color-hover-verwijder;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-plekinfo-card-container {\r\n background-color: plekinfo-card.$background-color-active;\r\n }\r\n\r\n ins.dso-plekinfo-card-container {\r\n background-color: plekinfo-card.$background-color-active-voegtoe;\r\n }\r\n\r\n del.dso-plekinfo-card-container {\r\n background-color: plekinfo-card.$background-color-active-verwijder;\r\n }\r\n}\r\n\r\n:host([has-symbol]) {\r\n .dso-plekinfo-card-container {\r\n display: grid;\r\n grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n .dso-plekinfo-card-heading,\r\n .dso-plekinfo-card-content {\r\n grid-column: 2 /-1;\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n flex-shrink: 0 !important;\r\n align-self: end !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u1 !important;\r\n }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: inline !important;\r\n\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n color: colors.$bosgroen !important;\r\n line-height: 1.25 !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n --_dt-rich-content-margin-block: #{units.$u1};\r\n --_dt-rich-content-margin-block-end: 0;\r\n --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interaction\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n margin-inline-start: auto !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u2 !important;\r\n }\r\n}\r\n\r\n.heading-anchor {\r\n color: plekinfo-card.$heading-anchor-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: plekinfo-card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: plekinfo-card.$heading-anchor-color;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n\r\n .icon-container {\r\n position: relative;\r\n padding-inline-end: units.$u3;\r\n\r\n dso-icon {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n inset-block-end: -3px;\r\n block-size: units.$u3;\r\n inline-size: units.$u3;\r\n }\r\n }\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 FunctionalComponent,\r\n Host,\r\n Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n wijzigactie: PlekinfoWijzigactie \| undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n if (wijzigactie === \"voegtoe\") {\r\n return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n }\r\n\r\n if (wijzigactie === \"verwijder\") {\r\n return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n }\r\n\r\n return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/*\r\n @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n \r\n /\r\n@Component({\r\n tag: \"dso-plekinfo-card\",\r\n styleUrl: \"plekinfo-card.scss\",\r\n shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoPlekinfoCardElement;\r\n\r\n /*\r\n An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: PlekinfoWijzigactie;\r\n\r\n /\r\n The URL to which the PlekinfoCard heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href!: string \| undefined;\r\n\r\n /\r\n Opens the urls in a new window or tab\r\n /\r\n @Prop()\r\n targetBlank: boolean = false;\r\n\r\n /\r\n Makes the PlekinfoCard active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the PlekinfoCard heading is clicked.\r\n */\r\n @Event()\r\n dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get metaSlottedElement() {\r\n return this.host.querySelector(\"[slot='meta']\");\r\n }\r\n\r\n get interaction() {\r\n return this.host.querySelector(\"[slot='interaction']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n return (\r\n <Host has-symbol={hasSymbol}>\r\n <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n <slot name=\"symbol\" />\r\n </div>\r\n <div class=\"dso-plekinfo-card-heading\">\r\n {this.href ? (\r\n <a\r\n href={this.href}\r\n target={this.targetBlank ? \"_blank\" : undefined}\r\n rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n class=\"heading-anchor\"\r\n onClick={(e) => this.clickEventHandler(e)}\r\n >\r\n <span class=\"icon-container\">\r\n {this.targetBlank ? (\r\n <>\r\n <dso-icon icon=\"external-link\" />\r\n <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n </>\r\n ) : (\r\n <dso-icon icon=\"chevron-right\" />\r\n )}\r\n <slot name=\"heading\" />\r\n </span>\r\n </a>\r\n ) : (\r\n <slot name=\"heading\" />\r\n )}\r\n {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n {this.interaction !== null && <slot name=\"interaction\" />}\r\n </div>\r\n <div class=\"dso-plekinfo-card-content\">\r\n <slot name=\"content\" />\r\n </div>\r\n </WrapWijzigactie>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-plekinfo-card.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/plekinfo-card\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n\r\n .dso-plekinfo-card-heading {\r\n display: flex;\r\n align-items: start;\r\n column-gap: units.$u1;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n margin-block-start: units.$u1;\r\n }\r\n\r\n .dso-plekinfo-card-symbol {\r\n grid-row: span 2;\r\n\r\n margin-inline-end: units.$u1;\r\n }\r\n\r\n &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: plekinfo-card.$background-color-hover;\r\n }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: plekinfo-card.$background-color-hover-verwijder;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-plekinfo-card-container {\r\n background-color: plekinfo-card.$background-color-active;\r\n }\r\n\r\n ins.dso-plekinfo-card-container {\r\n background-color: plekinfo-card.$background-color-active-voegtoe;\r\n }\r\n\r\n del.dso-plekinfo-card-container {\r\n background-color: plekinfo-card.$background-color-active-verwijder;\r\n }\r\n}\r\n\r\n:host([has-symbol]) {\r\n .dso-plekinfo-card-container {\r\n display: grid;\r\n grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n .dso-plekinfo-card-heading,\r\n .dso-plekinfo-card-content {\r\n grid-column: 2 /-1;\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n flex-shrink: 0 !important;\r\n align-self: end !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u1 !important;\r\n }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: inline !important;\r\n\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n color: colors.$bosgroen !important;\r\n line-height: 1.25 !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n --_dt-rich-content-margin-block: #{units.$u1};\r\n --_dt-rich-content-margin-block-end: 0;\r\n --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interaction\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n margin-inline-start: auto !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u2 !important;\r\n }\r\n}\r\n\r\n.heading-anchor {\r\n color: plekinfo-card.$heading-anchor-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: plekinfo-card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: plekinfo-card.$heading-anchor-color;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n\r\n .icon-container {\r\n position: relative;\r\n padding-inline-end: units.$u3;\r\n\r\n dso-icon {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n inset-block-end: -3px;\r\n block-size: units.$u3;\r\n inline-size: units.$u3;\r\n }\r\n }\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 FunctionalComponent,\r\n Host,\r\n Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n wijzigactie: PlekinfoWijzigactie \| undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n if (wijzigactie === \"voegtoe\") {\r\n return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n }\r\n\r\n if (wijzigactie === \"verwijder\") {\r\n return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n }\r\n\r\n return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/*\r\n @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n \r\n /\r\n@Component({\r\n tag: \"dso-plekinfo-card\",\r\n styleUrl: \"plekinfo-card.scss\",\r\n shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoPlekinfoCardElement;\r\n\r\n /*\r\n An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: PlekinfoWijzigactie;\r\n\r\n /\r\n The URL to which the PlekinfoCard heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href!: string \| undefined;\r\n\r\n /\r\n Opens the urls in a new window or tab\r\n /\r\n @Prop()\r\n targetBlank: boolean = false;\r\n\r\n /\r\n Makes the PlekinfoCard active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the PlekinfoCard heading is clicked.\r\n */\r\n @Event()\r\n dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get metaSlottedElement() {\r\n return this.host.querySelector(\"[slot='meta']\");\r\n }\r\n\r\n get interaction() {\r\n return this.host.querySelector(\"[slot='interaction']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n return (\r\n <Host has-symbol={hasSymbol}>\r\n <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n <slot name=\"symbol\" />\r\n </div>\r\n <div class=\"dso-plekinfo-card-heading\">\r\n {this.href ? (\r\n <a\r\n href={this.href}\r\n target={this.targetBlank ? \"_blank\" : undefined}\r\n rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n class=\"heading-anchor\"\r\n onClick={(e) => this.clickEventHandler(e)}\r\n >\r\n <span class=\"icon-container\">\r\n {this.targetBlank ? (\r\n <>\r\n <dso-icon icon=\"external-link\" />\r\n <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n </>\r\n ) : (\r\n <dso-icon icon=\"chevron-right\" />\r\n )}\r\n <slot name=\"heading\" />\r\n </span>\r\n </a>\r\n ) : (\r\n <slot name=\"heading\" />\r\n )}\r\n {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n {this.interaction !== null && <slot name=\"interaction\" />}\r\n </div>\r\n <div class=\"dso-plekinfo-card-content\">\r\n <slot name=\"content\" />\r\n </div>\r\n </WrapWijzigactie>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-progress-bar.js CHANGED Viewed

@@ -19,7 +19,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: '5c6007b6ce579b2733a5e2506617fb0b66b14083', class: "progress" }, h("span", { key: '254a965d5956d001657536d0b62e189553791d48', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'b3ae04b47755b6697c3c56301ab7d08681076cd6', style: { width: `${progressPercentage}` } })), h("span", { key: '6ed0af3622feb21b31244add08b63527b36ce266', id: "progress-bar-label" }, h("slot", { key: '94adb0a9158443321c5a53a5ecd79a123612b8af' }))));
+        return (h("div", { key: 'fadc3ce49184687a5ed6d384477679f02c443afc', class: "progress" }, h("span", { key: '36db93b5a7a749b8435df14918caa82883a134bb', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'd69c3f5879bd06d518c63527489971bd2fa76749', style: { width: `${progressPercentage}` } })), h("span", { key: '032c53996cc324c5bfed12ab6e7ae6500d4600ea', id: "progress-bar-label" }, h("slot", { key: '08e1a0cba14ac76650c10a7175a9d66c2d9f999a' }))));
     }
     static get style() { return progressBarCss; }
 }, [257, "dso-progress-bar", {

package/dist/bundle/dso-progress-indicator.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { P as Progressindicator, d as defineCustomElement$1 } from './p-zc-ygIe_.js';
+import { P as Progressindicator, d as defineCustomElement$1 } from './p-bxV-YGVG.js';
 const DsoProgressIndicator = Progressindicator;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-project-item.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { p as proxyCustomElement, H, h, F as Fragment } from './p-Dm38fPV4.js';
-import { d as defineCustomElement$4 } from './p-BTM2KYEF.js';
-import { d as defineCustomElement$3 } from './p-CVyaeh1_.js';
-import { d as defineCustomElement$2 } from './p-DZfdc557.js';
+import { d as defineCustomElement$5 } from './p-Dwv_hVo9.js';
+import { d as defineCustomElement$4 } from './p--HbwCvQM.js';
+import { d as defineCustomElement$3 } from './p-CVzuETs2.js';
+import { d as defineCustomElement$2 } from './p-BOnELf-b.js';
 const projectItemCss = ":host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}";
@@ -12,7 +13,7 @@ const ProjectItem = /*@__PURE__*/ proxyCustomElement(class ProjectItem extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Fragment, null, h("div", { key: '3f6f705655b7fbde410073f7aba7eee3a9b4feba', class: "project-item-header" }, h("div", { key: '0cb5f89e8b954c92250d962e9c9f1bc5b4119f9b', class: "project-item-title" }, h("slot", { key: '28c5ceeeb66296b6a9b8496affbab1281327c1fa', name: "title" }), this.label && (h("dso-label", { key: '24ffac7d385243bc5c036c2c9a73fb0ce8311c0c', status: "error", compact: true }, this.label))), h("div", { key: '170cef0ae20cc0448ac7da6d85bb0ae5cab6a1c4', class: "project-item-actions" }, h("slot", { key: '8c420d7f28efff7ad57f2f1081f7ec40da781315', name: "actions" }))), h("div", { key: '015ba5e768aec917c3a6b32b3cf042eedb402ae5', class: "project-item-info" }, h("div", { key: 'be9c29e22475bdfc56e24e9edbf9ce6e757aa07b', class: "project-item-progress" }, h("slot", { key: '56303705113e4cc6ed95da93e9bc4de6de017f8e', name: "progress" })), h("div", { key: '25c772dbb4b1b19061dfd9c330abe5e0fafb0072', class: "project-item-status" }, h("slot", { key: '5fe845352612008ffa6d690967994a2fc7c980c4', name: "status" })))));
+        return (h(Fragment, { key: '9c322e99bb0c79734200f27a2469720413413545' }, h("div", { key: '79587c24d9ee9385b0eb9ab32d13b8e464fff378', class: "project-item-header" }, h("div", { key: '94997c3b36d9214ea3afd8c6f321c319d3dacf1a', class: "project-item-title" }, h("slot", { key: 'feaf20c56c765fa56981cb6300cb16c9617a4f40', name: "title" }), this.label && (h("dso-label", { key: 'f3adc64db8f1897177e3fb9fc052326685aba79c', status: "error", compact: true }, this.label))), h("div", { key: 'f8ef593d6b46ba091e4f2a63e118b667579fa35b', class: "project-item-actions" }, h("slot", { key: '9346c22768782faadb8e8fab102fd809d3c72f3c', name: "actions" }))), h("div", { key: 'bf9e4cfe31d1c3113955002c604803bb3cf43c2b', class: "project-item-info" }, h("div", { key: '84d56570fd648edef357ec6d6ec1acfd91155ed4', class: "project-item-progress" }, h("slot", { key: '08d2f101cddd41c37c81cf2a17b17b1b307c57a1', name: "progress" })), h("div", { key: '9551bb47c5dafe548437852044e61b6835bde9ab', class: "project-item-status" }, h("slot", { key: '591f4a199283729366b064e356a0ebf41cfdbcb7', name: "status" })))));
     }
     static get style() { return projectItemCss; }
 }, [257, "dso-project-item", {
@@ -22,7 +23,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-project-item", "dso-icon", "dso-label", "dso-tooltip"];
+    const components = ["dso-project-item", "dso-icon", "dso-icon-button", "dso-label", "dso-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-project-item":
             if (!customElements.get(tagName)) {
@@ -30,6 +31,11 @@ function defineCustomElement$1() {
             }
             break;
         case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dso-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/bundle/dso-project-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-project-item.js","mappings":"~~;;;;;~~AAAA,MAAM,cAAc,GAAG,2oCAA2oC;;MCOrpC,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;IAOtB,MAAM,GAAA;~~AACJ~~,~~QAAA,~~QACE,~~CAAA~~,~~CAAA~~,~~QAAA~~,EAAA,~~IAAA~~,~~EACE~~,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACpB,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,MAAM,EAAC,OAAO,EAAC,OAAO,UAC9B,IAAI,CAAC,KAAK,CACD,CACb,CACG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAG,CACpB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACF,~~CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/project-item/project-item.scss?tag=dso-project-item&encapsulation=shadow","src/components/project-item/project-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n display: block;\r\n\r\n padding: units.$u2;\r\n\r\n border: 1px solid colors.$grijs-20;\r\n border-radius: calc(units.$u1 / 2);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(dl[slot=\"progress\"]),\r\n::slotted(dl[slot=\"status\"]) {\r\n --_dt-dl-margin-block-end: 0;\r\n --_dt-dl-before-display: none;\r\n --_dt-dl-dt-font-weight: normal;\r\n --_dt-dl-dd-margin-block-start: 0;\r\n --_dt-dl-dd-margin-inline-start: units.$u1;\r\n --_dt-dl-dd-padding-inline-start: 0;\r\n --_dt-dl-dt-inline-size: auto;\r\n --_dt-dl-dd-last-margin-block-end: 0;\r\n\r\n --_dt-mark-bg-color: none;\r\n --_dt-mark-padding-block: 0;\r\n --_dt-mark-color: inherit;\r\n --_dt-mark-font-weight: 600;\r\n\r\n display: flex !important;\r\n flex-wrap: wrap;\r\n column-gap: units.$u2;\r\n}\r\n\r\n::slotted([slot=\"status\"]) {\r\n --_dt-dl-font-size: 0.875rem;\r\n}\r\n\r\n::slotted([slot=\"title\"]) {\r\n margin-block: 0 !important;\r\n font-size: 1.25rem !important;\r\n}\r\n\r\n::slotted([slot=\"actions\"]) {\r\n display: flex;\r\n}\r\n\r\n.project-item-header {\r\n display: flex;\r\n gap: units.$u2;\r\n flex-wrap: nowrap;\r\n align-items: flex-start;\r\n\r\n margin-block-end: units.$u2;\r\n}\r\n\r\n.project-item-title {\r\n display: flex;\r\n gap: units.$u2;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n flex-grow: 1;\r\n}\r\n\r\n.project-item-actions {\r\n display: flex;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n}\r\n\r\n.project-item-info {\r\n display: flex;\r\n gap: units.$u2;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n align-items: flex-end;\r\n}\r\n","import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-project-item\",\r\n styleUrl: \"project-item.scss\",\r\n shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n /*\r\n The label of the project item.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n render() {\r\n return (\r\n ~~<>\~~r\n <div class=\"project-item-header\">\r\n <div class=\"project-item-title\">\r\n <slot name=\"title\" />\r\n {this.label && (\r\n <dso-label status=\"error\" compact>\r\n {this.label}\r\n </dso-label>\r\n )}\r\n </div>\r\n <div class=\"project-item-actions\">\r\n <slot name=\"actions\" />\r\n </div>\r\n </div>\r\n <div class=\"project-item-info\">\r\n <div class=\"project-item-progress\">\r\n <slot name=\"progress\" />\r\n </div>\r\n <div class=\"project-item-status\">\r\n <slot name=\"status\" />\r\n </div>\r\n </div>\r\n ~~</>\~~r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-project-item.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,2oCAA2oC;;MCOrpC,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;IAOtB,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACpB,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,MAAM,EAAC,OAAO,EAAC,OAAO,UAC9B,IAAI,CAAC,KAAK,CACD,CACb,CACG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAG,CACpB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACF,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/project-item/project-item.scss?tag=dso-project-item&encapsulation=shadow","src/components/project-item/project-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n display: block;\r\n\r\n padding: units.$u2;\r\n\r\n border: 1px solid colors.$grijs-20;\r\n border-radius: calc(units.$u1 / 2);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(dl[slot=\"progress\"]),\r\n::slotted(dl[slot=\"status\"]) {\r\n --_dt-dl-margin-block-end: 0;\r\n --_dt-dl-before-display: none;\r\n --_dt-dl-dt-font-weight: normal;\r\n --_dt-dl-dd-margin-block-start: 0;\r\n --_dt-dl-dd-margin-inline-start: units.$u1;\r\n --_dt-dl-dd-padding-inline-start: 0;\r\n --_dt-dl-dt-inline-size: auto;\r\n --_dt-dl-dd-last-margin-block-end: 0;\r\n\r\n --_dt-mark-bg-color: none;\r\n --_dt-mark-padding-block: 0;\r\n --_dt-mark-color: inherit;\r\n --_dt-mark-font-weight: 600;\r\n\r\n display: flex !important;\r\n flex-wrap: wrap;\r\n column-gap: units.$u2;\r\n}\r\n\r\n::slotted([slot=\"status\"]) {\r\n --_dt-dl-font-size: 0.875rem;\r\n}\r\n\r\n::slotted([slot=\"title\"]) {\r\n margin-block: 0 !important;\r\n font-size: 1.25rem !important;\r\n}\r\n\r\n::slotted([slot=\"actions\"]) {\r\n display: flex;\r\n}\r\n\r\n.project-item-header {\r\n display: flex;\r\n gap: units.$u2;\r\n flex-wrap: nowrap;\r\n align-items: flex-start;\r\n\r\n margin-block-end: units.$u2;\r\n}\r\n\r\n.project-item-title {\r\n display: flex;\r\n gap: units.$u2;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n flex-grow: 1;\r\n}\r\n\r\n.project-item-actions {\r\n display: flex;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n}\r\n\r\n.project-item-info {\r\n display: flex;\r\n gap: units.$u2;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n align-items: flex-end;\r\n}\r\n","import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-project-item\",\r\n styleUrl: \"project-item.scss\",\r\n shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n /*\r\n The label of the project item.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <div class=\"project-item-header\">\r\n <div class=\"project-item-title\">\r\n <slot name=\"title\" />\r\n {this.label && (\r\n <dso-label status=\"error\" compact>\r\n {this.label}\r\n </dso-label>\r\n )}\r\n </div>\r\n <div class=\"project-item-actions\">\r\n <slot name=\"actions\" />\r\n </div>\r\n </div>\r\n <div class=\"project-item-info\">\r\n <div class=\"project-item-progress\">\r\n <slot name=\"progress\" />\r\n </div>\r\n <div class=\"project-item-status\">\r\n <slot name=\"status\" />\r\n </div>\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-renvooi.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { R as Renvooi, d as defineCustomElement$1 } from './p-MqBCENXQ.js';
+import { R as Renvooi, d as defineCustomElement$1 } from './p-D-Dm2Gh7.js';
 const DsoRenvooi = Renvooi;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-responsive-element.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { R as ResponsiveElement, d as defineCustomElement$1 } from './p-DAJsc8Jk.js';
+import { R as ResponsiveElement, d as defineCustomElement$1 } from './p-B1X31Uiw.js';
 const DsoResponsiveElement = ResponsiveElement;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-scrollable.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as Scrollable, d as defineCustomElement$1 } from './p-CTAU8JKT.js';
+import { S as Scrollable, d as defineCustomElement$1 } from './p-DZgHugpQ.js';
 const DsoScrollable = Scrollable;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-selectable.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as Selectable, d as defineCustomElement$1 } from './p-bHDMgCsa.js';
+import { S as Selectable, d as defineCustomElement$1 } from './p-CaZRQPYD.js';
 const DsoSelectable = Selectable;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-skiplink.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-BTM2KYEF.js';
+import { d as defineCustomElement$2 } from './p-Dwv_hVo9.js';
 const skiplinkCss = ":host{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:2;display:block;inline-size:100vw}*,*::after,*::before{box-sizing:border-box}a{position:absolute;inset-inline-start:50%;inset-block-start:16px;display:inline-block;inline-size:1px;block-size:1px;overflow:hidden;background-color:#fff;border-radius:2px;clip:rect(1px, 1px, 1px, 1px);color:var(--link-color);white-space:nowrap;text-decoration:none;transform:translate(-50%);box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}a:focus-visible{inline-size:auto;block-size:auto;padding:8px;clip:auto;white-space:normal;outline-offset:2px}";
@@ -18,7 +18,7 @@ const Skiplink = /*@__PURE__*/ proxyCustomElement(class Skiplink extends H {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '689d77b289c0981d750119a32edd1db9a4f199ad', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '3e0033abda17a534d61e76f66bc534698b106b44', icon: "chevron-right" })));
+        return (h("a", { key: '40c3c6d5b541f6c69b3dd1e13ab6120a13e89f08', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'fceb144a8534dfd1f53f3c63a50e723800086c9d', icon: "chevron-right" })));
     }
     static get style() { return skiplinkCss; }
 }, [257, "dso-skiplink", {

package/dist/bundle/dso-slide-toggle.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SlideToggle, d as defineCustomElement$1 } from './p-D_cMLm_E.js';
+import { S as SlideToggle, d as defineCustomElement$1 } from './p-ZUzIHCVc.js';
 const DsoSlideToggle = SlideToggle;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-survey-rating.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
-import { d as defineCustomElement$3 } from './p-BTM2KYEF.js';
-import { d as defineCustomElement$2 } from './p-XWtPZYtK.js';
+import { d as defineCustomElement$4 } from './p-Dwv_hVo9.js';
+import { d as defineCustomElement$3 } from './p--HbwCvQM.js';
+import { d as defineCustomElement$2 } from './p-yEg3EESJ.js';
-const surveyRatingCss = ":host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #b62f41;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #ce3f51;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e17000;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #dcd400;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #79b929;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #39870c;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #275937;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  margin-block-start: 16px;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}";
+const surveyRatingCss = ":host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #b62f41;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #ce3f51;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #e17000;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #dcd400;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #79b929;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #39870c;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #275937;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  margin-block-start: 16px;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-extra-small dso-icon,\nbutton.dso-secondary.dso-extra-small svg.di, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small {\n  padding-block: 9px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}";
 const SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends H {
     constructor() {
@@ -30,10 +31,10 @@ const SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: 'a08440a75488ac48b76bad9520140f5ee8de22ab', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'e749e905ceb649aa5e270428de76b1b3a454df4e', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'c3bec20428494f1e7299375ac1c8477c162de0c7' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '227cf4b049533f58a7648abc0b8e48a452f2c350', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'ae139bf5bc7278bb6b17d280c70c40b857f111fb', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'ffa6cc1b544787a787fba144c4849eca1fb4bef6' }, "Heel moeilijk"), h("span", { key: 'a8fb7698c548b932faa687c66a85dbc40b1a70c4' }, "Heel makkelijk")), h("div", { key: 'fed9a5ae6b53237a2e2c4323bc1ec2ddb77b9418', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '4afde1602b2d7f15262530650451f581b3fc9f9e', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '4d1484e447fd0d556fd09127e85d5913d9aa1f1f', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '19cbf6097a3e26e9c525468d130930c7a7ef348c' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'd930003ed608626d73522dc4d7f5aeb0aae02e4d', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '7004838e50bc55da67207d235976b2240af46b0d', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '0a510fc64215eda8ddd3d29f4235c802d1fdce2f' }, "Heel moeilijk"), h("span", { key: 'd4621ecdc8e1a34e9ed4b2dcc42de74ca3a8464a' }, "Heel makkelijk")), h("div", { key: '4b9a1c49b5dbe53ef27b14d44e9db846304056db', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: '6f2f4f4f10358bed4c7bce9f3097c51f7e958593', type: "submit", class: "dso-secondary" }, h("span", { key: '0e98c6ea0ae5808638b2a631e936b797a11513b7' }, "Antwoord verzenden")))));
+        })), h("button", { key: '8c60b7142f98cd173391a20d75660f0ab64f0b43', type: "submit", class: "dso-secondary" }, h("span", { key: '3222b05f44e1bb8a99acc49f349a38fae0ea6917' }, "Antwoord verzenden")))));
     }
     static get style() { return surveyRatingCss; }
 }, [257, "dso-survey-rating"]);
@@ -41,7 +42,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-survey-rating", "dso-icon", "dso-panel"];
+    const components = ["dso-survey-rating", "dso-icon", "dso-icon-button", "dso-panel"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-survey-rating":
             if (!customElements.get(tagName)) {
@@ -49,6 +50,11 @@ function defineCustomElement$1() {
             }
             break;
         case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/bundle/dso-survey-rating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-survey-rating.js","mappings":"~~;;;;~~AAAA,MAAM,eAAe,GAAG,~~qosBAAqosB~~;;~~MCShpsB~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n display: block;\r\n position: fixed;\r\n inset-block-end: units.$u2;\r\n inset-inline-start: units.$u2;\r\n inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n background-color: survey-rating-variables.$survey-rating-background-color;\r\n box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n z-index: zindex.$survey-rating;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n inset-block-end: 0;\r\n inset-inline-start: 0;\r\n\r\n --panel-heading-padding-inline-start: #{units.$u1};\r\n --panel-body-padding-inline: #{units.$u1};\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n appearance: none;\r\n cursor: pointer;\r\n position: absolute;\r\n margin-inline: 0;\r\n margin-block: 0;\r\n inset-block: units.$u1 0;\r\n inset-inline: 0;\r\n z-index: 1;\r\n}\r\n\r\nlabel {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n border-inline-end-width: 0;\r\n padding-block-start: units.$u1;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n }\r\n\r\n &:hover {\r\n background-color: survey-rating-variables.$survey-rating-color-hover;\r\n }\r\n\r\n &:active {\r\n background-color: survey-rating-variables.$survey-rating-color-active;\r\n }\r\n\r\n &:first-of-type {\r\n border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n survey-rating-variables.$survey-rating-border-radius;\r\n\r\n &::before {\r\n border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &:last-of-type {\r\n border-inline-end-width: 1px;\r\n border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n &::before {\r\n border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n inset-block-start: 0;\r\n block-size: units.$u1;\r\n inline-size: 100%;\r\n border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n }\r\n\r\n &:has(input:checked) {\r\n font-weight: bold;\r\n }\r\n\r\n @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n $color: map.get($survey-rating, color);\r\n\r\n &.survey-rating-#{$i} {\r\n &::before,\r\n &:has(input:checked) {\r\n @include set-colors.apply($color, survey-rating-variables.$survey-rating-border-color);\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n\r\n &.dso-secondary {\r\n @include button.secondary($base-styling: true);\r\n }\r\n\r\n margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-survey-rating\",\r\n styleUrl: \"survey-rating.scss\",\r\n shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n private rating: number \| undefined;\r\n\r\n /*\r\n Emitted when the user submits the Survey Rating.\r\n /\r\n @Event()\r\n dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n /\r\n Emitted when the user wants to close the Survey Rating.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n private handleForm(e: Event): void {\r\n e.preventDefault();\r\n this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n }\r\n\r\n private handleChange(e: Event): void {\r\n const target = e.target as HTMLInputElement;\r\n this.rating = Number(target.value);\r\n }\r\n\r\n render() {\r\n const ratings = [\r\n \"Heel moeilijk\",\r\n \"Moeilijk\",\r\n \"Redelijk moeilijk\",\r\n \"Neutraal\",\r\n \"Redelijk makkelijk\",\r\n \"Makkelijk\",\r\n \"Heel makkelijk\",\r\n ];\r\n\r\n return (\r\n <dso-panel\r\n emphasized\r\n onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n role=\"dialog\"\r\n aria-labelledby=\"panel-heading\"\r\n >\r\n <h2 id=\"panel-heading\" slot=\"heading\">\r\n Help ons met een onderzoek\r\n </h2>\r\n <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n <form onSubmit={(e) => this.handleForm(e)}>\r\n <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n <span>Heel moeilijk</span>\r\n <span>Heel makkelijk</span>\r\n </div>\r\n <div role=\"radiogroup\">\r\n {ratings.map((rating, index) => {\r\n const ratingNumber = index + 1;\r\n\r\n return (\r\n <>\r\n <label class={`survey-rating-${ratingNumber}`}>\r\n {ratingNumber}\r\n <span class=\"sr-only\">{rating}</span>\r\n <input\r\n type=\"radio\"\r\n name=\"rating\"\r\n value={ratingNumber}\r\n checked={ratingNumber === this.rating}\r\n onChange={(e) => this.handleChange(e)}\r\n />\r\n </label>\r\n </>\r\n );\r\n })}\r\n </div>\r\n <button type=\"submit\" class=\"dso-secondary\">\r\n <span>Antwoord verzenden</span>\r\n </button>\r\n </form>\r\n </dso-panel>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-survey-rating.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,ikvBAAikvB;;MCS5kvB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;AAef,IAAA,UAAU,CAAC,CAAQ,EAAA;QACzB,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;;AAGrF,IAAA,YAAY,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;QAC3C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB;AAED,QAAA,QACE,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,UAAU,EAAA,IAAA,EACV,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAChE,IAAI,EAAC,QAAQ,EAAA,iBAAA,EACG,eAAe,EAAA,EAE/B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,EAEhC,EAAA,4BAAA,CAAA,EACL,CAA0E,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,2DAAA,CAAA,EAC1E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,aAAA,EAAa,MAAM,EAAA,EAClD,CAA0B,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,eAAA,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,gBAAA,CAA2B,CACvB,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,YAAY,EAAA,EACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;AAC7B,YAAA,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC;AAE9B,YAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,OAAA,EAAA,EAAO,KAAK,EAAE,CAAA,cAAA,EAAiB,YAAY,CAAE,CAAA,EAAA,EAC1C,YAAY,EACb,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,CAAQ,EACrC,CAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP;AAEP,SAAC,CAAC,CACE,EACN,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAA,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,oBAAA,CAA+B,CACxB,CACJ,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n display: block;\r\n position: fixed;\r\n inset-block-end: units.$u2;\r\n inset-inline-start: units.$u2;\r\n inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n background-color: survey-rating-variables.$survey-rating-background-color;\r\n box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n z-index: zindex.$survey-rating;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n inset-block-end: 0;\r\n inset-inline-start: 0;\r\n\r\n --panel-heading-padding-inline-start: #{units.$u1};\r\n --panel-body-padding-inline: #{units.$u1};\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n appearance: none;\r\n cursor: pointer;\r\n position: absolute;\r\n margin-inline: 0;\r\n margin-block: 0;\r\n inset-block: units.$u1 0;\r\n inset-inline: 0;\r\n z-index: 1;\r\n}\r\n\r\nlabel {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n border-inline-end-width: 0;\r\n padding-block-start: units.$u1;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n }\r\n\r\n &:hover {\r\n background-color: survey-rating-variables.$survey-rating-color-hover;\r\n }\r\n\r\n &:active {\r\n background-color: survey-rating-variables.$survey-rating-color-active;\r\n }\r\n\r\n &:first-of-type {\r\n border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n survey-rating-variables.$survey-rating-border-radius;\r\n\r\n &::before {\r\n border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &:last-of-type {\r\n border-inline-end-width: 1px;\r\n border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n &::before {\r\n border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n inset-block-start: 0;\r\n block-size: units.$u1;\r\n inline-size: 100%;\r\n border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n }\r\n\r\n &:has(input:checked) {\r\n font-weight: bold;\r\n }\r\n\r\n @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n $color: map.get($survey-rating, color);\r\n\r\n &.survey-rating-#{$i} {\r\n &::before,\r\n &:has(input:checked) {\r\n @include set-colors.apply($color, survey-rating-variables.$survey-rating-border-color);\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n\r\n &.dso-secondary {\r\n @include button.secondary($base-styling: true);\r\n }\r\n\r\n margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-survey-rating\",\r\n styleUrl: \"survey-rating.scss\",\r\n shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n private rating: number \| undefined;\r\n\r\n /*\r\n Emitted when the user submits the Survey Rating.\r\n /\r\n @Event()\r\n dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n /\r\n Emitted when the user wants to close the Survey Rating.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n private handleForm(e: Event): void {\r\n e.preventDefault();\r\n this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n }\r\n\r\n private handleChange(e: Event): void {\r\n const target = e.target as HTMLInputElement;\r\n this.rating = Number(target.value);\r\n }\r\n\r\n render() {\r\n const ratings = [\r\n \"Heel moeilijk\",\r\n \"Moeilijk\",\r\n \"Redelijk moeilijk\",\r\n \"Neutraal\",\r\n \"Redelijk makkelijk\",\r\n \"Makkelijk\",\r\n \"Heel makkelijk\",\r\n ];\r\n\r\n return (\r\n <dso-panel\r\n emphasized\r\n onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n role=\"dialog\"\r\n aria-labelledby=\"panel-heading\"\r\n >\r\n <h2 id=\"panel-heading\" slot=\"heading\">\r\n Help ons met een onderzoek\r\n </h2>\r\n <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n <form onSubmit={(e) => this.handleForm(e)}>\r\n <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n <span>Heel moeilijk</span>\r\n <span>Heel makkelijk</span>\r\n </div>\r\n <div role=\"radiogroup\">\r\n {ratings.map((rating, index) => {\r\n const ratingNumber = index + 1;\r\n\r\n return (\r\n <>\r\n <label class={`survey-rating-${ratingNumber}`}>\r\n {ratingNumber}\r\n <span class=\"sr-only\">{rating}</span>\r\n <input\r\n type=\"radio\"\r\n name=\"rating\"\r\n value={ratingNumber}\r\n checked={ratingNumber === this.rating}\r\n onChange={(e) => this.handleChange(e)}\r\n />\r\n </label>\r\n </>\r\n );\r\n })}\r\n </div>\r\n <button type=\"submit\" class=\"dso-secondary\">\r\n <span>Antwoord verzenden</span>\r\n </button>\r\n </form>\r\n </dso-panel>\r\n );\r\n }\r\n}\r\n"],"version":3}