npm - @dso-toolkit/core - Versions diffs - 79.0.0-pre.4 → 79.0.1 - Mend

@dso-toolkit/core 79.0.0-pre.4 → 79.0.1

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 (792) hide show

package/dist/dso-toolkit/dso-onboarding-tip.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-onboarding-tip.entry.esm.js","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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-onboarding-tip.entry.esm.js","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"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,25GAA25G;;MCYv6G,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASE;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA2B,OAAO;AAS3C,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AA2Ld;IAzLC,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,YAAY,WAAW,EAAE;YACrF,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC;;;IAIhH,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;;AAG1B;;;AAGG;IACK,OAAO,WAAW,CACxB,gBAA6B,EAC7B,MAAmC,EACnC,WAA2B,EAC3B,QAAc,EAAA;QAEd,MAAM,OAAO,GAAG,CAAC;AACjB,QAAA,OAAO,UAAU,CAAC,gBAAgB,EAAE,MAAM,EAAE,MAAK;AAC/C,YAAA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAW;;AAG3C,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,WAAW,IAAI,CAAC,CAAC,GAAG,CAAC;;AAG1D,YAAA,MAAM,YAAY,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG;;YAGrD,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG;;AAGrD,YAAA,MAAM,SAAS,GAAc,aAAa,GAAG,KAAK,GAAG,CAAG,EAAA,QAAQ,QAAQ;AAExE,YAAA,eAAe,CAAC,gBAAgB,EAAE,MAAM,EAAE;AACxC,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,UAAU,EAAE;AACV,oBAAA,MAAM,CAAC;AACL,wBAAA,QAAQ,EAAE,cAAc;wBACxB,aAAa,EAAE,CAAC,YAAY;qBAC7B,CAAC;AACF,oBAAA,IAAI,CAAC;wBACH,OAAO;qBACR,CAAC;AACF,oBAAA,KAAK,CAAC;wBACJ,OAAO;qBACR,CAAC;AACF,oBAAA,KAAK,CAAC;AACJ,wBAAA,OAAO,EAAE,YAAY;AACrB,wBAAA,OAAO,EAAE,WAAW;qBACrB,CAAC;AACF,oBAAA,IAAI,CAAC;AACH,wBAAA,OAAO,EAAE,YAAY,GAAG,WAAW,GAAG,OAAO;qBAC9C,CAAC;AACH,iBAAA;gBACD,SAAS;AACV,aAAA,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAI;AACjE,gBAAA,IAAI,cAAc,CAAC,IAAI,EAAE;;oBAEvB,MAAM,SAAS,GAAG,CAAC,aAAa,IAAI,cAAc,CAAC,IAAI,CAAC,eAAe;AACvE,oBAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;;wBAE1B,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS;wBAC5C,OAAO,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC;AAC3B,qBAAA,CAAC;;AAGJ,gBAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;oBAC1B,IAAI,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;oBACd,GAAG,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;AACd,iBAAA,CAAC;gBAEF,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBAE5C,MAAM,UAAU,GAAG;AACjB,sBAAE;AACE,wBAAA,GAAG,EAAE,QAAQ;AACb,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,KAAK;AACb,wBAAA,IAAI,EAAE,OAAO;AACd,qBAAA,CAAC,IAAI;sBACN,KAAK;AAET,gBAAA,IAAI,KAAK;gBACT,QAAQ,UAAU;oBAChB;AACA,oBAAA,KAAK,KAAK;wBACR,KAAK,GAAG,EAAE;wBACV;AACF,oBAAA,KAAK,OAAO;wBACV,KAAK,GAAG,GAAG;wBACX;AACF,oBAAA,KAAK,QAAQ;wBACX,KAAK,GAAG,GAAG;wBACX;AACF,oBAAA,KAAK,MAAM;wBACT,KAAK,GAAG,GAAG;wBACX;;AAGJ,gBAAA,IAAI,cAAc,CAAC,KAAK,IAAI,UAAU,EAAE;AACtC,oBAAA,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK;AAErD,oBAAA,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE;AAC/B,wBAAA,KAAK,EAAE,EAAE;AACT,wBAAA,MAAM,EAAE,EAAE;wBACV,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,EAAE;wBACjC,GAAG,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,EAAE;wBAChC,CAAC,UAAU,GAAG,CAAA,EAAG,CAAC,WAAW,GAAG,CAAC,CAAI,EAAA,CAAA;wBACrC,SAAS,EAAE,CAAU,OAAA,EAAA,KAAK,CAAM,IAAA,CAAA;AACjC,qBAAA,CAAC;;AAEN,aAAC,CAAC;AACJ,SAAC,CAAC;;IAGJ,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,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,EAC9F,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAe,CAC7B,EACT,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,CAAE,CAAA,CAAC;QACjF,IAAI,CAAC,SAAS,EAAE;AACd,YAAA,OAAO,CAAC,IAAI,CAAC,0DAA0D,EAAE,CAAA,CAAE,CAAC;YAE5E;;AAGF,QAAA,OAAO,SAAS;;;;;;;;"}

