@dso-toolkit/core 62.13.0 → 62.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dso-advanced-select.cjs.entry.js +3 -2
- package/dist/cjs/dso-advanced-select.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-alert_7.cjs.entry.js +3 -2
- package/dist/cjs/dso-alert_7.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +56 -73
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +2 -1
- package/dist/cjs/dso-helpcenter-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-icon.cjs.entry.js +12 -0
- package/dist/cjs/dso-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-input-range.cjs.entry.js +39 -0
- package/dist/cjs/dso-input-range.cjs.entry.js.map +1 -0
- package/dist/cjs/dso-list-button.cjs.entry.js +2 -1
- package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-pagination.cjs.entry.js +1 -1
- package/dist/cjs/dso-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-progress-indicator.cjs.entry.js +2 -7
- package/dist/cjs/dso-progress-indicator.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-scrollable.cjs.entry.js +1 -1
- package/dist/cjs/dso-scrollable.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-toggletip.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/{focus-trap.esm-1633a28f.js → focus-trap.esm-6cff35a7.js} +16 -584
- package/dist/cjs/focus-trap.esm-6cff35a7.js.map +1 -0
- package/dist/cjs/index.esm-970bc106.js +578 -0
- package/dist/cjs/index.esm-970bc106.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/dropdown-menu/dropdown-menu.js +69 -72
- package/dist/collection/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/collection/components/icon/icon.js +2 -0
- package/dist/collection/components/icon/icon.js.map +1 -1
- package/dist/collection/components/input-range/input-range.css +74 -0
- package/dist/collection/components/input-range/input-range.interfaces.js +2 -0
- package/dist/collection/components/input-range/input-range.interfaces.js.map +1 -0
- package/dist/collection/components/input-range/input-range.js +186 -0
- package/dist/collection/components/input-range/input-range.js.map +1 -0
- package/dist/collection/components/pagination/pagination.css +3 -2
- package/dist/collection/components/progress-indicator/progress-indicator.css +7 -3
- package/dist/collection/components/progress-indicator/progress-indicator.js +1 -6
- package/dist/collection/components/progress-indicator/progress-indicator.js.map +1 -1
- package/dist/collection/components/scrollable/scrollable.css +1 -0
- package/dist/collection/components/table/table.css +1 -1
- package/dist/collection/components/toggletip/toggletip.js +9 -3
- package/dist/collection/components/toggletip/toggletip.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.js +9 -3
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/components/dropdown-menu.js +56 -73
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/dso-advanced-select.js +2 -1
- package/dist/components/dso-advanced-select.js.map +1 -1
- package/dist/components/dso-autosuggest.js +7 -1
- package/dist/components/dso-autosuggest.js.map +1 -1
- package/dist/components/dso-input-range.d.ts +11 -0
- package/dist/components/dso-input-range.js +61 -0
- package/dist/components/dso-input-range.js.map +1 -0
- package/dist/components/dso-pagination.js +1 -1
- package/dist/components/dso-pagination.js.map +1 -1
- package/dist/components/dso-toggletip.js.map +1 -1
- package/dist/components/focus-trap.esm.js +2 -569
- package/dist/components/focus-trap.esm.js.map +1 -1
- package/dist/components/icon.js +12 -0
- package/dist/components/icon.js.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.esm.js +572 -0
- package/dist/components/index.esm.js.map +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/progress-indicator.js +9 -8
- package/dist/components/progress-indicator.js.map +1 -1
- package/dist/components/scrollable.js +1 -1
- package/dist/components/scrollable.js.map +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/table.js.map +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
- package/dist/dso-toolkit/p-1a85e2f8.entry.js +2 -0
- package/dist/dso-toolkit/{p-6d602847.entry.js.map → p-1a85e2f8.entry.js.map} +1 -1
- package/dist/dso-toolkit/p-1b8d34a6.entry.js +2 -0
- package/dist/dso-toolkit/{p-5595d073.entry.js.map → p-1b8d34a6.entry.js.map} +1 -1
- package/dist/dso-toolkit/p-36ddddf4.entry.js +2 -0
- package/dist/dso-toolkit/{p-2862c19a.entry.js.map → p-36ddddf4.entry.js.map} +1 -1
- package/dist/dso-toolkit/p-43511221.entry.js.map +1 -1
- package/dist/dso-toolkit/{p-eeacda43.entry.js → p-46955cda.entry.js} +2 -2
- package/dist/dso-toolkit/p-46955cda.entry.js.map +1 -0
- package/dist/dso-toolkit/p-69231fe7.entry.js +2 -0
- package/dist/dso-toolkit/p-69231fe7.entry.js.map +1 -0
- package/dist/dso-toolkit/p-86133aa5.js +6 -0
- package/dist/dso-toolkit/p-86133aa5.js.map +1 -0
- package/dist/dso-toolkit/p-8dbb7ece.entry.js +2 -0
- package/dist/dso-toolkit/p-8dbb7ece.entry.js.map +1 -0
- package/dist/dso-toolkit/p-b0116121.entry.js.map +1 -1
- package/dist/dso-toolkit/p-e0f9a16f.entry.js +2 -0
- package/dist/dso-toolkit/p-e0f9a16f.entry.js.map +1 -0
- package/dist/dso-toolkit/p-e3655ae6.entry.js +2 -0
- package/dist/dso-toolkit/{p-e32f287e.entry.js.map → p-e3655ae6.entry.js.map} +1 -1
- package/dist/dso-toolkit/p-eb7275e9.entry.js +2 -0
- package/dist/dso-toolkit/{p-1faa1497.entry.js.map → p-eb7275e9.entry.js.map} +1 -1
- package/dist/dso-toolkit/p-f3facab4.entry.js +2 -0
- package/dist/dso-toolkit/p-f3facab4.entry.js.map +1 -0
- package/dist/dso-toolkit/p-fbb226aa.js +6 -0
- package/dist/dso-toolkit/p-fbb226aa.js.map +1 -0
- package/dist/esm/dso-advanced-select.entry.js +2 -1
- package/dist/esm/dso-advanced-select.entry.js.map +1 -1
- package/dist/esm/dso-alert_7.entry.js +3 -2
- package/dist/esm/dso-alert_7.entry.js.map +1 -1
- package/dist/esm/dso-dropdown-menu.entry.js +55 -72
- package/dist/esm/dso-dropdown-menu.entry.js.map +1 -1
- package/dist/esm/dso-helpcenter-panel.entry.js +2 -1
- package/dist/esm/dso-helpcenter-panel.entry.js.map +1 -1
- package/dist/esm/dso-icon.entry.js +12 -0
- package/dist/esm/dso-icon.entry.js.map +1 -1
- package/dist/esm/dso-input-range.entry.js +35 -0
- package/dist/esm/dso-input-range.entry.js.map +1 -0
- package/dist/esm/dso-list-button.entry.js +2 -1
- package/dist/esm/dso-list-button.entry.js.map +1 -1
- package/dist/esm/dso-pagination.entry.js +1 -1
- package/dist/esm/dso-pagination.entry.js.map +1 -1
- package/dist/esm/dso-progress-indicator.entry.js +2 -7
- package/dist/esm/dso-progress-indicator.entry.js.map +1 -1
- package/dist/esm/dso-scrollable.entry.js +1 -1
- package/dist/esm/dso-scrollable.entry.js.map +1 -1
- package/dist/esm/dso-toggletip.entry.js.map +1 -1
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-tooltip.entry.js.map +1 -1
- package/dist/esm/{focus-trap.esm-22fb5633.js → focus-trap.esm-d8deb1f0.js} +3 -570
- package/dist/esm/focus-trap.esm-d8deb1f0.js.map +1 -0
- package/dist/esm/index.esm-7e16e884.js +572 -0
- package/dist/esm/index.esm-7e16e884.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/dropdown-menu/dropdown-menu.d.ts +4 -5
- package/dist/types/components/input-range/input-range.d.ts +38 -0
- package/dist/types/components/input-range/input-range.interfaces.d.ts +7 -0
- package/dist/types/components/toggletip/toggletip.d.ts +2 -1
- package/dist/types/components/tooltip/tooltip.d.ts +2 -1
- package/dist/types/components.d.ts +94 -4
- package/package.json +2 -2
- package/dist/cjs/focus-trap.esm-1633a28f.js.map +0 -1
- package/dist/dso-toolkit/p-1180ebe3.entry.js +0 -2
- package/dist/dso-toolkit/p-1180ebe3.entry.js.map +0 -1
- package/dist/dso-toolkit/p-1faa1497.entry.js +0 -2
- package/dist/dso-toolkit/p-2862c19a.entry.js +0 -2
- package/dist/dso-toolkit/p-5595d073.entry.js +0 -2
- package/dist/dso-toolkit/p-55dec51f.entry.js +0 -2
- package/dist/dso-toolkit/p-55dec51f.entry.js.map +0 -1
- package/dist/dso-toolkit/p-56136f3c.entry.js +0 -2
- package/dist/dso-toolkit/p-56136f3c.entry.js.map +0 -1
- package/dist/dso-toolkit/p-6d602847.entry.js +0 -2
- package/dist/dso-toolkit/p-9c0f67c8.js +0 -10
- package/dist/dso-toolkit/p-9c0f67c8.js.map +0 -1
- package/dist/dso-toolkit/p-e32f287e.entry.js +0 -2
- package/dist/dso-toolkit/p-eeacda43.entry.js.map +0 -1
- package/dist/esm/focus-trap.esm-22fb5633.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"tooltip.js","mappings":"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","names":["debounce"],"sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n name: 'maxSize',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n fn: function fn(_ref) {\n var state = _ref.state,\n name = _ref.name,\n options = _ref.options;\n var overflow = detectOverflow(state, options);\n\n var _ref2 = state.modifiersData.preventOverflow || {\n x: 0,\n y: 0\n },\n x = _ref2.x,\n y = _ref2.y;\n\n var _state$rects$popper = state.rects.popper,\n width = _state$rects$popper.width,\n height = _state$rects$popper.height;\n\n var _state$placement$spli = state.placement.split('-'),\n basePlacement = _state$placement$spli[0];\n\n var widthProp = basePlacement === 'left' ? 'left' : 'right';\n var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n state.modifiersData[name] = {\n width: width - overflow[widthProp] - x,\n height: height - overflow[heightProp] - y\n };\n }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\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 \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n visibility: hidden;\r\n}\r\n\r\n:host-context(dso-toggletip) {\r\n *[data-popper-placement=\"top\"] {\r\n .tooltip-arrow {\r\n margin-inline-start: 3px;\r\n }\r\n }\r\n\r\n *[data-popper-placement=\"right\"] {\r\n .tooltip-arrow {\r\n margin-block-start: 0;\r\n }\r\n }\r\n\r\n *[data-popper-placement=\"bottom\"] {\r\n .tooltip-arrow {\r\n margin-inline-start: 3px;\r\n }\r\n }\r\n\r\n *[data-popper-placement=\"left\"] {\r\n margin-inline-end: units.$u1 * -1 !important;\r\n\r\n .tooltip-arrow {\r\n margin-block-start: 0;\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n font-family: typography.$font-family-base;\r\n // We deliberately do NOT reset font-size.\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: left; // Fallback for where `start` is not supported\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 word-break: normal;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n\r\n --link-color: #{colors.$grasgroen};\r\n\r\n display: block;\r\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n font-size: typography.$font-size-small;\r\n opacity: 0;\r\n position: absolute;\r\n transition: opacity tooltip-variables.$transition-duration linear;\r\n z-index: zindex.$tooltip;\r\n\r\n &.in {\r\n opacity: tooltip-variables.$opacity;\r\n }\r\n\r\n .tooltip-inner {\r\n background-color: colors.$wit;\r\n border-radius: tooltip-variables.$border-radius;\r\n color: colors.$grijs-90;\r\n display: inline-block;\r\n font-size: typography.$root-font-size-base;\r\n max-width: tooltip-variables.$max-width;\r\n padding-block: tooltip-variables.$padding-vertical;\r\n padding-inline: tooltip-variables.$padding-horizontal;\r\n position: relative;\r\n\r\n &.dso-small {\r\n max-width: tooltip-variables.$max-width-small;\r\n }\r\n }\r\n\r\n .tooltip-arrow {\r\n border-color: transparent;\r\n border-style: solid;\r\n height: 0;\r\n width: 0;\r\n }\r\n\r\n &[data-popper-placement=\"top\"] {\r\n margin-block-start: -3px;\r\n padding-block: tooltip-variables.$arrow-width;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n bottom: 0;\r\n border-block-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-width;\r\n border-block-end-width: 0;\r\n margin-inline-start: tooltip-variables.$arrow-margin * -1;\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"right\"] {\r\n margin-inline-start: 3px;\r\n padding-block: 0;\r\n padding-inline: tooltip-variables.$arrow-width;\r\n\r\n .tooltip-arrow {\r\n left: 0;\r\n border-inline-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-width;\r\n border-inline-start-width: 0;\r\n margin-block-start: tooltip-variables.$arrow-margin * -1;\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"bottom\"] {\r\n margin-block-start: 3px;\r\n padding-block: tooltip-variables.$arrow-width;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n top: 0;\r\n border-block-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-width;\r\n border-block-start-width: 0;\r\n margin-inline-start: tooltip-variables.$arrow-margin * -1;\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"left\"] {\r\n margin-inline-start: -3px;\r\n padding-block: 0;\r\n padding-inline: tooltip-variables.$arrow-width;\r\n\r\n .tooltip-arrow {\r\n right: 0;\r\n border-inline-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-width;\r\n border-inline-end-width: 0;\r\n margin-block-start: tooltip-variables.$arrow-margin * -1;\r\n }\r\n }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip {\r\n /**\r\n * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n */\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /**\r\n * Set position of tooltip relative to target\r\n */\r\n @Prop()\r\n position: \"top\" | \"right\" | \"bottom\" | \"left\" = \"top\";\r\n\r\n /**\r\n * Set position strategy of tooltip\r\n */\r\n @Prop()\r\n strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n /**\r\n * Set attribute `no-arrow` to hide the arrow\r\n */\r\n @Prop()\r\n noArrow = false;\r\n\r\n /**\r\n * Deactivates mouseover behaviour\r\n */\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /**\r\n * Defines if the tooltip has a smaller max-width\r\n */\r\n @Prop()\r\n small?: boolean;\r\n\r\n /**\r\n * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /**\r\n * Activate the tooltip (Sets the `active` attribute)\r\n */\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /**\r\n * Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element | null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance | undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => (this.active = false),\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement | undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement | undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement | undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.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 with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"tooltip.js","mappings":"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","names":["debounce"],"sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n name: 'maxSize',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n fn: function fn(_ref) {\n var state = _ref.state,\n name = _ref.name,\n options = _ref.options;\n var overflow = detectOverflow(state, options);\n\n var _ref2 = state.modifiersData.preventOverflow || {\n x: 0,\n y: 0\n },\n x = _ref2.x,\n y = _ref2.y;\n\n var _state$rects$popper = state.rects.popper,\n width = _state$rects$popper.width,\n height = _state$rects$popper.height;\n\n var _state$placement$spli = state.placement.split('-'),\n basePlacement = _state$placement$spli[0];\n\n var widthProp = basePlacement === 'left' ? 'left' : 'right';\n var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n state.modifiersData[name] = {\n width: width - overflow[widthProp] - x,\n height: height - overflow[heightProp] - y\n };\n }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\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 \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n visibility: hidden;\r\n}\r\n\r\n:host-context(dso-toggletip) {\r\n *[data-popper-placement=\"top\"] {\r\n .tooltip-arrow {\r\n margin-inline-start: 3px;\r\n }\r\n }\r\n\r\n *[data-popper-placement=\"right\"] {\r\n .tooltip-arrow {\r\n margin-block-start: 0;\r\n }\r\n }\r\n\r\n *[data-popper-placement=\"bottom\"] {\r\n .tooltip-arrow {\r\n margin-inline-start: 3px;\r\n }\r\n }\r\n\r\n *[data-popper-placement=\"left\"] {\r\n margin-inline-end: units.$u1 * -1 !important;\r\n\r\n .tooltip-arrow {\r\n margin-block-start: 0;\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n font-family: typography.$font-family-base;\r\n // We deliberately do NOT reset font-size.\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: left; // Fallback for where `start` is not supported\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 word-break: normal;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n\r\n --link-color: #{colors.$grasgroen};\r\n\r\n display: block;\r\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n font-size: typography.$font-size-small;\r\n opacity: 0;\r\n position: absolute;\r\n transition: opacity tooltip-variables.$transition-duration linear;\r\n z-index: zindex.$tooltip;\r\n\r\n &.in {\r\n opacity: tooltip-variables.$opacity;\r\n }\r\n\r\n .tooltip-inner {\r\n background-color: colors.$wit;\r\n border-radius: tooltip-variables.$border-radius;\r\n color: colors.$grijs-90;\r\n display: inline-block;\r\n font-size: typography.$root-font-size-base;\r\n max-width: tooltip-variables.$max-width;\r\n padding-block: tooltip-variables.$padding-vertical;\r\n padding-inline: tooltip-variables.$padding-horizontal;\r\n position: relative;\r\n\r\n &.dso-small {\r\n max-width: tooltip-variables.$max-width-small;\r\n }\r\n }\r\n\r\n .tooltip-arrow {\r\n border-color: transparent;\r\n border-style: solid;\r\n height: 0;\r\n width: 0;\r\n }\r\n\r\n &[data-popper-placement=\"top\"] {\r\n margin-block-start: -3px;\r\n padding-block: tooltip-variables.$arrow-width;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n bottom: 0;\r\n border-block-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-width;\r\n border-block-end-width: 0;\r\n margin-inline-start: tooltip-variables.$arrow-margin * -1;\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"right\"] {\r\n margin-inline-start: 3px;\r\n padding-block: 0;\r\n padding-inline: tooltip-variables.$arrow-width;\r\n\r\n .tooltip-arrow {\r\n left: 0;\r\n border-inline-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-width;\r\n border-inline-start-width: 0;\r\n margin-block-start: tooltip-variables.$arrow-margin * -1;\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"bottom\"] {\r\n margin-block-start: 3px;\r\n padding-block: tooltip-variables.$arrow-width;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n top: 0;\r\n border-block-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-width;\r\n border-block-start-width: 0;\r\n margin-inline-start: tooltip-variables.$arrow-margin * -1;\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"left\"] {\r\n margin-inline-start: -3px;\r\n padding-block: 0;\r\n padding-inline: tooltip-variables.$arrow-width;\r\n\r\n .tooltip-arrow {\r\n right: 0;\r\n border-inline-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-width;\r\n border-inline-end-width: 0;\r\n margin-block-start: tooltip-variables.$arrow-margin * -1;\r\n }\r\n }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip {\r\n /**\r\n * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n */\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /**\r\n * Set position of tooltip relative to target\r\n */\r\n @Prop()\r\n position: Placement = \"top\";\r\n\r\n /**\r\n * Set position strategy of tooltip\r\n */\r\n @Prop()\r\n strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n /**\r\n * Set attribute `no-arrow` to hide the arrow\r\n */\r\n @Prop()\r\n noArrow = false;\r\n\r\n /**\r\n * Deactivates mouseover behaviour\r\n */\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /**\r\n * Defines if the tooltip has a smaller max-width\r\n */\r\n @Prop()\r\n small?: boolean;\r\n\r\n /**\r\n * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /**\r\n * Activate the tooltip (Sets the `active` attribute)\r\n */\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /**\r\n * Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element | null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance | undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => (this.active = false),\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement | undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement | undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement | undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.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 with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-4592810d.js";export{s as setNonce}from"./p-4592810d.js";const n=()=>{const o=import.meta.url;const n={};if(o!==""){n.resourcesUrl=new URL(".",o).href}return e(n)};n().then((e=>o([["p-d24073fe",[[2,"dsot-document-component-demo",{showCanvas:[516,"show-canvas"],jsonFile:[1,"json-file"],openDefault:[4,"open-default"],response:[32],document:[32],openOrClosed:[32],openedAnnotation:[32],filtered:[32],notApplicable:[32],activeAnnotationSelectables:[32]},null,{jsonFile:["jsonFileWatcher"],openDefault:["openDefaultWatcher"]}]]],["p-51f9702b",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-c1bab0f1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-9bf33855",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],status:[1],attachmentCount:[2,"attachment-count"],icon:[1],statusDescription:[1,"status-description"],open:[516],hasNestedAccordion:[516,"has-nested-accordion"],hover:[32],focusHandle:[64]}]]],["p-43511221",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-
|
|
1
|
+
import{p as e,b as o}from"./p-4592810d.js";export{s as setNonce}from"./p-4592810d.js";const n=()=>{const o=import.meta.url;const n={};if(o!==""){n.resourcesUrl=new URL(".",o).href}return e(n)};n().then((e=>o([["p-d24073fe",[[2,"dsot-document-component-demo",{showCanvas:[516,"show-canvas"],jsonFile:[1,"json-file"],openDefault:[4,"open-default"],response:[32],document:[32],openOrClosed:[32],openedAnnotation:[32],filtered:[32],notApplicable:[32],activeAnnotationSelectables:[32]},null,{jsonFile:["jsonFileWatcher"],openDefault:["openDefaultWatcher"]}]]],["p-51f9702b",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-c1bab0f1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-9bf33855",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],status:[1],attachmentCount:[2,"attachment-count"],icon:[1],statusDescription:[1,"status-description"],open:[516],hasNestedAccordion:[516,"has-nested-accordion"],hover:[32],focusHandle:[64]}]]],["p-43511221",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-e3655ae6",[[1,"dso-advanced-select",{options:[16],active:[16],activeHint:[1,"active-hint"],open:[32]},[[8,"keydown","keyDownListener"]]]]],["p-df63a085",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],loadingDelayed:[2,"loading-delayed"],notFoundLabel:[1,"not-found-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32],notFound:[32],showLoading:[32]},[[4,"click","onDocumentClick"]],{suggestions:["suggestionsWatcher"]}]]],["p-7bcce109",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],showHelp:[4,"show-help"],helpUrl:[1,"help-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],userHomeActive:[4,"user-home-active"],showDropDown:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]},null,{useDropDownMenu:["setShowDropDown"]}]]],["p-e1cb1603",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]},null,{open:["watchOpen"]}]]],["p-dd21df39",[[1,"dso-modal",{fullscreen:[516],modalTitle:[1,"modal-title"],role:[1],returnFocus:[4,"return-focus"],showCloseButton:[4,"show-close-button"],ariaId:[32]}]]],["p-1a85e2f8",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-302764ae",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-67461818",[[1,"dso-action-list-item",{step:[2],itemTitle:[1,"item-title"],flowLine:[4,"flow-line"],warning:[4],divider:[4]}]]],["p-4e5a6107",[[1,"dso-card",{clickable:[516],imageShape:[513,"image-shape"],href:[513],mode:[513]}]]],["p-84be819d",[[2,"dso-date-picker-legacy",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],invalid:[516],describedBy:[1,"described-by"],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-eb7275e9",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]],{url:["watchUrl"],isOpen:["watchIsOpen"]}]]],["p-1b8d34a6",[[1,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],subcontentPrefix:[1,"subcontent-prefix"],manual:[4],manualInputWrapperElement:[32],manualCount:[32]},null,{manual:["watchManualCallback"]}]]],["p-159c0a88",[[1,"dso-mark-bar",{value:[1],label:[1],current:[2],totalCount:[2,"total-count"],dsoFocus:[64]}]]],["p-b6af439e",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],_getState:[64]},null,{variant:["updateVariant"],reverseAlign:["updateReverseAlign"]}]]],["p-c9fbf040",[[1,"dso-action-list",{listTitle:[1,"list-title"]}]]],["p-15c3da8e",[[1,"dso-banner",{status:[513],compact:[4],noIcon:[4,"no-icon"]}]]],["p-09552584",[[1,"dso-card-container",{mode:[513]}]]],["p-f6d1d215",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],required:[516],invalid:[516],describedBy:[1,"described-by"],dsoAutofocus:[4,"dso-autofocus"],value:[513],min:[1],max:[1]}]]],["p-e5ecc82f",[[1,"dso-highlight-box",{yellow:[516],border:[516],white:[516],dropShadow:[516,"drop-shadow"],step:[514]}]]],["p-e0f9a16f",[[1,"dso-input-range",{min:[2],max:[2],value:[2],step:[2],label:[1],unit:[1],description:[1]}]]],["p-ea6ca8b2",[[1,"dso-logo",{label:[513],ribbon:[1]}]]],["p-7cac2dd2",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-aa6d1e42",[[1,"dso-viewer-grid",{mode:[513],filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],documentPanelOpen:[516,"document-panel-open"],mainSize:[513,"main-size"],activeTab:[1,"active-tab"],documentPanelSize:[513,"document-panel-size"],mainPanelExpanded:[4,"main-panel-expanded"],mainPanelHidden:[4,"main-panel-hidden"],tabView:[32],_checkMainPanelVisibility:[64]},null,{documentPanelOpen:["documentPanelOpenWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}]]],["p-11eb95a2",[[1,"dso-attachments-counter",{count:[2]}]]],["p-8dbb7ece",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],dropdownOptionsOffset:[2,"dropdown-options-offset"],checkable:[4],boundary:[1],placement:[1],strategy:[1]},[[8,"click","onClick"],[8,"keydown","keyDownListener"]],{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}]]],["p-69231fe7",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-f3facab4",[[1,"dso-scrollable",{scrollPosition:[32],_setScrollState:[64]}]]],["p-1981592d",[[1,"dso-expandable",{open:[516],enableAnimation:[516,"enable-animation"],minimumHeight:[2,"minimum-height"],animationReady:[32],isOpen:[32]},null,{open:["toggleOpen"],enableAnimation:["toggleEnableAnimation"]}]]],["p-a435b9fd",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-46955cda",[[1,"dso-icon",{icon:[1]}]]],["p-fd4b0b0b",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-31825ec2",[[6,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],labelledById:[1,"labelled-by-id"],disabled:[4],required:[4],checked:[516],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],keyboardFocus:[32],toggleInfo:[64]},null,{indeterminate:["setIndeterminate"]}],[1,"dso-info",{fixed:[516],active:[516]}]]],["p-b0116121",[[1,"dso-tooltip",{descriptive:[516],position:[1],strategy:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},null,{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}]]],["p-36ddddf4",[[1,"dso-ozon-content",{content:[1],inline:[516],mark:[16],state:[32]},null,{content:["contentWatcher"]}],[1,"dso-label",{compact:[4],removable:[4],status:[1],truncate:[4],removeHover:[32],removeFocus:[32],textHover:[32],textFocus:[32],isTruncated:[32],labelText:[32],_truncateLabel:[64]},[[4,"keydown","keyDownListener"]],{removable:["watchRemovable"],truncate:["watchTruncate"]}],[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}],[0,"dso-annotation-button",{identifier:[1],open:[4]}],[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]],[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}],[1,"dso-badge",{status:[1]}]]],["p-5def1d28",[[1,"dso-document-component",{heading:[1],label:[1],nummer:[1],opschrift:[1],inhoud:[1],open:[516],filtered:[516],notApplicable:[516,"not-applicable"],genesteOntwerpInformatie:[516,"geneste-ontwerp-informatie"],bevatOntwerpInformatie:[516,"bevat-ontwerp-informatie"],annotated:[516],gereserveerd:[4],vervallen:[4],openAnnotation:[4,"open-annotation"],alternativeTitle:[1,"alternative-title"],type:[513],wijzigactie:[513],mark:[16],recursiveToggle:[8,"recursive-toggle"]}],[4,"dso-annotation-output",{identifier:[513],annotationPrefix:[513,"annotation-prefix"],open:[516]}],[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=dso-toolkit.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","showCanvas","jsonFile","openDefault","response","document","openOrClosed","openedAnnotation","filtered","notApplicable","activeAnnotationSelectables","group","baseLayers","overlays","handleTitle","heading","handleUrl","status","attachmentCount","icon","statusDescription","open","hasNestedAccordion","hover","focusHandle","label","position","small","secondary","active","activeHint","mainMenu","useDropDownMenu","authStatus","loginUrl","logoutUrl","showHelp","helpUrl","userProfileName","userProfileUrl","userHomeUrl","userHomeActive","showDropDown","overflowMenuItems","dropdownOptionsOffset","disableZoom","hideContent","toggleVisibility","fullscreen","modalTitle","role","returnFocus","showCloseButton","ariaId","totalPages","currentPage","formatHref","availablePositions","collection","focusItem","step","itemTitle","flowLine","warning","divider","
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","showCanvas","jsonFile","openDefault","response","document","openOrClosed","openedAnnotation","filtered","notApplicable","activeAnnotationSelectables","group","baseLayers","overlays","handleTitle","heading","handleUrl","status","attachmentCount","icon","statusDescription","open","hasNestedAccordion","hover","focusHandle","label","position","small","secondary","active","activeHint","suggestions","loading","loadingLabel","loadingDelayed","notFoundLabel","suggestOnFocus","showSuggestions","selectedSuggestion","notFound","showLoading","mainMenu","useDropDownMenu","authStatus","loginUrl","logoutUrl","showHelp","helpUrl","userProfileName","userProfileUrl","userHomeUrl","userHomeActive","showDropDown","overflowMenuItems","dropdownOptionsOffset","disableZoom","hideContent","toggleVisibility","fullscreen","modalTitle","role","returnFocus","showCloseButton","ariaId","totalPages","currentPage","formatHref","availablePositions","collection","focusItem","step","itemTitle","flowLine","warning","divider","clickable","imageShape","mode","name","identifier","disabled","direction","required","invalid","describedBy","dsoAutofocus","value","min","max","activeFocus","focusedDay","visible","setFocus","show","hide","visibility","isOpen","slideState","loadIframe","sublabel","count","checked","subcontentPrefix","manual","manualInputWrapperElement","manualCount","current","totalCount","dsoFocus","variant","reverseAlign","_getState","listTitle","compact","noIcon","yellow","border","white","dropShadow","unit","description","ribbon","progress","filterpanelOpen","overlayOpen","documentPanelOpen","mainSize","activeTab","documentPanelSize","mainPanelExpanded","mainPanelHidden","tabView","_checkMainPanelVisibility","dropdownAlign","checkable","boundary","placement","strategy","size","block","scrollPosition","_setScrollState","enableAnimation","minimumHeight","animationReady","sizeAlias","sizeWidth","getSize","type","describedById","labelledById","indeterminate","infoFixed","infoActive","keyboardFocus","toggleInfo","fixed","descriptive","noArrow","stateless","hidden","activate","deactivate","content","inline","mark","state","removable","truncate","removeHover","removeFocus","textHover","textFocus","isTruncated","labelText","_truncateLabel","roleAlert","zoomable","noModal","isResponsive","modalActive","placeholderHeight","nummer","opschrift","inhoud","genesteOntwerpInformatie","bevatOntwerpInformatie","annotated","gereserveerd","vervallen","openAnnotation","alternativeTitle","wijzigactie","recursiveToggle","annotationPrefix","accessibleLabel","labelledbyId","hasVisibleLabel"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.7.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as n,F as e,a}from"./p-4592810d.js";import{i as o}from"./p-17e4b846.js";const s=':host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:"";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}';const r=class{constructor(n){i(this,n);this.dsoSelectPage=t(this,"dsoSelectPage",7);this.sizePositionsMap={small:7,medium:9,large:11};this.availablePositions=undefined;this.totalPages=undefined;this.currentPage=undefined;this.formatHref=i=>"#"+i}sizeChangeHandler(i){this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i.detail])}clickHandler(i,t){this.dsoSelectPage.emit({originalEvent:i,page:t,isModifiedEvent:o(i)})}componentDidLoad(){var i;(i=this.responsiveElement)===null||i===void 0?void 0:i.getSize().then((i=>this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i])))}render(){var i,t,a;if(!this.totalPages){return null}if(this.availablePositions===undefined){return n("dso-responsive-element",{ref:i=>this.responsiveElement=i})}const o=this.availablePositions;const s=(i=this.currentPage)!==null&&i!==void 0?i:0;const r=this.getPages(s,this.availablePositions,this.totalPages);return n("dso-responsive-element",{ref:i=>this.responsiveElement=i},n("ul",{class:"pagination"},n("li",{class:s<=1||s>this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1),"aria-label":"Vorige",onClick:i=>{var t;return s&&this.clickHandler(i,(t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1)}},n("dso-icon",{icon:"chevron-left"}))),r.map((i=>n(e,null,this.showEllipsisBeforeLast(r,i,o)&&n("li",null,n("span",null,"...")),n("li",{key:i,class:s===i?"active":undefined},s===i?n("span",{"aria-current":"page"},i):n("a",{href:this.formatHref(i),onClick:t=>this.clickHandler(t,i)},i)),this.showEllipsisAfterFirst(r,i,o)&&n("li",null,n("span",null,"..."))))),n("li",{class:s<1||s>=this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((a=r[r.indexOf(s)+1])!==null&&a!==void 0?a:this.totalPages),"aria-label":"Volgende",onClick:i=>{var t;return s&&this.totalPages&&this.clickHandler(i,(t=r[r.indexOf(s)+1])!==null&&t!==void 0?t:this.totalPages)}},n("dso-icon",{icon:"chevron-right"})))))}getAvailablePositions(i){if(i%2===0){return i-1}if(i<=3){return 3}return i}getPages(i,t,n){if(n+2<=t){return Array.from({length:n},((i,t)=>t+1))}if(t===3){return[i]}if(t===5){return[1,i,n]}return[1,...this.getPageRange(i,t,n),n]}getPageRange(i,t,n){const e=[];const a=Math.floor(t/2);if(i<=a){for(let i=2;i<=t-4;i++){e.push(i)}}if(i>=a&&i<=n-a){if(a===1){if(i>n-2){e.push(n-2)}e.push(i);if(i<3){e.push(3)}}if(a>1){const t=a-3;for(let o=Math.min(i-t,n-a);o<=Math.max(i+t,a);o++){if(o>2&&o<n-1){e.push(o)}}}}if(i>n-a){for(let i=n-(t-5);i<=n-1;i++){e.push(i)}}return e.filter(((i,t,n)=>n.indexOf(i)===t))}showEllipsisAfterFirst(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===0&&e>n-2&&!i.some((i=>i===2))&&n>=7}showEllipsisBeforeLast(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===i.length-1&&e>n-2&&!i.some((i=>i===e-1))&&n>=7}get host(){return a(this)}};r.style=s;export{r as dso_pagination};
|
|
2
|
+
//# sourceMappingURL=p-1a85e2f8.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["paginationCss","Pagination","this","sizePositionsMap","small","medium","large","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","undefined","h","ref","element","currentPage","pages","getPages","class","href","formatHref","_b","indexOf","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","_c","sizePositions","Array","from","length","_value","i","getPageRange","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","Error","some","p"],"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/components/pagination\";\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 @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\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) {\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 <ul class=\"pagination\">\r\n <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 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 <>\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 </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 ))}\r\n <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) =>\r\n currentPage &&\r\n this.totalPages &&\r\n this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n }\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\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 + 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\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 if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === 0 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === 2) &&\r\n availablePositions >= 7\r\n );\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 if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === pages.length - 1 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === totalPages - 1) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["paginationCss","Pagination","this","sizePositionsMap","small","medium","large","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","undefined","h","ref","element","currentPage","pages","getPages","class","href","formatHref","_b","indexOf","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","_c","sizePositions","Array","from","length","_value","i","getPageRange","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","Error","some","p"],"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/components/pagination\";\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 @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\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) {\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 <ul class=\"pagination\">\r\n <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 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 <>\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 </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 ))}\r\n <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) =>\r\n currentPage &&\r\n this.totalPages &&\r\n this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n }\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\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 + 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\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 if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === 0 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === 2) &&\r\n availablePositions >= 7\r\n );\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 if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === pages.length - 1 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === totalPages - 1) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as n,c as t,f as o,h as e,a as s}from"./p-4592810d.js";import{c as i}from"./p-fbb226aa.js";import{c as r}from"./p-c87b4d11.js";import"./p-86133aa5.js";const d="*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.dso-manual-input-button {\n cursor: text;\n}\n\n.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.dso-tertiary:active {\n outline: 0;\n}\n.dso-tertiary[disabled] {\n color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n color: #173521;\n}\n.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.dso-tertiary.dso-truncate {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n}\n.dso-input-number label {\n width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n align-self: center;\n background-color: transparent;\n border: 0;\n display: inline-block;\n height: 1.5rem;\n text-align: center;\n width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n -moz-appearance: textfield;\n}\n\n.dso-button-group {\n display: flex;\n flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n background-color: #fff;\n border-color: #e5e5e5;\n color: #666;\n pointer-events: none;\n}\n.dso-button-group > * {\n border-radius: 0;\n}\n.dso-button-group > *:first-child {\n border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n border-style: solid;\n border-width: 1px;\n flex-wrap: nowrap;\n padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n .dso-button-group > .dso-input-number {\n justify-content: center;\n }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n opacity: 1;\n}\n.dso-button-group .dso-list-button {\n padding-right: 15px;\n}\n\n.dso-selectable {\n position: relative;\n display: var(--dso-selectable-display, block);\n padding: 0 0 0 32px;\n}\n.dso-selectable label {\n font-weight: 400;\n line-height: 24px;\n margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n background-color: #fff;\n box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n height: 24px;\n left: 0;\n margin: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n width: 24px;\n z-index: 100;\n zoom: 1;\n}\n@media (prefers-contrast: more) {\n .dso-selectable input[type=checkbox],\n .dso-selectable input[type=radio] {\n opacity: 1;\n }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n display: inline;\n font-style: normal;\n padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n background: #fff;\n border: 0;\n box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n content: \"\";\n height: 20px;\n left: 2px;\n position: absolute;\n top: 2px;\n width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n height: 18px;\n left: 3px;\n top: 3px;\n width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n background-color: #ebf3e6;\n box-shadow: 0 0 0 1px #275937;\n height: 22px;\n left: 1px;\n top: 1px;\n width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n background: transparent;\n content: \"\";\n left: 6px;\n opacity: 0;\n position: absolute;\n top: 6px;\n zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n border: solid;\n border-color: var(--dso-selectable-color, #39870c);\n border-top-color: transparent;\n border-width: 0 0 3px 3px;\n height: 8px;\n transform: rotate(-45deg);\n width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n background-color: var(--dso-selectable-color, #39870c);\n height: 12px;\n width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n background-color: transparent;\n border-radius: 50%;\n content: \"\";\n height: 12px;\n left: 6px;\n opacity: 0;\n position: absolute;\n top: 6px;\n width: 12px;\n zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n background-color: var(--dso-selectable-color, #39870c);\n opacity: 1;\n}\n.dso-selectable label {\n font-weight: 700;\n}\n\n.dso-list-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n font-weight: 600;\n padding: 15px 47px 15px 15px;\n position: relative;\n text-align: left;\n white-space: normal;\n width: 100%;\n cursor: pointer;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n outline-offset: 2px;\n}\n.dso-list-button:active {\n outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n opacity: 1;\n}\n.dso-list-button.dso-selected {\n border-color: #39870c;\n border-width: 1px;\n box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n .dso-list-button.dso-selected.dso-single-count {\n border-right: 0;\n box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n }\n}\n.dso-list-button label {\n cursor: inherit;\n}\n.dso-list-button > span {\n display: block;\n}\n.dso-list-button .dso-sublabel {\n font-weight: 400;\n width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n height: 24px;\n position: absolute;\n right: 15px;\n top: 15px;\n width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n color: #39870c;\n page-break-before: always;\n}\n.dso-list-button .dso-count {\n font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n .dso-list-button.dso-selected.dso-single-count::after {\n width: 0;\n }\n}\n.dso-list-button .dso-sublabel {\n padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n margin-top: 4px;\n}\n\n.dso-input-wrapper {\n position: relative;\n}\n.dso-input-wrapper .form-control {\n width: 9ch;\n}\n\n.form-control {\n display: block;\n width: 100%;\n height: 40px;\n padding: 6px 14px;\n font-size: 1rem;\n line-height: 1.5;\n color: #191919;\n background-color: #fff;\n background-image: none;\n border: 1px solid #275937;\n border-radius: 4px;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n color: #666;\n opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n color: #666;\n}\n.form-control::-webkit-input-placeholder {\n color: #666;\n}\n.form-control::-ms-expand {\n background-color: transparent;\n border: 0;\n}\n.form-control:focus {\n border-color: #275937;\n outline: 0;\n box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n background-color: #fff;\n opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n cursor: default;\n}\n.form-control[disabled] {\n border-color: #e5e5e5;\n color: #999;\n}\n.form-control[readonly] {\n border-width: 1px;\n}\n.form-control[type=text] {\n line-height: 40px;\n}\n.form-control[size] {\n width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n background-color: transparent;\n border: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.hidden {\n display: none !important;\n}";const a=class{constructor(o){n(this,o);this.dsoCountChange=t(this,"dsoCountChange",7);this.dsoSelectedChange=t(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.subcontentPrefix=undefined;this.manual=true}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}connectedCallback(){this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n,t;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=i(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null||n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}(t=this.subcontentSlot)===null||t===void 0?void 0:t.setAttribute("aria-hidden","true")}disconnectedCallback(){var n,t;(n=this.trap)===null||n===void 0?void 0:n.deactivate();(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();delete this.mutationObserver}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,t){if(typeof this.count==="number"){const o=t==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(o)){return}this.dsoCountChange.emit({originalEvent:n,count:o})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max)))}render(){const n=this.manualCount===undefined;const t=this.checked||this.count!==undefined&&this.count>0;return e("div",{class:r(["dso-button-group",{"dso-disabled":this.disabled}])},e("div",{class:r(["dso-list-button",{"dso-selected":t,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},e("div",{class:"dso-selectable"},e("input",{id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam","aria-describedby":[this.sublabel&&"sublabel",this.subcontentSlot&&"description"].filter((n=>!!n)).join(" ")||null,checked:t,disabled:this.disabled}),e("label",{htmlFor:"dso-list-button-checkbox"},this.label),this.subcontentSlot&&e("div",{class:"sr-only",id:"description"},this.subcontentPrefix&&this.subcontentPrefix+":",e("div",{innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&e("span",{class:"dso-sublabel",id:"sublabel"},this.sublabel),e("slot",{name:"subcontent"})),this.count!==undefined&&this.count>0&&e("div",{class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&e("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},e("dso-icon",{icon:"minus-circle"}),e("span",{class:"sr-only"},"Aantal verlagen")),e("div",{class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&e("input",{class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),e("form",{onSubmit:n=>this.setCount(n)},e("div",{ref:n=>this.manualInputWrapperElement=n},e("input",{class:r("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual&&e("button",{class:r("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?e("span",{class:"sr-only"},"Handmatig aantal invullen"):e("span",{class:"sr-only"},"Zet waarde")))),n&&e("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},e("dso-icon",{icon:"plus-circle"}),e("span",{class:"sr-only"},"Aantal verhogen"))))}get host(){return s(this)}static get watchers(){return{manual:["watchManualCallback"]}}};a.style=d;export{a as dso_list_button};
|
|
2
|
+
//# sourceMappingURL=p-1b8d34a6.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["listButtonCss","ListButton","subcontentSlot","this","host","querySelector","watchManualCallback","manual","manualCount","stopManualCountInput","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","characterData","childList","subtree","attributes","componentDidRender","undefined","manualInputWrapperElement","trap","createFocusTrap","escapeDeactivates","setReturnFocus","clickOutsideDeactivates","e","setCount","onDeactivate","onPostDeactivate","_a","manualInputButtonElement","focus","activate","deactivate","_b","setAttribute","disconnectedCallback","disconnect","handleOnChange","target","HTMLInputElement","valueAsNumber","stepValue","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","preventDefault","handleSelectClick","dsoSelectedChange","checked","startManualCountInput","min","max","Number","render","showButtonInputs","selected","h","class","clsx","disabled","onClick","id","type","value","name","sublabel","filter","s","join","htmlFor","label","subcontentPrefix","innerHTML","icon","tabIndex","readOnly","onSubmit","ref","element","hidden","onInput"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /**\r\n * The label of the List Button.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The sublabel of the List Button.\r\n */\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /**\r\n * When defined the count can show on the List Button.\r\n */\r\n @Prop()\r\n count?: number;\r\n\r\n /**\r\n * The minimum value.\r\n */\r\n @Prop()\r\n min?: string | number;\r\n\r\n /**\r\n * The maximum value.\r\n */\r\n @Prop()\r\n max?: string | number;\r\n\r\n /**\r\n * Whether the List Button is checked.\r\n */\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /**\r\n * Whether the List Button is disabled.\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Prefix to subcontent for the purpose of screenreading.\r\n */\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /**\r\n * Allow user to directly input a value.\r\n *\r\n * Set to `false` to force users to use plus/minus buttons.\r\n */\r\n @Prop()\r\n manual = true;\r\n\r\n /**\r\n * Emitted when the user changes the count.\r\n */\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the List Button itself.\r\n *\r\n * Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) || newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["listButtonCss","ListButton","subcontentSlot","this","host","querySelector","watchManualCallback","manual","manualCount","stopManualCountInput","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","characterData","childList","subtree","attributes","componentDidRender","undefined","manualInputWrapperElement","trap","createFocusTrap","escapeDeactivates","setReturnFocus","clickOutsideDeactivates","e","setCount","onDeactivate","onPostDeactivate","_a","manualInputButtonElement","focus","activate","deactivate","_b","setAttribute","disconnectedCallback","disconnect","handleOnChange","target","HTMLInputElement","valueAsNumber","stepValue","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","preventDefault","handleSelectClick","dsoSelectedChange","checked","startManualCountInput","min","max","Number","render","showButtonInputs","selected","h","class","clsx","disabled","onClick","id","type","value","name","sublabel","filter","s","join","htmlFor","label","subcontentPrefix","innerHTML","icon","tabIndex","readOnly","onSubmit","ref","element","hidden","onInput"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /**\r\n * The label of the List Button.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The sublabel of the List Button.\r\n */\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /**\r\n * When defined the count can show on the List Button.\r\n */\r\n @Prop()\r\n count?: number;\r\n\r\n /**\r\n * The minimum value.\r\n */\r\n @Prop()\r\n min?: string | number;\r\n\r\n /**\r\n * The maximum value.\r\n */\r\n @Prop()\r\n max?: string | number;\r\n\r\n /**\r\n * Whether the List Button is checked.\r\n */\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /**\r\n * Whether the List Button is disabled.\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Prefix to subcontent for the purpose of screenreading.\r\n */\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /**\r\n * Allow user to directly input a value.\r\n *\r\n * Set to `false` to force users to use plus/minus buttons.\r\n */\r\n @Prop()\r\n manual = true;\r\n\r\n /**\r\n * Emitted when the user changes the count.\r\n */\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the List Button itself.\r\n *\r\n * Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) || newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}
|