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

@dso-toolkit/core 79.1.0 → 80.0.0

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

Files changed (586) hide show

package/dist/esm/dso-label.dso-renvooi.dso-slide-toggle.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-label.dso-renvooi.dso-slide-toggle.entry.js","sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n\r\ndso-icon-button {\r\n float: inline-end;\r\n margin-inline-start: units.$u1;\r\n margin-inline-end: units.$u1 * -0.5;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement \| undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /*\r\n For compact Label\r\n /\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /\r\n Shows a button that can be used to remove the Label.\r\n /\r\n @Prop({ reflect: true })\r\n removable?: boolean;\r\n\r\n /\r\n The status of this Label.\r\n /\r\n @Prop()\r\n status?: LabelStatus;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /\r\n Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n /\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n /\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /* The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. /\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force \|\| !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover \|\| this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <dso-icon-button\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n label={`Verwijder: ${this.labelText}`}\r\n onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n />\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n text: string;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, ref: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n if (!mark) {\r\n return <>{text}</>;\r\n }\r\n\r\n const result = mark(text);\r\n\r\n if (!result) {\r\n return <>{text}</>;\r\n }\r\n\r\n return (\r\n <>\r\n {result.map((renvooiText) => {\r\n if (typeof renvooiText === \"string\") {\r\n return <>{renvooiText}</>;\r\n }\r\n\r\n return (\r\n <mark\r\n class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n >\r\n {renvooiText.text}\r\n </mark>\r\n );\r\n })}\r\n </>\r\n );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n value: RenvooiValue;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n if (typeof value === \"string\" \|\| !value) {\r\n // This element is used for --_dso-renvooi-text-decoration\r\n return (\r\n <span class=\"text\">\r\n <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </span>\r\n );\r\n }\r\n\r\n if (\"toegevoegd\" in value) {\r\n return (\r\n <ins>\r\n <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n );\r\n }\r\n\r\n if (\"verwijderd\" in value) {\r\n return (\r\n <del>\r\n <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n <del>\r\n <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n <ins>\r\n <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n </>\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/\r\n Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n /\r\n@Component({\r\n tag: \"dso-renvooi\",\r\n styleUrl: \"renvooi.scss\",\r\n shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n /\r\n The renvooi value to render.\r\n /\r\n @Prop()\r\n value?: RenvooiValue \| RenvooiValue[];\r\n\r\n /\r\n To mark text.\r\n /\r\n @Prop()\r\n mark?: RenvooiMarkFunction;\r\n\r\n /\r\n Emitted when a marked item is highlighted.\r\n /\r\n @Event({ bubbles: false })\r\n dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n get values(): RenvooiValue[] {\r\n if (!this.value) {\r\n return [];\r\n }\r\n\r\n return Array.isArray(this.value) ? this.value : [this.value];\r\n }\r\n\r\n private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.values.map((v) => (\r\n <RenvooiRender\r\n value={v}\r\n mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n onMarkItemHighlight={this.handleMarkItemHighlight}\r\n />\r\n ))}\r\n </>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n display: inline-block;\r\n padding-block-start: (typography.$line-height-base typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n scoped: true,\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /*\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-label.dso-renvooi.dso-slide-toggle.entry.js","sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n font-weight: normal;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n\r\ndso-icon-button {\r\n float: inline-end;\r\n margin-inline-start: units.$u1;\r\n margin-inline-end: units.$u1 * -0.5;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement \| undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /*\r\n For compact Label\r\n /\r\n @Prop({ reflect: true })\r\n compact?: boolean;\r\n\r\n /\r\n Shows a button that can be used to remove the Label.\r\n /\r\n @Prop({ reflect: true })\r\n removable?: boolean;\r\n\r\n /\r\n The status of this Label.\r\n /\r\n @Prop({ reflect: true })\r\n status?: LabelStatus;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /\r\n Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n /\r\n @Prop({ reflect: true })\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n /\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /* The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. /\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force \|\| !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover \|\| this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <dso-icon-button\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n label={`Verwijder: ${this.labelText}`}\r\n onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n />\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n text: string;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, ref: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n if (!mark) {\r\n return <>{text}</>;\r\n }\r\n\r\n const result = mark(text);\r\n\r\n if (!result) {\r\n return <>{text}</>;\r\n }\r\n\r\n return (\r\n <>\r\n {result.map((renvooiText) => {\r\n if (typeof renvooiText === \"string\") {\r\n return <>{renvooiText}</>;\r\n }\r\n\r\n return (\r\n <mark\r\n class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n >\r\n {renvooiText.text}\r\n </mark>\r\n );\r\n })}\r\n </>\r\n );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n value: RenvooiValue;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n if (typeof value === \"string\" \|\| !value) {\r\n // This element is used for --_dso-renvooi-text-decoration\r\n return (\r\n <span class=\"text\">\r\n <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </span>\r\n );\r\n }\r\n\r\n if (\"toegevoegd\" in value) {\r\n return (\r\n <ins>\r\n <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n );\r\n }\r\n\r\n if (\"verwijderd\" in value) {\r\n return (\r\n <del>\r\n <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n <del>\r\n <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n <ins>\r\n <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n </>\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/\r\n Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n /\r\n@Component({\r\n tag: \"dso-renvooi\",\r\n styleUrl: \"renvooi.scss\",\r\n shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n /\r\n The renvooi value to render.\r\n /\r\n @Prop()\r\n value?: RenvooiValue \| RenvooiValue[];\r\n\r\n /\r\n To mark text.\r\n /\r\n @Prop()\r\n mark?: RenvooiMarkFunction;\r\n\r\n /\r\n Emitted when a marked item is highlighted.\r\n /\r\n @Event({ bubbles: false })\r\n dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n get values(): RenvooiValue[] {\r\n if (!this.value) {\r\n return [];\r\n }\r\n\r\n return Array.isArray(this.value) ? this.value : [this.value];\r\n }\r\n\r\n private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.values.map((v) => (\r\n <RenvooiRender\r\n value={v}\r\n mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n onMarkItemHighlight={this.handleMarkItemHighlight}\r\n />\r\n ))}\r\n </>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n display: inline-block;\r\n padding-block-start: (typography.$line-height-base typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n scoped: true,\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /*\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/dso-label_3.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { d as debounce } from './index-CoMRvcY0.js';
 import { v as v4 } from './v4-BF0_OXTe.js';
 import './_commonjsHelpers-BFTU3MAI.js';
-const labelCss = ":host{display:inline-block;max-inline-size:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{--_dso-icon-button-tertiary-color:#fff;background-color:#275937;border-color:#275937;color:#fff}.dso-label.dso-label-success{--_dso-icon-button-tertiary-color:#fff;background-color:#39870c;border-color:#39870c;color:#fff}.dso-label.dso-label-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-label.dso-label-error{--_dso-icon-button-tertiary-color:#fff;background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;border-color:#fff;color:#191919}.dso-label.dso-label-bright{outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{--_dso-icon-button-tertiary-color:#fff;background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.dso-label.dso-label-filter{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}.dso-label.dso-label-filter{border-inline-start:5px solid #6ca4d9}.dso-label.dso-label-toegevoegd{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-toegevoegd{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}.dso-label.dso-label-verwijderd{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-verwijderd{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){.dso-label.dso-label-verwijderd{font-family:sans-serif}}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}dso-icon-button{float:inline-end;margin-inline-start:8px;margin-inline-end:-4px}";
+const labelCss = ":host{display:inline-block;max-inline-size:100%;font-weight:normal}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-info{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#6ca4d9;color:#191919}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-primary{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#275937;color:#fff}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}.dso-label.dso-label-success{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#39870c;color:#fff}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}.dso-label.dso-label-warning{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#dcd400;color:#191919}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-error{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#ce3f51;color:#fff}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}.dso-label.dso-label-bright{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}.dso-label.dso-label-bright{outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#8b4a6a;color:#fff}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}.dso-label.dso-label-filter{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-filter{border-inline-start:5px solid #6ca4d9}.dso-label.dso-label-toegevoegd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-toegevoegd{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}.dso-label.dso-label-verwijderd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.dso-label.dso-label-verwijderd{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){.dso-label.dso-label-verwijderd{font-family:sans-serif}}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}dso-icon-button{float:inline-end;margin-inline-start:8px;margin-inline-end:-4px}";
 const resizeObserver = new ResizeObserver(debounce((entries) => {
     entries.forEach(({ target }) => {
@@ -101,13 +101,13 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '0b6cf34b6aefcbb4957ba2e6b9d163a2d6918fa2' }, h("span", { key: '9eec335d89922ffd095b36f8cb34fa5fc226510c', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: 'cb1e816c5125dd32494e323f8ec4c48ad701cdda' }, h("span", { key: '2967b653516412692e28fd7db19e860a63576147', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'f79b2c501b4cea497996c2488e014e0542c367e7', name: "symbol" }), h("span", { key: '87b4b6fabc51e6c5f1e4f803ecedd2737b0cc492', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: 'd0dba7bf64d2bed153e7ea4ab9a9abc15eb6bd41', name: "symbol" }), h("span", { key: '00ec26450674ef900dd5fd32bd72edbe5ff80111', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '7026faaf04f728f6a322d1e33ab7f7dbe449552e' })), this.removable && (h("dso-icon-button", { key: '3f587acbe6b4b0e08f1f4c7c64fbd27efa2445f7', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '9ba3f90d4484c61d4757c9dc7929d9c583ef598d', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '6cc69332961817bdfa40e691addbf227efb27900' })), this.removable && (h("dso-icon-button", { key: 'ff4ebb1e4ea6dbe05826a6a2c9c7d8779b02b96d', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '99377bdeaaaecfe0f71363417bbed46ea9a0af89', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -154,7 +154,7 @@ const RenvooiRender = ({ value, mark, onMarkItemHighlight }) => {
             h(RenvooiRenderText, { text: value.wordt, mark: mark, onMarkItemHighlight: onMarkItemHighlight }))));
 };
-const renvooiCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}mark{background-color:var(--_dt-mark-bg-color, #f8f5ce);color:var(--_dt-mark-color, #000);padding-block:var(--_dt-mark-padding-block, 0.2rem);font-weight:var(--_dt-mark-font-weight, normal)}mark.dso-highlight{background-color:#dbd136}:host{display:inline}*,*::after,*::before{box-sizing:border-box}.text{text-decoration:var(--_dso-renvooi-text-decoration)}";
+const renvooiCss = "ins{text-decoration:none}ins{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}del{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}mark{background-color:var(--_dt-mark-bg-color, #f8f5ce);color:var(--_dt-mark-color, #000);padding-block:var(--_dt-mark-padding-block, 0.2rem);font-weight:var(--_dt-mark-font-weight, normal)}mark.dso-highlight{background-color:#dbd136}:host{display:inline}*,*::after,*::before{box-sizing:border-box}.text{text-decoration:var(--_dso-renvooi-text-decoration)}";
 const Renvooi = class {
     constructor(hostRef) {
@@ -205,7 +205,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: '4877f1d9f853fb6e7c39b2d06f25ba014b75b7a1' }, h("button", Object.assign({ key: 'fffabbb04974e110d24e23699bde6c81a7d45b18', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '73bd9d98b013f196cc1d37e652250c9871443b30', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '29d3bfc04cd8f0bb111489ba81acefac17f5415c', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '9c1d228f600a1c3aeb4564f2394eed98a7ad3d35', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '51fc869908ba679612196a126b440705439a5ea6', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '2b4f8f719afccfcbf3cb41f50c86134571b7a043', htmlFor: this.identifier }, h("slot", { key: '7ec7d97745bbd326f3fd5bd6d4b097c507c4f70f' })))));
+        return (h(Fragment, { key: '282c8250fb2fdb709639c39e09276aed99e932b4' }, h("button", Object.assign({ key: '0a1ba101e6bcd72413ee60e39107e1b5b4cbf72c', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '2474f01547225c9fca4289a2b2705877f9f325c2', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '616da328248d3d8258f04c510532ff19c5f29d0c', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '689866229e09d7ee74fada5620028e01085245cc', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'd1b9fa0f8e5006b6c497a9e17671103dedcb3771', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'f15b3b4bd1612bad67678d0aec8cf375189a2716', htmlFor: this.identifier }, h("slot", { key: '291bb84d790f9a20b87cb3d727165c387087e212' })))));
     }
     get host() { return getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"dso-label.dso-renvooi.dso-slide-toggle.entry.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n\r\ndso-icon-button {\r\n float: inline-end;\r\n margin-inline-start: units.$u1;\r\n margin-inline-end: units.$u1 * -0.5;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement \| undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /*\r\n For compact Label\r\n /\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /\r\n Shows a button that can be used to remove the Label.\r\n /\r\n @Prop({ reflect: true })\r\n removable?: boolean;\r\n\r\n /\r\n The status of this Label.\r\n /\r\n @Prop()\r\n status?: LabelStatus;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /\r\n Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n /\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n /\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /* The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. /\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force \|\| !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover \|\| this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <dso-icon-button\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n label={`Verwijder: ${this.labelText}`}\r\n onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n />\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n text: string;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, ref: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n if (!mark) {\r\n return <>{text}</>;\r\n }\r\n\r\n const result = mark(text);\r\n\r\n if (!result) {\r\n return <>{text}</>;\r\n }\r\n\r\n return (\r\n <>\r\n {result.map((renvooiText) => {\r\n if (typeof renvooiText === \"string\") {\r\n return <>{renvooiText}</>;\r\n }\r\n\r\n return (\r\n <mark\r\n class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n >\r\n {renvooiText.text}\r\n </mark>\r\n );\r\n })}\r\n </>\r\n );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n value: RenvooiValue;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n if (typeof value === \"string\" \|\| !value) {\r\n // This element is used for --_dso-renvooi-text-decoration\r\n return (\r\n <span class=\"text\">\r\n <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </span>\r\n );\r\n }\r\n\r\n if (\"toegevoegd\" in value) {\r\n return (\r\n <ins>\r\n <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n );\r\n }\r\n\r\n if (\"verwijderd\" in value) {\r\n return (\r\n <del>\r\n <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n <del>\r\n <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n <ins>\r\n <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n </>\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/\r\n Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n /\r\n@Component({\r\n tag: \"dso-renvooi\",\r\n styleUrl: \"renvooi.scss\",\r\n shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n /\r\n The renvooi value to render.\r\n /\r\n @Prop()\r\n value?: RenvooiValue \| RenvooiValue[];\r\n\r\n /\r\n To mark text.\r\n /\r\n @Prop()\r\n mark?: RenvooiMarkFunction;\r\n\r\n /\r\n Emitted when a marked item is highlighted.\r\n /\r\n @Event({ bubbles: false })\r\n dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n get values(): RenvooiValue[] {\r\n if (!this.value) {\r\n return [];\r\n }\r\n\r\n return Array.isArray(this.value) ? this.value : [this.value];\r\n }\r\n\r\n private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.values.map((v) => (\r\n <RenvooiRender\r\n value={v}\r\n mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n onMarkItemHighlight={this.handleMarkItemHighlight}\r\n />\r\n ))}\r\n </>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n display: inline-block;\r\n padding-block-start: (typography.$line-height-base typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n scoped: true,\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /*\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-label.dso-renvooi.dso-slide-toggle.entry.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n font-weight: normal;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n\r\ndso-icon-button {\r\n float: inline-end;\r\n margin-inline-start: units.$u1;\r\n margin-inline-end: units.$u1 * -0.5;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement \| undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /*\r\n For compact Label\r\n /\r\n @Prop({ reflect: true })\r\n compact?: boolean;\r\n\r\n /\r\n Shows a button that can be used to remove the Label.\r\n /\r\n @Prop({ reflect: true })\r\n removable?: boolean;\r\n\r\n /\r\n The status of this Label.\r\n /\r\n @Prop({ reflect: true })\r\n status?: LabelStatus;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /\r\n Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n /\r\n @Prop({ reflect: true })\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n /\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /* The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. /\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force \|\| !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover \|\| this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <dso-icon-button\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n label={`Verwijder: ${this.labelText}`}\r\n onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n />\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n text: string;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, ref: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n if (!mark) {\r\n return <>{text}</>;\r\n }\r\n\r\n const result = mark(text);\r\n\r\n if (!result) {\r\n return <>{text}</>;\r\n }\r\n\r\n return (\r\n <>\r\n {result.map((renvooiText) => {\r\n if (typeof renvooiText === \"string\") {\r\n return <>{renvooiText}</>;\r\n }\r\n\r\n return (\r\n <mark\r\n class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n >\r\n {renvooiText.text}\r\n </mark>\r\n );\r\n })}\r\n </>\r\n );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n value: RenvooiValue;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n if (typeof value === \"string\" \|\| !value) {\r\n // This element is used for --_dso-renvooi-text-decoration\r\n return (\r\n <span class=\"text\">\r\n <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </span>\r\n );\r\n }\r\n\r\n if (\"toegevoegd\" in value) {\r\n return (\r\n <ins>\r\n <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n );\r\n }\r\n\r\n if (\"verwijderd\" in value) {\r\n return (\r\n <del>\r\n <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n <del>\r\n <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n <ins>\r\n <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n </>\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/\r\n Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n /\r\n@Component({\r\n tag: \"dso-renvooi\",\r\n styleUrl: \"renvooi.scss\",\r\n shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n /\r\n The renvooi value to render.\r\n /\r\n @Prop()\r\n value?: RenvooiValue \| RenvooiValue[];\r\n\r\n /\r\n To mark text.\r\n /\r\n @Prop()\r\n mark?: RenvooiMarkFunction;\r\n\r\n /\r\n Emitted when a marked item is highlighted.\r\n /\r\n @Event({ bubbles: false })\r\n dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n get values(): RenvooiValue[] {\r\n if (!this.value) {\r\n return [];\r\n }\r\n\r\n return Array.isArray(this.value) ? this.value : [this.value];\r\n }\r\n\r\n private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.values.map((v) => (\r\n <RenvooiRender\r\n value={v}\r\n mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n onMarkItemHighlight={this.handleMarkItemHighlight}\r\n />\r\n ))}\r\n </>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n display: inline-block;\r\n padding-block-start: (typography.$line-height-base typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n scoped: true,\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /*\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/esm/dso-legend-item.entry.js CHANGED Viewed

@@ -33,7 +33,7 @@ const LegendItem = class {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: 'bb29c154cabdd5638eceb98f115f47ffdc849f19', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'fcc8adc7e164038c43702e6c894cb4c99a2fa87d', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'd697b6969913b69eb382042d3c9872d7a055b3e2' }, h("slot", { key: '4b6a6ca641bdd2db1add8228012c26fb367252fd', name: "symbol" }))), h("div", { key: '4cb27d216c269153de29456506ed3283ec5b4ab3' }, h("slot", { key: '10daf3e2bef4dd1242823dff74451744cc602705' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '5e74c5da1011113459866077ae3f748fec94ef06', position: "bottom" }, this.disabledMessage)), h("div", { key: 'fae4cbfad614f554e081759fe7b437a7d4b96608', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: '58f75ebffb71903c24498cf517970dfb960d9447', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '331c30242153ea9e87063b8a784406bc527b543a', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '7800987198ece6fb7127d576b1f2c92fa812d511', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '00faad1a8a92ea7d3f5ff32e770f16004cb13b37', name: "options" })))));
+        return (h(Host, { key: '686703aa9893d05bed991defe241b259747c01a5', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '6c1ea3ddd9a2d3678323fc571a673fe00ed6c307', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '0a6e7b22de4d82f59c877b2e47a20ddf1cb547a3' }, h("slot", { key: 'a35d4e4d1129cc8e69d609982d39c45daa7d9f3e', name: "symbol" }))), h("div", { key: 'ffe44f94e8761e47c44ca611afea85e212749350' }, h("slot", { key: '65a655bf0b26901685ba661dc9e278ed53a5a534' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '4b94a3c1eb05758f7f17d791469684c129b6ea5e', position: "bottom" }, this.disabledMessage)), h("div", { key: 'ca5d84a936861021edb7ceb44f97323188fcb12b', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: '55d91fc16aabc6f4627a756c13463e06339d7e0e', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '6c46588131c000ef44120398e03b0be9a74ab42c', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '7b89eef1efd4988d41026296591ed6cc174272a2', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '11571117ac48a224af9b9bd96df6a21ca2a29335', name: "options" })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-list-button.entry.js CHANGED Viewed

@@ -73,7 +73,7 @@ const ListButton = class {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '8aceb891a4bf706da844766b7961b7dfd3b78919', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '4cd2f7a1ee81380b8acb67d73adeca684e3d5f57', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '522fd6d9884adafc6bc6ac5e2138b13f6dd331dc', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: 'e7695d1d0eb19fd3d17d37d8cb9d1a7f5247dd7e', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8258f5cd10f264e8a0d3c0a61953ded159705893', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '1827dd58c8465c41cbbbd2b0d0841e285da7f3a0', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '5b9dc1c1da7b592702e68d686c3fb223d228738a', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '0c3f1b903ed1c0d970c2da48056b817d1d5780cb', class: "subcontent" }, h("slot", { key: '65f5024a2f75c7098334379ebfa945494517b709', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '0219ac62a9df180d5708d9b54417ff9d7bda695c', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '603924707f6d09d8c4e4351a0a48aece262280cc' }, h("dso-icon-button", { key: '5c2dd136a96d0016faab48751b783e2961dd8e70', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'ca8666eae32565be519f9b8c8ccaa6e39799a7a6', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '1207e8e0258adcc777f51576c197c2f5e8d98f5e', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '0b37e11b902caa51517815e5e6611d9a487c02d4', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'df0de94d57ad3c1420421867cb2fa185caa03f4b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '579bf88e96f44505bd5b7b70e15f332416a39ec3', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '7aba20871104e042986a071ad2a82aef9b0bc26b', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '772c09a4fe393b10ff3d1996e307557f3c301b37', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '64715a207f0fcedb22c9b777249b56cdf9e1528e', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '7ea31d7e3b7276ad0dda4ee09738929d2a3df418', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '302368b9c0914043d4d3a629427a2102ebc1e0bb', class: "subcontent" }, h("slot", { key: 'cd32b056e94a40ae2eeffac0fe6d213eaa88b6ae', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'd20d5a677a0a2a984cf9e4a96f8f1598a1b35020', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '1d41e3942d6639d3d4164edcb9058e338ec38512' }, h("dso-icon-button", { key: '8612c6101f03760764300de0e5cf89981d0ab70b', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'cf36ad0a3ca59cfacc07da1253d88d6a3ececff4', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: 'be29f17f6b1d759a985f592e6c135d3d4346cdc3', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-logo.entry.js CHANGED Viewed

@@ -29,7 +29,7 @@ const Logo = class {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '960973e315c312de8867f4fb0c7d10821d73a1a3', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '54ea3fca79e32f2b8787bfd5e0e0d0b2176975ee', class: "logo-ribbon" }, this.ribbon)));
     }
 };
 Logo.style = logoCss;

package/dist/esm/dso-map-base-layers.entry.js CHANGED Viewed

@@ -44,7 +44,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'd351f02282a8206a59c25f1d7e484996d5537c9f', class: "form-group dso-radios" }, h("legend", { key: 'b736d3b6a64da13e71a4e4fd40753ce5c2f9de15', class: "sr-only" }, "Achtergrond"), h("div", { key: '60065fac46d1cc18953e7fd82afa4b538e23158c', class: "dso-label-container" }, h("span", { key: 'a77189ede3009e2077b636219d80de3a41b84f9e', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '85efd3afe696404da277b7616b17d3d9fcb92adf', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '85f4a5b0520f18664c2c01c0a5b8907abd7ce07c', class: "form-group dso-radios" }, h("legend", { key: 'd53cbcc42cd945d8c9769298c4250d541ee55763', class: "sr-only" }, "Achtergrond"), h("div", { key: '59a456cab1c6786585399b4db7717d884025d9df', class: "dso-label-container" }, h("span", { key: 'a45a10ca3a86ad419488650205cedf1052060d59', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '011987a3dc616822b734f09e68b18f46b7310e2f', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -85,7 +85,7 @@ const MapControls = class {
         });
     }
     render() {
-        return (h(Fragment, { key: '334e21a06cd9395ea18d9f9291a770e386e61e92' }, h("button", { key: '2e0f8c012208eee3b4df9fc59e962520028b83f3', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6cf603e9cdf91ce923825814e9d0d5f41ebde4d6', icon: "layers" }), h("span", { key: '0a508c91e88229a2c8651a70d10511c8cd8e3633' }, this.text("layersButton"))), h("dso-button-group", { key: 'b24df1c2c705d7de19dc500d362dec5adf574650', class: "zoom-buttons", direction: "column" }, h("button", { key: 'f515d8f72d45f3ab4e2c2a8fbbe7de660c5a3deb', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '0fa343ea278d9f3167c9eb476bd659caeeb3a620', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: 'bc20fa2da9a14db718cfb9550f6b50d74b206504', icon: "plus" })), h("button", { key: 'ca3ff112cee1e17a3a07bae56505282dcad44d6d', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'fbfc3ef181440cf6a860db6f983e457a8c6885c8', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'a73eb69e645f6a2301eff2c01d1302061ca81459', icon: "minus" }))), h("section", { key: '7829c0a7c59f11662fe91ecfa431aa10fc979505', hidden: this.hideContent }, h("header", { key: '800a300f7cf202ac459321b5fece0d5325f13099' }, h("h2", { key: '73b118cfe038cefe1e48162134afc42094e8459e' }, this.text("title")), h("button", { key: '407675763c3664d2b1a039a893e16ff8a076f213', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '97241757a5f49532a7aa0f9f6f0a330757e7150e', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '5c6481d413d09d00d7768c882fb43361a59dd223', icon: "times" }))), h("dso-scrollable", { key: '595348d36182d703c4b29f33aa50e3f17110201d' }, h("div", { key: 'e0063cf6deeb55733e4d6f37d6f15e4b8774fc06', class: "content" }, h("slot", { key: '16d4d2a94dfd143d931166b275cabf9ebab6bf5d' }))))));
+        return (h(Fragment, { key: '38d8f9a49054469b539d54e35f3f60af57cc3b9e' }, h("button", { key: '44c9e6486a2bff8ba61aa901a70afa602893b302', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '06b1a7d39246e8e6136c856bcca0e0320f3ee7d6', icon: "layers" }), h("span", { key: '9fd57b3947f481215d66724b5de4ba7836e919ee' }, this.text("layersButton"))), h("dso-button-group", { key: 'a6ade4edc389da3c2df9ec0bb58ae215c2dd9f99', class: "zoom-buttons", direction: "column" }, h("button", { key: '7a6672e4d172624e8223c38b242ccee9b6089dab', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'b3651b86a194adc18f070b4bc9b67e888ce96d86', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: '7e49e460481ee133cdb4ee04a4023cc836038f9e', icon: "plus" })), h("button", { key: '71d8e75f0284e937c3e9bd1128a05171f057f9fd', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '10d8b03a6a11664fc57524946e7a8ccb3eff8689', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'bd319a269f38e8b70f427f07c3e1e217f63ea67e', icon: "minus" }))), h("section", { key: '53ef69eade83dbcfd066e6eb8212a9fba7996235', hidden: this.hideContent }, h("header", { key: '3306243d25cbdcceb2447686fc6990fd52a0cd88' }, h("h2", { key: '011724da35c952a1692fa92c13eb53667d5d168c' }, this.text("title")), h("button", { key: 'c533664b366c279051146f8c336558edc676697a', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'a1d159a70d3c3a95d428faffac25647e1d68adc7', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'e706aef45a49a552615fa80a56c484dbb950be03', icon: "times" }))), h("dso-scrollable", { key: 'f678ba1fee4d3825cad69841842480ddb5364f1a' }, h("div", { key: '672d0f8b67bb05f9b65fe6a9b90667e25e6c43a3', class: "content" }, h("slot", { key: '2df21b2d2d1431f0f3d447b337536558dc4d6313' }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -45,7 +45,7 @@ const MapOverlays = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'c3b999bcfd600744f885128418dcb69aa9a18133', class: "form-group dso-checkboxes" }, h("legend", { key: 'bf13c49ba66ed5a8f0c8ca8ce3b2f4e41de64032', class: "sr-only" }, "Kaartlagen"), h("div", { key: '639e81cdc4f91ee53da11c8aede39fd5c85fc6e7', class: "dso-label-container" }, h("span", { key: '94172cf1232312e5d39e09f99390119f189109ce', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'bb520e45e6a9c58c5bf7013fdbcf5ed39a635d45', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '70e2ba3ddd988e843d29f1fe64cd71849b783b86', class: "form-group dso-checkboxes" }, h("legend", { key: 'fd0d17528650e4b3c395438316f24c5ad8bef74a', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'af2f6795455d3bc159778e02411f66a59eacef9e', class: "dso-label-container" }, h("span", { key: '4ab7b2b62dd2bc24441b0a1f723d160c1b6bb63c', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '7dfa0cabfbbca09874a23fdf71a6b1a20d09f50d', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-mark-bar.entry.js CHANGED Viewed

@@ -50,7 +50,7 @@ const MarkBar = class {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '3f2390f17346e0f6e8f5922c8205b7d0dbb68f89', class: "dso-mark-bar" }, h("div", { key: '19da44807b5d7be12bf74f601412e0228ada4a49', class: "dso-mark-bar-input" }, h("input", { key: 'fd26a40b6539bc0ac7638e587776819d9a8e2831', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '6b6599311c0068af1470cf2f04defc603740064f', htmlFor: "search-input" }, h("dso-icon", { key: '61e5cf281785c47181144e6a06fbc4f92f1f4ae9', class: "dso-search-icon", icon: "search" }), h("span", { key: '7a7b144411738a1d804e7c75256adccbf922b864', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'bb929394de046b8a3acaff79bda1a51a0768870a', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '32c06190f96d124d6f2d7ac6fe207aedd4af9638', class: "dso-button-container" }, h("span", { key: '988bd229b69150fcc6107f6e291a00c76b04e8b5', class: "divider" }), h("dso-icon-button", { key: '40ae708d4a8676e617d728d3d326d50767394046', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '973aa6d3df09e3809bbcd4c2b96dee8144cae2d6' }, current, "/", totalCount), h("dso-icon-button", { key: 'a26fc60b7e05fe6725f444476afe85345c9f13b8', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: '7524d95167087c5bc8d8422f61342e18d557928d', class: "dso-mark-bar" }, h("div", { key: '070d9c6e249d092396f8490a646eed354eef4085', class: "dso-mark-bar-input" }, h("input", { key: '2d04e65225ef386e2b2f1da9ea5b49c790bc6935', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'cd9ceaaa1588854ff9acee780ad3e5cbec21a042', htmlFor: "search-input" }, h("dso-icon", { key: '39e04611ffa4d34cc5006e3343dfcab487effb28', class: "dso-search-icon", icon: "search" }), h("span", { key: 'ee908ad3d089c2dc87f6fd9b824d7f0b028bda59', class: "label-text" }, this.label)), h("dso-icon-button", { key: '29ccb6ee59663b2b362401143b6737b3e93a4967', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '2225312304f8e6da25b002f0e478d9bb52566571', class: "dso-button-container" }, h("span", { key: '6c92c8114c21d7ba0fff9823b691bda55a8981bb', class: "divider" }), h("dso-icon-button", { key: '3bc144595cb03249c5ad9da40d4db8feb75537c4', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '80ea007d94361aad098aecfd1db2f4653d19126b' }, current, "/", totalCount), h("dso-icon-button", { key: 'd51bda40ac64d33912d9d29d3457306617a07765', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
 };
 MarkBar.style = markBarCss;

package/dist/esm/dso-modal.entry.js CHANGED Viewed

@@ -84,7 +84,7 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '0a59daede2da8cea1862697b21a2c0cefe2ad2ba', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '1aa3945eefc77e466cf5f5a8176441f3341227c9', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '8b4f73119c03e79c411cf2be522a22347d5734ba' }, h("div", { key: 'eaf1dd3795fd7f29f784b19028a29f4adef739b1', class: "dso-body", tabIndex: 0 }, h("slot", { key: '6941bcfc9c5c38fbc1b4a7e54f5f6abf9b83938c', name: "body" }))), this.hasFooter && (h("div", { key: 'f1367f0059cde476a93126459a97e79be952ae4e', class: "dso-footer" }, h("slot", { key: '0ac156c12718075bebb54010cc360c118faa7bfd', name: "footer" }))))));
+        return (h("dialog", { key: 'de1737260a980f446d06374029b9706ca2484a8c', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'bd24834f32196c0776560ad328d3a1da477b6a1d', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'ad44ea43206fbbec83bd869a6ea2908594f2da3b' }, h("div", { key: 'c66ef72ed44dd5f9ae430ed127c7f0abbc645dc3', class: "dso-body", tabIndex: 0 }, h("slot", { key: '46a6c88d08d803b4dac2a717e97bc61d093b1d1d', name: "body" }))), this.hasFooter && (h("div", { key: 'fdce7c7c4c544caf56b5cc5633d2274d74f6624f', class: "dso-footer" }, h("slot", { key: 'cfe41eb2402d36cf717c537bd155e1d2417e28df', name: "footer" }))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { p as positionTooltip } from './position-tooltip.function-CozxeEX7.js';
 import './floating-ui.dom-gdsca1fx.js';
-const onboardingTipCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{position:absolute;inset-block-start:4px;inset-inline-end:4px}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{--_dso-icon-button-tertiary-color:#fff;background-color:#2b5780;border-color:#2b5780;color:#fff}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}";
+const onboardingTipCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{position:absolute;inset-block-start:4px;inset-inline-end:4px}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#2b5780;color:#fff}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}";
 const OnboardingTip = class {
     constructor(hostRef) {
@@ -13,10 +13,15 @@ const OnboardingTip = class {
          */
         this.placement = "right";
         this.ready = false;
+        this.popoverOpen = false;
     }
     componentDidRender() {
-        if (!this.host.matches(":popover-open")) {
+        if (!this.host.isConnected) {
+            return;
+        }
+        if (!this.popoverOpen) {
             this.host.showPopover();
+            this.popoverOpen = true;
         }
         if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {
             this.cleanUp = positionTooltip({
@@ -31,14 +36,15 @@ const OnboardingTip = class {
     }
     disconnectedCallback() {
         var _a;
-        if (this.host.matches(":popover-open")) {
+        if (this.popoverOpen) {
             this.host.hidePopover();
+            this.popoverOpen = false;
         }
         (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
         this.cleanUp = undefined;
     }
     render() {
-        return (h(Host, { key: 'bd723d0214e5604c3f99c7cf5ece0e1cbe6607d3', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '16615b7d71fde79e7f399e3ed98e25d869309fca', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '821435d563c0c65647111b8e78fc4ba977409b96', class: "onboarding-tip-inner" }, h("div", { key: 'f4c3a23d25bd18e1ceee8ae18f7619dc14b9e7b7', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'b83c3a2cd62a9f86efff9653a04b7c3d6db73b69', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '3cf10004da4f636ab8d08a1eb7ec6361fb788e36', icon: "light-bulb" }), h("slot", { key: '912bb0c3e062bdc1c1f72bcf1fd4d0e9b4253b67', name: "heading" }))), h("dso-icon-button", { key: '7f8372c8f6677687f2fb372b4015851b326a030b', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '1b4cd3b10a3d52f60b6592a33c6922d9a2a2b6b1' }))), h("div", { key: '6adcfa3c5ffc54d275fe2d35621f075669ddb254', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'c8639f6cb933ffaeee99bb60690c345f5f23980d', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '9db53c2f3220584e349ab63815d3bee8a29a1047', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '1d9757090851d54afe53f0b845f771190a4d5229', class: "onboarding-tip-inner" }, h("div", { key: '10d3c7714505c0cb86a876bc4e135b1ba3f18288', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'f67ea4caa88837b5a83c23b01b2da605ca576d64', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '30f9e1edd995e2df9d0d96e89125f215a5e9e94f', icon: "light-bulb" }), h("slot", { key: '11df6fa2d4d57eec21305dacc92b2c8659277697', name: "heading" }))), h("dso-icon-button", { key: '5c739c4472cf3ae4884dfe354ba7c377ffebce93', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'c078afed2b9cbe7b7ea5b34c44800b37357905d7' }))), h("div", { key: '162158dac5546d0e293b97cb88a039e56393170d', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");