package/dist/dso-toolkit/dso-pagination.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-pagination.entry.esm.js","sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"pagination.variables\" as pagination-variables;\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n ul {\r\n padding-inline-start: initial;\r\n text-align: center;\r\n\r\n > li {\r\n display: inline-block;\r\n font-weight: bold;\r\n line-height: calc(pagination-variables.$item-size - pagination-variables.$border-size * 2);\r\n text-align: center;\r\n vertical-align: middle;\r\n\r\n > a,\r\n > span {\r\n align-items: center;\r\n color: colors.$grasgroen;\r\n display: flex;\r\n block-size: pagination-variables.$item-size;\r\n justify-content: center;\r\n position: relative;\r\n min-inline-size: pagination-variables.$item-size;\r\n padding: #{units.$u1 * 0.25};\r\n padding-block: units.$u1 * 0.25;\r\n padding-inline: units.$u1 * 0.25;\r\n }\r\n\r\n > a:active {\r\n background-color: colors.$grasgroen-10;\r\n }\r\n\r\n > span {\r\n border: pagination-variables.$border-size solid transparent;\r\n border-radius: pagination-variables.$item-size * 0.5;\r\n }\r\n\r\n a {\r\n line-height: pagination-variables.$line-height;\r\n text-decoration: none;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n\r\n &::after {\r\n border-block-end-color: colors.$grasgroen;\r\n }\r\n }\r\n\r\n &::after {\r\n border-block-end: 3px solid transparent;\r\n inset-block-end: 0;\r\n content: \"\";\r\n display: inline-block;\r\n inset-inline-start: 0;\r\n position: absolute;\r\n inline-size: 100%;\r\n }\r\n }\r\n\r\n &.active {\r\n span {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n }\r\n\r\n & + li {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n @include utilities.sr-only();\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Prop,\r\n State,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\n\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-pagination\",\r\n styleUrl: \"pagination.scss\",\r\n shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n small: 7,\r\n medium: 9,\r\n large: 11,\r\n };\r\n\r\n private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n @Element()\r\n host!: HTMLDsoPaginationElement;\r\n\r\n @State()\r\n availablePositions?: number;\r\n /*\r\n Total pages\r\n /\r\n @Prop()\r\n totalPages?: number;\r\n\r\n /\r\n Current page\r\n /\r\n @Prop()\r\n currentPage?: number;\r\n\r\n /\r\n This function is called to format the href\r\n /\r\n @Prop()\r\n formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n /\r\n Emitted on page select\r\n /\r\n @Event()\r\n dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n /\r\n Listens to the dsoSizeChange event on Responsive Element\r\n */\r\n @Listen(\"dsoSizeChange\")\r\n sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n }\r\n\r\n private clickHandler(e: MouseEvent, page: number) {\r\n this.dsoSelectPage.emit({\r\n originalEvent: e,\r\n page,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.responsiveElement\r\n ?.getSize()\r\n .then(\r\n (size: ResponsiveElementSize) =>\r\n (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.totalPages && !this.currentPage) {\r\n return null;\r\n }\r\n\r\n if (this.availablePositions === undefined) {\r\n return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n }\r\n\r\n const availablePositions = this.availablePositions;\r\n\r\n const currentPage = this.currentPage ?? 0;\r\n\r\n const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n return (\r\n <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n <nav class=\"pagination\" aria-label=\"Paginering\">\r\n <ul>\r\n <li class={currentPage <= 1 \|\| !currentPage ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(currentPage - 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, currentPage - 1)}\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </a>\r\n </li>\r\n {pages.map((page) => (\r\n <Fragment>\r\n {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n {currentPage === page ? (\r\n <span aria-current=\"page\">{page}</span>\r\n ) : (\r\n <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n {page}\r\n </a>\r\n )}\r\n {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n </li>\r\n\r\n {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n {this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n </Fragment>\r\n ))}\r\n <li\r\n class={\r\n (this.totalPages && currentPage >= this.totalPages) \|\| !currentPage ? \"dso-page-hidden\" : undefined\r\n }\r\n >\r\n <a\r\n href={this.formatHref(currentPage + 1)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) => currentPage && this.clickHandler(e, currentPage + 1)}\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private getAvailablePositions(sizePositions: number) {\r\n if (sizePositions % 2 === 0) {\r\n // Even aantal posities zorgt voor een scheve pagination\r\n return sizePositions - 1;\r\n }\r\n if (sizePositions <= 3) {\r\n // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n return 3;\r\n }\r\n\r\n return sizePositions;\r\n }\r\n\r\n private getPages(currentPage: number, availablePositions: number, totalPages?: number): number[] {\r\n if (totalPages) {\r\n if (totalPages + 2 <= availablePositions) {\r\n // + 2 voor de vorige en volgende knop\r\n return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n }\r\n\r\n if (availablePositions === 3) {\r\n return [currentPage];\r\n }\r\n\r\n if (availablePositions === 5) {\r\n return [1, currentPage, totalPages];\r\n }\r\n\r\n return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n }\r\n return this.getPageRangeWithoutTotalPages(currentPage, availablePositions);\r\n }\r\n\r\n private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n const range: number[] = [];\r\n\r\n const positionRange = Math.floor(availablePositions / 2);\r\n\r\n if (currentPage <= positionRange) {\r\n for (let i = 2; i <= availablePositions - 4; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n if (positionRange === 1) {\r\n if (currentPage > totalPages - 2) {\r\n range.push(totalPages - 2);\r\n }\r\n\r\n range.push(currentPage);\r\n\r\n if (currentPage < 3) {\r\n range.push(3);\r\n }\r\n }\r\n\r\n if (positionRange > 1) {\r\n const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n for (\r\n let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n i++\r\n ) {\r\n if (i > 2 && i < totalPages - 1) {\r\n range.push(i);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentPage > totalPages - positionRange) {\r\n for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n return range.filter((v, i, a) => a.indexOf(v) === i);\r\n }\r\n\r\n private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n const isFirstPage = pages.indexOf(page) === 0;\r\n const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n const isPageTwoMissing = !pages.includes(2);\r\n const hasEnoughPositions = availablePositions >= 7;\r\n\r\n return isFirstPage && hasManyPages && isPageTwoMissing && hasEnoughPositions;\r\n }\r\n\r\n private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n const isLastPage = pages.indexOf(page) === pages.length - 1;\r\n const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n const isSecondLastPageMissing = !pages.includes(totalPages - 1);\r\n const hasEnoughPositions = availablePositions >= 7;\r\n\r\n return isLastPage && hasManyPages && isSecondLastPageMissing && hasEnoughPositions;\r\n }\r\n\r\n private showEllipsisLastWithoutTotal(pages: number[], page: number, totalPages?: number) {\r\n return totalPages ? false : pages.at(-1) === page;\r\n }\r\n\r\n private getPageRangeWithoutTotalPages(currentPage: number, availablePositions: number): number[] {\r\n const positionRange = availablePositions >= 9 ? 2 : 0;\r\n const start = Math.max(1, currentPage - positionRange);\r\n\r\n // Creates an array of numbers from `start` to `currentPage + 1`\r\n const result = Array.from({ length: currentPage - start + 2 }, (_, i) => start + i);\r\n\r\n // Adds 1 to the start of the result array if `start` is >= 2\r\n if (start >= 2) result.unshift(1);\r\n\r\n return result;\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-pagination.entry.esm.js","sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"pagination.variables\" as pagination-variables;\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n ul {\r\n padding-inline-start: initial;\r\n text-align: center;\r\n\r\n > li {\r\n display: inline-block;\r\n font-weight: bold;\r\n line-height: calc(pagination-variables.$item-size - pagination-variables.$border-size * 2);\r\n text-align: center;\r\n vertical-align: middle;\r\n\r\n > a,\r\n > span {\r\n align-items: center;\r\n color: colors.$grasgroen;\r\n display: flex;\r\n block-size: pagination-variables.$item-size;\r\n justify-content: center;\r\n position: relative;\r\n min-inline-size: pagination-variables.$item-size;\r\n padding: #{units.$u1 * 0.25};\r\n padding-block: units.$u1 * 0.25;\r\n padding-inline: units.$u1 * 0.25;\r\n }\r\n\r\n > a:active {\r\n background-color: colors.$grasgroen-10;\r\n }\r\n\r\n > span {\r\n border: pagination-variables.$border-size solid transparent;\r\n border-radius: pagination-variables.$item-size * 0.5;\r\n }\r\n\r\n a {\r\n line-height: pagination-variables.$line-height;\r\n text-decoration: none;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n\r\n &::after {\r\n border-block-end-color: colors.$grasgroen;\r\n }\r\n }\r\n\r\n &::after {\r\n border-block-end: 3px solid transparent;\r\n inset-block-end: 0;\r\n content: \"\";\r\n display: inline-block;\r\n inset-inline-start: 0;\r\n position: absolute;\r\n inline-size: 100%;\r\n }\r\n }\r\n\r\n &.active {\r\n span {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n }\r\n\r\n & + li {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n @include utilities.sr-only();\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Prop,\r\n State,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\n\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-pagination\",\r\n styleUrl: \"pagination.scss\",\r\n shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n small: 7,\r\n medium: 9,\r\n large: 11,\r\n };\r\n\r\n private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n @Element()\r\n host!: HTMLDsoPaginationElement;\r\n\r\n @State()\r\n availablePositions?: number;\r\n /*\r\n Total pages\r\n /\r\n @Prop()\r\n totalPages?: number;\r\n\r\n /\r\n Current page\r\n /\r\n @Prop()\r\n currentPage?: number;\r\n\r\n /\r\n This function is called to format the href\r\n /\r\n @Prop()\r\n formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n /\r\n Emitted on page select\r\n /\r\n @Event()\r\n dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n /\r\n Listens to the dsoSizeChange event on Responsive Element\r\n */\r\n @Listen(\"dsoSizeChange\")\r\n sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n }\r\n\r\n private clickHandler(e: MouseEvent, page: number) {\r\n this.dsoSelectPage.emit({\r\n originalEvent: e,\r\n page,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.responsiveElement\r\n ?.getSize()\r\n .then(\r\n (size: ResponsiveElementSize) =>\r\n (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.totalPages && !this.currentPage) {\r\n return null;\r\n }\r\n\r\n if (this.availablePositions === undefined) {\r\n return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n }\r\n\r\n const availablePositions = this.availablePositions;\r\n\r\n const currentPage = this.currentPage ?? 0;\r\n\r\n const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n return (\r\n <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n <nav class=\"pagination\" aria-label=\"Paginering\">\r\n <ul>\r\n <li class={currentPage <= 1 \|\| !currentPage ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(currentPage - 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, currentPage - 1)}\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </a>\r\n </li>\r\n {pages.map((page) => (\r\n <Fragment>\r\n {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n {currentPage === page ? (\r\n <span aria-current=\"page\">{page}</span>\r\n ) : (\r\n <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n {page}\r\n </a>\r\n )}\r\n {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n </li>\r\n\r\n {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n {this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n </Fragment>\r\n ))}\r\n <li\r\n class={\r\n (this.totalPages && currentPage >= this.totalPages) \|\| !currentPage ? \"dso-page-hidden\" : undefined\r\n }\r\n >\r\n <a\r\n href={this.formatHref(currentPage + 1)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) => currentPage && this.clickHandler(e, currentPage + 1)}\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private getAvailablePositions(sizePositions: number) {\r\n if (sizePositions % 2 === 0) {\r\n // Even aantal posities zorgt voor een scheve pagination\r\n return sizePositions - 1;\r\n }\r\n if (sizePositions <= 3) {\r\n // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n return 3;\r\n }\r\n\r\n return sizePositions;\r\n }\r\n\r\n private getPages(currentPage: number, availablePositions: number, totalPages?: number): number[] {\r\n if (totalPages) {\r\n if (totalPages + 2 <= availablePositions) {\r\n // + 2 voor de vorige en volgende knop\r\n return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n }\r\n\r\n if (availablePositions === 3) {\r\n return [currentPage];\r\n }\r\n\r\n if (availablePositions === 5) {\r\n return [1, currentPage, totalPages];\r\n }\r\n\r\n return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n }\r\n return this.getPageRangeWithoutTotalPages(currentPage, availablePositions);\r\n }\r\n\r\n private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n const range: number[] = [];\r\n\r\n const positionRange = Math.floor(availablePositions / 2);\r\n\r\n if (currentPage <= positionRange) {\r\n for (let i = 2; i <= availablePositions - 4; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n if (positionRange === 1) {\r\n if (currentPage > totalPages - 2) {\r\n range.push(totalPages - 2);\r\n }\r\n\r\n range.push(currentPage);\r\n\r\n if (currentPage < 3) {\r\n range.push(3);\r\n }\r\n }\r\n\r\n if (positionRange > 1) {\r\n const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n for (\r\n let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n i++\r\n ) {\r\n if (i > 2 && i < totalPages - 1) {\r\n range.push(i);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentPage > totalPages - positionRange) {\r\n for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n return range.filter((v, i, a) => a.indexOf(v) === i);\r\n }\r\n\r\n private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n const isFirstPage = pages.indexOf(page) === 0;\r\n const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n const isPageTwoMissing = !pages.includes(2);\r\n const hasEnoughPositions = availablePositions >= 7;\r\n\r\n return isFirstPage && hasManyPages && isPageTwoMissing && hasEnoughPositions;\r\n }\r\n\r\n private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n const isLastPage = pages.indexOf(page) === pages.length - 1;\r\n const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n const isSecondLastPageMissing = !pages.includes(totalPages - 1);\r\n const hasEnoughPositions = availablePositions >= 7;\r\n\r\n return isLastPage && hasManyPages && isSecondLastPageMissing && hasEnoughPositions;\r\n }\r\n\r\n private showEllipsisLastWithoutTotal(pages: number[], page: number, totalPages?: number) {\r\n return totalPages ? false : pages.at(-1) === page;\r\n }\r\n\r\n private getPageRangeWithoutTotalPages(currentPage: number, availablePositions: number): number[] {\r\n const positionRange = availablePositions >= 9 ? 2 : 0;\r\n const start = Math.max(1, currentPage - positionRange);\r\n\r\n // Creates an array of numbers from `start` to `currentPage + 1`\r\n const result = Array.from({ length: currentPage - start + 2 }, (_, i) => start + i);\r\n\r\n // Adds 1 to the start of the result array if `start` is >= 2\r\n if (start >= 2) result.unshift(1);\r\n\r\n return result;\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/dso-toolkit/dso-plekinfo-card.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-plekinfo-card.entry.esm.js","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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-plekinfo-card.entry.esm.js","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"],"names":[],"mappings":"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"}

package/dist/dso-toolkit/dso-progress-bar.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-progress-bar.entry.esm.js","sources":["src/components/progress-bar/progress-bar.scss?tag=dso-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-bar\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.progress {\r\n @include progress-bar.root();\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-progress-bar\",\r\n styleUrl: \"progress-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class ProgressBar {\r\n /*\r\n The current progress. Should be between `min` and `max`.\r\n /\r\n @Prop()\r\n progress!: number;\r\n\r\n /\r\n From where progress is made.\r\n /\r\n @Prop()\r\n min = 0;\r\n\r\n /\r\n When the operation completes.\r\n */\r\n @Prop()\r\n max = 100;\r\n\r\n render() {\r\n const progressNumber = Math.round(this.progress);\r\n const progressPercentage = `${progressNumber}%`;\r\n\r\n return (\r\n <div class=\"progress\">\r\n <span\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n aria-labelledby=\"progress-bar-label\"\r\n aria-valuenow={progressNumber}\r\n aria-valuemin={this.min}\r\n aria-valuemax={this.max}\r\n >\r\n <span style={{ width: `${progressPercentage}` }}></span>\r\n </span>\r\n <span id=\"progress-bar-label\">\r\n <slot></slot>\r\n </span>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG~~,kgBAAkgB~~;;~~MCO5gB~~,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;AAEG;AAEH,QAAA,IAAG,CAAA,GAAA,GAAG,CAAC;AAEP;;AAEG;AAEH,QAAA,IAAG,CAAA,GAAA,GAAG,GAAG;AAwBV;IAtBC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;AAChD,QAAA,MAAM,kBAAkB,GAAG,CAAG,EAAA,cAAc,GAAG;QAE/C,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EACF,iBAAA,EAAA,oBAAoB,EACrB,eAAA,EAAA,cAAc,mBACd,IAAI,CAAC,GAAG,EACR,eAAA,EAAA,IAAI,CAAC,GAAG,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAA,CAAE,EAAE,EAAA,CAAS,CACnD,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,oBAAoB,EAAA,EAC3B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH;;;;;;;"}
1	+ {"version":3,"file":"dso-progress-bar.entry.esm.js","sources":["src/components/progress-bar/progress-bar.scss?tag=dso-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-bar\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.progress {\r\n @include progress-bar.root();\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-progress-bar\",\r\n styleUrl: \"progress-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class ProgressBar {\r\n /*\r\n The current progress. Should be between `min` and `max`.\r\n /\r\n @Prop()\r\n progress!: number;\r\n\r\n /\r\n From where progress is made.\r\n /\r\n @Prop()\r\n min = 0;\r\n\r\n /\r\n When the operation completes.\r\n */\r\n @Prop()\r\n max = 100;\r\n\r\n render() {\r\n const progressNumber = Math.round(this.progress);\r\n const progressPercentage = `${progressNumber}%`;\r\n\r\n return (\r\n <div class=\"progress\">\r\n <span\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n aria-labelledby=\"progress-bar-label\"\r\n aria-valuenow={progressNumber}\r\n aria-valuemin={this.min}\r\n aria-valuemax={this.max}\r\n >\r\n <span style={{ width: `${progressPercentage}` }}></span>\r\n </span>\r\n <span id=\"progress-bar-label\">\r\n <slot></slot>\r\n </span>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,+eAA+e;;MCOzf,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;AAEG;AAEH,QAAA,IAAG,CAAA,GAAA,GAAG,CAAC;AAEP;;AAEG;AAEH,QAAA,IAAG,CAAA,GAAA,GAAG,GAAG;AAwBV;IAtBC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;AAChD,QAAA,MAAM,kBAAkB,GAAG,CAAG,EAAA,cAAc,GAAG;QAE/C,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EACF,iBAAA,EAAA,oBAAoB,EACrB,eAAA,EAAA,cAAc,mBACd,IAAI,CAAC,GAAG,EACR,eAAA,EAAA,IAAI,CAAC,GAAG,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAA,CAAE,EAAE,EAAA,CAAS,CACnD,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,oBAAoB,EAAA,EAC3B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH;;;;;;;"}

package/dist/dso-toolkit/dso-progress-indicator.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-progress-indicator.entry.esm.js","sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-progress-indicator\": {\r\n label: \"Loading results. Please wait...\",\r\n },\r\n },\r\n nl: {\r\n \"dso-progress-indicator\": {\r\n label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n @include progress-indicator.small();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.small-block();\r\n }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n @include progress-indicator.medium();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.medium-block();\r\n }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n @include progress-indicator.large();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.large-block();\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n @Element()\r\n host!: HTMLDsoProgressIndicatorElement;\r\n\r\n /*\r\n The label of the Progress Indicator.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The size (width) of the Progress Indicator.\r\n \r\n If no size is set, falls back to `small`.\r\n /\r\n @Prop({ reflect: true })\r\n size?: \"small\" \| \"medium\" \| \"large\";\r\n\r\n /\r\n Set for bloatier Progress Indicator.\r\n */\r\n @Prop({ reflect: true })\r\n block?: boolean;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label \|\| this.text(\"label\")}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,iCAAiC;AACzC,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,kDAAkD;AAC1D,SAAA;AACF,KAAA;CACF;;ACbD,MAAM,oBAAoB,GAAG,~~qhCAAqhC~~;;~~MCWriC~~,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AA6BU,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAcnD;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,EAAA,EACxG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,EAAA,CAAY,CAC/B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF;;;;;;;;"}
1	+ {"version":3,"file":"dso-progress-indicator.entry.esm.js","sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-progress-indicator\": {\r\n label: \"Loading results. Please wait...\",\r\n },\r\n },\r\n nl: {\r\n \"dso-progress-indicator\": {\r\n label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n @include progress-indicator.small();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.small-block();\r\n }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n @include progress-indicator.medium();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.medium-block();\r\n }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n @include progress-indicator.large();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.large-block();\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n @Element()\r\n host!: HTMLDsoProgressIndicatorElement;\r\n\r\n /*\r\n The label of the Progress Indicator.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The size (width) of the Progress Indicator.\r\n \r\n If no size is set, falls back to `small`.\r\n /\r\n @Prop({ reflect: true })\r\n size?: \"small\" \| \"medium\" \| \"large\";\r\n\r\n /\r\n Set for bloatier Progress Indicator.\r\n */\r\n @Prop({ reflect: true })\r\n block?: boolean;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label \|\| this.text(\"label\")}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,iCAAiC;AACzC,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,kDAAkD;AAC1D,SAAA;AACF,KAAA;CACF;;ACbD,MAAM,oBAAoB,GAAG,kgCAAkgC;;MCWlhC,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AA6BU,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAcnD;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,EAAA,EACxG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,EAAA,CAAY,CAC/B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF;;;;;;;;"}

package/dist/dso-toolkit/dso-project-item.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-project-item.entry.esm.js","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"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,~~8pCAA8pC~~;;~~MCOxqC~~,WAAW,GAAA,MAAA;;;;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;;;;;;;"}
1	+ {"version":3,"file":"dso-project-item.entry.esm.js","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"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,2oCAA2oC;;MCOrpC,WAAW,GAAA,MAAA;;;;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;;;;;;;"}

package/dist/dso-toolkit/dso-scrollable.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-scrollable.entry.esm.js","sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n block-size: 100%;\r\n overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n position: relative;\r\n\r\n .dso-scroll-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n overflow-y: auto;\r\n\r\n &::before,\r\n &::after {\r\n background-repeat: no-repeat;\r\n background-size: 100% units.$u3;\r\n content: \"\";\r\n display: block;\r\n block-size: units.$u3;\r\n inset-inline-start: 0;\r\n opacity: 0;\r\n overflow: visible;\r\n position: absolute;\r\n transition: opacity 150ms ease-in-out;\r\n inline-size: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n &::before {\r\n background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-start: 0;\r\n }\r\n\r\n &::after {\r\n background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-end: 0;\r\n }\r\n\r\n &.dso-scroll-bottom {\r\n &::before {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-top {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-middle {\r\n &::before,\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries: ResizeObserverEntry[]) =>\r\n entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50,\r\n ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n }),\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;;;AAAA,MAAM,aAAa,GAAG,~~2yCAA2yC~~;;~~ACMj0C~~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"}
1	+ {"version":3,"file":"dso-scrollable.entry.esm.js","sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n block-size: 100%;\r\n overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n position: relative;\r\n\r\n .dso-scroll-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n overflow-y: auto;\r\n\r\n &::before,\r\n &::after {\r\n background-repeat: no-repeat;\r\n background-size: 100% units.$u3;\r\n content: \"\";\r\n display: block;\r\n block-size: units.$u3;\r\n inset-inline-start: 0;\r\n opacity: 0;\r\n overflow: visible;\r\n position: absolute;\r\n transition: opacity 150ms ease-in-out;\r\n inline-size: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n &::before {\r\n background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-start: 0;\r\n }\r\n\r\n &::after {\r\n background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-end: 0;\r\n }\r\n\r\n &.dso-scroll-bottom {\r\n &::before {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-top {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-middle {\r\n &::before,\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries: ResizeObserverEntry[]) =>\r\n entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50,\r\n ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n }),\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/dso-toolkit/dso-skiplink.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-skiplink.entry.esm.js","sources":["src/components/skiplink/skiplink.scss?tag=dso-skiplink&encapsulation=shadow","src/components/skiplink/skiplink.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 position: fixed;\r\n inset-block-start: 0;\r\n inset-inline-start: 0;\r\n z-index: 2;\r\n\r\n display: block;\r\n\r\n inline-size: 100vw;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\na {\r\n position: absolute;\r\n inset-inline-start: 50%;\r\n inset-block-start: units.$u2;\r\n\r\n display: inline-block;\r\n\r\n inline-size: 1px;\r\n block-size: 1px;\r\n\r\n overflow: hidden;\r\n\r\n background-color: colors.$wit;\r\n\r\n border-radius: units.$focus-border-radius;\r\n\r\n clip: rect(1px, 1px, 1px, 1px);\r\n\r\n color: var(--link-color);\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- prevent wrapping\r\n white-space: nowrap;\r\n text-decoration: none;\r\n\r\n transform: translate(-50%);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n\r\n &:focus-visible {\r\n inline-size: auto;\r\n block-size: auto;\r\n\r\n padding: units.$u1;\r\n\r\n clip: auto;\r\n\r\n white-space: normal;\r\n\r\n outline-offset: 2px;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-skiplink\",\r\n styleUrl: \"skiplink.scss\",\r\n shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n /*\r\n The location to which the skiplink links.\r\n /\r\n @Prop({ reflect: true })\r\n to!: string \| undefined;\r\n\r\n /\r\n link text\r\n /\r\n @Prop({ reflect: true })\r\n label!: string \| undefined;\r\n\r\n /\r\n Emitted when the Skiplink is clicked.\r\n */\r\n @Event()\r\n dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.to) {\r\n return;\r\n }\r\n\r\n return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n render() {\r\n return (\r\n <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n {this.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,WAAW,GAAG,~~qmBAAqmB~~;;~~MCW5mB~~,QAAQ,GAAA,MAAA;;;;;AAmBX,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YAClD;;AAGF,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;IAG9F,MAAM,GAAA;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,CAAA,CAAE,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAC9D,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,eAAe,EAAY,CAAA,CACxC;;;;;;;"}
1	+ {"version":3,"file":"dso-skiplink.entry.esm.js","sources":["src/components/skiplink/skiplink.scss?tag=dso-skiplink&encapsulation=shadow","src/components/skiplink/skiplink.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 position: fixed;\r\n inset-block-start: 0;\r\n inset-inline-start: 0;\r\n z-index: 2;\r\n\r\n display: block;\r\n\r\n inline-size: 100vw;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\na {\r\n position: absolute;\r\n inset-inline-start: 50%;\r\n inset-block-start: units.$u2;\r\n\r\n display: inline-block;\r\n\r\n inline-size: 1px;\r\n block-size: 1px;\r\n\r\n overflow: hidden;\r\n\r\n background-color: colors.$wit;\r\n\r\n border-radius: units.$focus-border-radius;\r\n\r\n clip: rect(1px, 1px, 1px, 1px);\r\n\r\n color: var(--link-color);\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- prevent wrapping\r\n white-space: nowrap;\r\n text-decoration: none;\r\n\r\n transform: translate(-50%);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n\r\n &:focus-visible {\r\n inline-size: auto;\r\n block-size: auto;\r\n\r\n padding: units.$u1;\r\n\r\n clip: auto;\r\n\r\n white-space: normal;\r\n\r\n outline-offset: 2px;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-skiplink\",\r\n styleUrl: \"skiplink.scss\",\r\n shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n /*\r\n The location to which the skiplink links.\r\n /\r\n @Prop({ reflect: true })\r\n to!: string \| undefined;\r\n\r\n /\r\n link text\r\n /\r\n @Prop({ reflect: true })\r\n label!: string \| undefined;\r\n\r\n /\r\n Emitted when the Skiplink is clicked.\r\n */\r\n @Event()\r\n dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.to) {\r\n return;\r\n }\r\n\r\n return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n render() {\r\n return (\r\n <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n {this.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,WAAW,GAAG,klBAAklB;;MCWzlB,QAAQ,GAAA,MAAA;;;;;AAmBX,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YAClD;;AAGF,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;IAG9F,MAAM,GAAA;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,CAAA,CAAE,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAC9D,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,eAAe,EAAY,CAAA,CACxC;;;;;;;"}

package/dist/dso-toolkit/dso-survey-rating.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-survey-rating.entry.esm.js","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"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,~~6ptBAA6ptB~~;;~~MCSxqtB~~,YAAY,GAAA,MAAA;;;;;;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;;;;;;;"}
1	+ {"version":3,"file":"dso-survey-rating.entry.esm.js","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"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,qosBAAqosB;;MCShpsB,YAAY,GAAA,MAAA;;;;;;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;;;;;;;"}

package/dist/dso-toolkit/dso-tab.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-tab.entry.esm.js","sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\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/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include link.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/*\r\n @slot - The label for this tab\r\n /\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /\r\n Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n /\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /\r\n The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n /\r\n @Prop()\r\n href?: string;\r\n\r\n /\r\n Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n /\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement \| HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) \|\| this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,MAAM,GAAG,~~mxEAAmxE~~;;~~MCarxE~~,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,CACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJ,CAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;"}
1	+ {"version":3,"file":"dso-tab.entry.esm.js","sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\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/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include link.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/*\r\n @slot - The label for this tab\r\n /\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /\r\n Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n /\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /\r\n The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n /\r\n @Prop()\r\n href?: string;\r\n\r\n /\r\n Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n /\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement \| HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) \|\| this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE;;MCalwE,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,CACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJ,CAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;"}

package/dist/dso-toolkit/dso-tabs.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-tabs.entry.esm.js","sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.tabs {\r\n border-block-end: 1px solid colors.$grasgroen;\r\n display: flex;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n margin-block-end: units.$block-spacing-large;\r\n padding-inline-start: 0;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border: 0;\r\n display: block;\r\n }\r\n}\r\n","import { Component, Element, Host, forceUpdate, h } from \"@stencil/core\";\r\n\r\n/*\r\n @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n tag: \"dso-tabs\",\r\n styleUrl: \"tabs.scss\",\r\n shadow: true,\r\n})\r\nexport class Tabs {\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n host!: HTMLDsoTabsElement;\r\n\r\n private get enabledTabs() {\r\n // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n (tabs, tab) => {\r\n if (!tab.disabled) {\r\n tabs.push(tab);\r\n }\r\n\r\n return tabs;\r\n },\r\n [],\r\n );\r\n }\r\n\r\n private get firstTab() {\r\n return this.enabledTabs[0];\r\n }\r\n\r\n private get lastTab() {\r\n return this.enabledTabs[this.enabledTabs.length - 1];\r\n }\r\n\r\n private moveFocusToTab(tab: HTMLDsoTabElement \| undefined) {\r\n tab?._dsoFocus();\r\n }\r\n\r\n private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (!(e.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (e.key) {\r\n case \"ArrowRight\":\r\n case \"ArrowDown\":\r\n this.moveFocusToNextTab(e.target);\r\n break;\r\n case \"ArrowLeft\":\r\n case \"ArrowUp\":\r\n this.moveFocusToPreviousTab(e.target);\r\n break;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n <slot />\r\n </div>\r\n <div role=\"tabpanel\" tabindex=\"0\">\r\n <slot name=\"panel\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,~~iRAAiR~~;;~~MCWpR~~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"}
1	+ {"version":3,"file":"dso-tabs.entry.esm.js","sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.tabs {\r\n border-block-end: 1px solid colors.$grasgroen;\r\n display: flex;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n margin-block-end: units.$block-spacing-large;\r\n padding-inline-start: 0;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border: 0;\r\n display: block;\r\n }\r\n}\r\n","import { Component, Element, Host, forceUpdate, h } from \"@stencil/core\";\r\n\r\n/*\r\n @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n tag: \"dso-tabs\",\r\n styleUrl: \"tabs.scss\",\r\n shadow: true,\r\n})\r\nexport class Tabs {\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n host!: HTMLDsoTabsElement;\r\n\r\n private get enabledTabs() {\r\n // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n (tabs, tab) => {\r\n if (!tab.disabled) {\r\n tabs.push(tab);\r\n }\r\n\r\n return tabs;\r\n },\r\n [],\r\n );\r\n }\r\n\r\n private get firstTab() {\r\n return this.enabledTabs[0];\r\n }\r\n\r\n private get lastTab() {\r\n return this.enabledTabs[this.enabledTabs.length - 1];\r\n }\r\n\r\n private moveFocusToTab(tab: HTMLDsoTabElement \| undefined) {\r\n tab?._dsoFocus();\r\n }\r\n\r\n private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (!(e.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (e.key) {\r\n case \"ArrowRight\":\r\n case \"ArrowDown\":\r\n this.moveFocusToNextTab(e.target);\r\n break;\r\n case \"ArrowLeft\":\r\n case \"ArrowUp\":\r\n this.moveFocusToPreviousTab(e.target);\r\n break;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n <slot />\r\n </div>\r\n <div role=\"tabpanel\" tabindex=\"0\">\r\n <slot name=\"panel\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/dso-toolkit/dso-toggletip.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-toggletip.entry.esm.js","sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: inline-block;\r\n\r\n // tooltip arrow placement exceptions\r\n --tooltip-margin-block-start: 0;\r\n --tooltip-margin-inline-start: 3px;\r\n --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n outline: none;\r\n z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-toggletip\",\r\n styleUrl: \"toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class Toggletip {\r\n @Element()\r\n host!: HTMLDsoToggletipElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n /*\r\n Toggletip label.\r\n /\r\n @Prop()\r\n label = \"Toelichting\";\r\n\r\n /\r\n Toggletip position.\r\n /\r\n @Prop()\r\n position: Placement = \"right\";\r\n\r\n /\r\n Set to true for small Toggletip.\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Set to true for secondary Toggletip.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n private click = () => {\r\n if (this.active) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n };\r\n\r\n private close = () => {\r\n this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.active = false;\r\n };\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (!event.defaultPrevented && event.key === \"Escape\") {\r\n this.close();\r\n this.infoButton?.setFocus();\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <dso-info-button\r\n aria-describedby=\"toggle\"\r\n onClick={this.click}\r\n label={this.label}\r\n active={this.active}\r\n secondary={this.secondary}\r\n ref={(element) => (this.infoButton = element)}\r\n />\r\n <dso-tooltip\r\n stateless\r\n descriptive\r\n id=\"toggle\"\r\n strategy=\"absolute\"\r\n active={this.active}\r\n position={this.position}\r\n small={this.small}\r\n >\r\n <slot />\r\n </dso-tooltip>\r\n </>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,~~yPAAyP~~;;~~MCQjQ~~,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;"}
1	+ {"version":3,"file":"dso-toggletip.entry.esm.js","sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: inline-block;\r\n\r\n // tooltip arrow placement exceptions\r\n --tooltip-margin-block-start: 0;\r\n --tooltip-margin-inline-start: 3px;\r\n --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n outline: none;\r\n z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-toggletip\",\r\n styleUrl: \"toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class Toggletip {\r\n @Element()\r\n host!: HTMLDsoToggletipElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n /*\r\n Toggletip label.\r\n /\r\n @Prop()\r\n label = \"Toelichting\";\r\n\r\n /\r\n Toggletip position.\r\n /\r\n @Prop()\r\n position: Placement = \"right\";\r\n\r\n /\r\n Set to true for small Toggletip.\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Set to true for secondary Toggletip.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n private click = () => {\r\n if (this.active) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n };\r\n\r\n private close = () => {\r\n this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.active = false;\r\n };\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (!event.defaultPrevented && event.key === \"Escape\") {\r\n this.close();\r\n this.infoButton?.setFocus();\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <dso-info-button\r\n aria-describedby=\"toggle\"\r\n onClick={this.click}\r\n label={this.label}\r\n active={this.active}\r\n secondary={this.secondary}\r\n ref={(element) => (this.infoButton = element)}\r\n />\r\n <dso-tooltip\r\n stateless\r\n descriptive\r\n id=\"toggle\"\r\n strategy=\"absolute\"\r\n active={this.active}\r\n position={this.position}\r\n small={this.small}\r\n >\r\n <slot />\r\n </dso-tooltip>\r\n </>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,sOAAsO;;MCQ9O,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;"}