npm - @dso-toolkit/core - Versions diffs - 85.0.0 → 87.0.0 - Mend

@dso-toolkit/core 85.0.0 → 87.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 (459) hide show

package/dist/components/index.js CHANGED Viewed

@@ -18,6 +18,7 @@ export { DsoButtonGroup, defineCustomElement as defineCustomElementDsoButtonGrou
 export { DsoCard, defineCustomElement as defineCustomElementDsoCard } from './dso-card.js';
 export { DsoCardContainer, defineCustomElement as defineCustomElementDsoCardContainer } from './dso-card-container.js';
 export { DsoContactInformation, defineCustomElement as defineCustomElementDsoContactInformation } from './dso-contact-information.js';
+export { DsoCursorTooltip, defineCustomElement as defineCustomElementDsoCursorTooltip } from './dso-cursor-tooltip.js';
 export { DsoDatePicker, defineCustomElement as defineCustomElementDsoDatePicker } from './dso-date-picker.js';
 export { DsoDocumentCard, defineCustomElement as defineCustomElementDsoDocumentCard } from './dso-document-card.js';
 export { DsoDocumentComponent, defineCustomElement as defineCustomElementDsoDocumentComponent } from './dso-document-component.js';

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

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":[],"sourcesContent":[],"version":3}
1	+ {"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

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

package/dist/components/info.js CHANGED Viewed

@@ -14,7 +14,7 @@ const Info = /*@__PURE__*/ proxyCustomElement(class Info extends HTMLElement {
         this.dsoClose = createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (h(Fragment, { key: '6ea8fd02c7e0df97ecf3c57a895334f312c513c3' }, h("slot", { key: '1721e91318a52c8c4208b2acac069c723c748ec5' }), !this.fixed && (h("dso-icon-button", { key: 'fac469f4c2ee028d3f45b83353f038f7cb95fe58', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '3e0e4c7174c343e0ffe3395a3fb0e4b54c7e6dd1' }, h("slot", { key: 'd50d49ce8f6bc9c185e4d8e16a28d1d31d0de520' }), !this.fixed && (h("dso-icon-button", { key: '82c25d9bb8b6d203837f23113c8f0bd676ae4064', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get style() { return infoCss(); }
 }, [257, "dso-info", {

package/dist/components/label.js CHANGED Viewed

@@ -106,13 +106,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: 'f868c06841bb1f9a6f39db8598141634cbe59f5f' }, h("span", { key: '935d20891b9df19b37cf38242892428c81c12631', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: '7441c0e54f721845869c63348d2e5dff35f24434' }, h("span", { key: '8cea7acfa1e735eb8a6cdd66d2d447976c84c950', "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: 'e3d5f4d753cf5ca6ef1bef6fae698b3b4c03e5da', name: "symbol" }), h("span", { key: '242c774421051469948ff841d7b55bf06e9481fd', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '77b62b31482300784b58fb372e28e246773a183f', name: "symbol" }), h("span", { key: 'f40f50f36c78fec1bcc15c1244defcaac94d5a11', 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: '93ae4502166a8c246371249f6b25423ab066e5b7' })), this.removable && (h("dso-icon-button", { key: '35c535b0943aef1ffc59871b43e2222c7490c6d2', 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: '0c0a556cc61f34f782e9da771138e8b0e37e6647', 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: '839f0bdcf8271806e9dfdb9c01ba6dd9ba4b9413' })), this.removable && (h("dso-icon-button", { key: 'df12c751642d42f36d54feeaaf8a53755a5b3b4c', 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: 'e38e943fcdf3f05161c24861a31581ff4ca0b2ab', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/ozon-content-toggletip.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Fragment, transformTag } from '@ste
 import { p as positionTooltip, T as Tooltip } from './tooltip.functional-component.js';
 import { d as defineCustomElement$1 } from './icon.js';
-const ozonContentToggletipCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_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;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_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;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:8px;padding-inline:16px;border-radius:4px;line-height:1.5;max-inline-size:480px}.dso-tooltip .tooltip-arrow{--_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;position:absolute;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}:host{display:inline;--_dt-rich-content-margin-block:8px}::slotted(:not([slot=label])){cursor:default !important}.toggletip-button{display:inline-block;font-size:1em;font-weight:500;margin-block-end:0;text-decoration:none;touch-action:manipulation;text-align:start;user-select:none;vertical-align:middle}.toggletip-button:focus,.toggletip-button:focus-visible{outline-offset:2px}.toggletip-button:active{outline:0}.toggletip-button{border:0;color:var(--_dso-ozon-content-toggletip-color, #2b5780);line-height:1;padding:0;background-color:transparent;cursor:pointer;vertical-align:baseline;display:inline;overflow-wrap:break-word}.toggletip-button,.toggletip-button:hover,.toggletip-button:focus-visible,.toggletip-button:active{text-decoration-line:var(--_dso-ozon-content-toggletip-text-decoration, underline);text-decoration-style:dotted;text-underline-offset:15%}.toggletip-button dso-icon{margin-inline-start:4px;vertical-align:middle}.icon-container{position:relative;padding-inline-end:28px}.icon-container dso-icon{position:absolute}`;
+const ozonContentToggletipCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_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;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_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;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:8px;padding-inline:16px;border-radius:4px;line-height:1.5;max-inline-size:480px}.dso-tooltip .tooltip-arrow{--_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;position:absolute;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}:host{display:inline;--_dt-rich-content-margin-block:8px}::slotted(:not([slot=label])){cursor:default !important}.toggletip-button{display:inline-block;font-size:1em;font-weight:500;margin-block-end:0;text-decoration:none;touch-action:manipulation;text-align:start;user-select:none;vertical-align:middle}.toggletip-button:focus,.toggletip-button:focus-visible{outline-offset:2px}.toggletip-button:active{outline:0}.toggletip-button{border:0;color:var(--_dso-ozon-content-toggletip-color, #2b5780);line-height:1;padding:0;background-color:transparent;cursor:pointer;vertical-align:baseline;display:inline;overflow-wrap:break-word;user-select:text}.toggletip-button,.toggletip-button:hover,.toggletip-button:focus-visible,.toggletip-button:active{text-decoration-line:var(--_dso-ozon-content-toggletip-text-decoration, underline);text-decoration-style:dotted;text-underline-offset:15%}.toggletip-button dso-icon{margin-inline-start:4px;vertical-align:middle}.icon-container{position:relative;padding-inline-end:28px}.icon-container dso-icon{position:absolute}`;
 const ozonContentToggletip = /*@__PURE__*/ proxyCustomElement(class ozonContentToggletip extends HTMLElement {
     constructor(registerHost) {
@@ -72,7 +72,7 @@ const ozonContentToggletip = /*@__PURE__*/ proxyCustomElement(class ozonContentT
         }
     }
     render() {
-        return (h(Fragment, { key: 'ea34c93439597d65072cb7e4cceb45f2775e5403' }, h("span", { key: '3e7dfe0cf9ec29260cedb736a5bf9c37306e9a81', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyUpHandler, onFocusout: this.focusOutHandler, ref: (element) => (this.container = element) }, h("span", { key: '60a75f14d4546603a34f85f993f550f1fb0f1b34', class: "icon-container" }, h("slot", { key: 'cfe50bcc158ad33051c1946ce9599ecaa0f448ce', name: "label" }), h("dso-icon", { key: 'e31aad7d5cd522e324184f380d983ab2b9caf770', icon: this.icon })), h(Tooltip, { key: 'fa3098858227e954e377539761f02d9b4a6820ce', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, h("slot", { key: 'cedc773ae4b66ef0c1bf0b199dafb226072b5093' })))));
+        return (h(Fragment, { key: 'a54415843b624c389127991142ff34f5243440e2' }, h("span", { key: '0abe9014bf5ef7119965edaf6b275d5dba00fb35', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyUpHandler, onFocusout: this.focusOutHandler, ref: (element) => (this.container = element) }, h("span", { key: '15826a1c747256000af00784f1229144a97617ca', class: "icon-container" }, h("slot", { key: '82f68204a52be98c96ea126ea3a21cbe691ac28c', name: "label" }), h("dso-icon", { key: '3e03c69f774ae15e1f8d6becbaee9bdb5dd06cff', icon: this.icon }))), h(Tooltip, { key: '8d0da635d9f6cc8c9f2d8885a34c4a11427c407b', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, h("slot", { key: 'be1c715c0213548b6a625bea5638b793b2bc74df' }))));
     }
     get host() { return this; }
     static get style() { return ozonContentToggletipCss(); }

package/dist/components/ozon-content-toggletip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ozon-content-toggletip.js","mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,~~urEAAurE~~,CAAC;;~~MCWltE~~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~~GAAI~~,CACxB,EACP,CAAA,CAAC,OAAO,EACN,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EACP,IAAA,EAAA,aAAa,EAAE,~~MAAK~~,~~GAAG,~~EACvB,aAAa,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EACpD,kBAAkB,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,EAAA,EAE9D,~~CAAA~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,~~CAAQ~~,CACA,~~CACL,CACE~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.scss?tag=dso-ozon-content-toggletip&encapsulation=shadow","src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\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\r\n@use \"../../../../functional-components/tooltip\";\r\n\r\n@include utilities.box-sizing();\r\n@include tooltip.include($max-inline-size: 60 * units.$u1);\r\n\r\n$icon-margin-inline-start: units.$u1 * 0.5;\r\n\r\n:host {\r\n display: inline;\r\n --_dt-rich-content-margin-block: #{units.$u1};\r\n}\r\n\r\n::slotted(:not([slot=\"label\"])) {\r\n cursor: default !important;\r\n}\r\n\r\n.toggletip-button {\r\n @include button.base($modifiers: false);\r\n\r\n border: 0;\r\n color: var(--_dso-ozon-content-toggletip-color, colors.$donkerblauw);\r\n line-height: 1;\r\n padding: 0;\r\n background-color: transparent;\r\n cursor: pointer;\r\n vertical-align: baseline;\r\n display: inline;\r\n overflow-wrap: break-word;\r\n\r\n &,\r\n &:hover,\r\n &:focus-visible,\r\n &:active {\r\n text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);\r\n text-decoration-style: dotted;\r\n text-underline-offset: 15%;\r\n }\r\n\r\n dso-icon {\r\n margin-inline-start: $icon-margin-inline-start;\r\n vertical-align: middle;\r\n }\r\n}\r\n\r\n.icon-container {\r\n position: relative;\r\n padding-inline-end: units.$u3 + $icon-margin-inline-start;\r\n\r\n dso-icon {\r\n position: absolute;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean } from \"../../../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-ozon-content-toggletip\",\r\n styleUrl: \"./ozon-content-toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class ozonContentToggletip implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoOzonContentToggletipElement;\r\n\r\n /*\r\n The alias of the icon in the button.\r\n */\r\n @Prop({ reflect: true })\r\n icon?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n showToggletip = false;\r\n\r\n private container: HTMLSpanElement \| undefined;\r\n private tooltip: HTMLElement \| undefined;\r\n private tooltipArrow: HTMLElement \| undefined;\r\n\r\n private toggle = () => {\r\n if (this.active) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n };\r\n\r\n private close = () => {\r\n this.active = false;\r\n };\r\n\r\n private focusOutHandler = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyUpHandler = (event: KeyboardEvent) => {\r\n switch (event.key) {\r\n case \"Escape\":\r\n this.close();\r\n return;\r\n case \" \":\r\n case \"Enter\":\r\n this.toggle();\r\n return;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n componentDidRender() {\r\n if (this.tooltip) {\r\n if (this.active && !this.showToggletip) {\r\n this.tooltip.showPopover();\r\n this.showToggletip = true;\r\n } else if (!this.active && this.showToggletip) {\r\n this.tooltip?.hidePopover();\r\n this.showToggletip = false;\r\n }\r\n }\r\n\r\n let cleanUp: TooltipClean \| undefined;\r\n\r\n if (this.active && !cleanUp && this.container && this.tooltip && this.tooltipArrow) {\r\n cleanUp = positionTooltip({\r\n referenceElement: this.container,\r\n tipRef: this.tooltip,\r\n tipArrowRef: this.tooltipArrow,\r\n placementTip: \"top\",\r\n });\r\n }\r\n\r\n if (!this.active && cleanUp) {\r\n cleanUp();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n class=\"toggletip-button\"\r\n role=\"button\"\r\n tabindex={0}\r\n onClick={this.toggle}\r\n onKeyDown={this.keyUpHandler}\r\n onFocusout={this.focusOutHandler}\r\n ref={(element) => (this.container = element)}\r\n >\r\n <span class=\"icon-container\">\r\n <slot name=\"label\" />\r\n <dso-icon icon={this.icon} />\r\n </span>\r\n <Tooltip\r\n visible\r\n onAfterHidden={() => {}}\r\n tipElementRef={(element) => (this.tooltip = element)}\r\n tipArrowElementRef={(element) => (this.tooltipArrow = element)}\r\n >\r\n <slot />\r\n </Tooltip>\r\n ~~</span>\r\n~~ </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ozon-content-toggletip.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.scss?tag=dso-ozon-content-toggletip&encapsulation=shadow","src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\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\r\n@use \"../../../../functional-components/tooltip\";\r\n\r\n@include utilities.box-sizing();\r\n@include tooltip.include($max-inline-size: 60 * units.$u1);\r\n\r\n$icon-margin-inline-start: units.$u1 * 0.5;\r\n\r\n:host {\r\n display: inline;\r\n --_dt-rich-content-margin-block: #{units.$u1};\r\n}\r\n\r\n::slotted(:not([slot=\"label\"])) {\r\n cursor: default !important;\r\n}\r\n\r\n.toggletip-button {\r\n @include button.base($modifiers: false);\r\n\r\n border: 0;\r\n color: var(--_dso-ozon-content-toggletip-color, colors.$donkerblauw);\r\n line-height: 1;\r\n padding: 0;\r\n background-color: transparent;\r\n cursor: pointer;\r\n vertical-align: baseline;\r\n display: inline;\r\n overflow-wrap: break-word;\r\n user-select: text;\r\n\r\n &,\r\n &:hover,\r\n &:focus-visible,\r\n &:active {\r\n text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);\r\n text-decoration-style: dotted;\r\n text-underline-offset: 15%;\r\n }\r\n\r\n dso-icon {\r\n margin-inline-start: $icon-margin-inline-start;\r\n vertical-align: middle;\r\n }\r\n}\r\n\r\n.icon-container {\r\n position: relative;\r\n padding-inline-end: units.$u3 + $icon-margin-inline-start;\r\n\r\n dso-icon {\r\n position: absolute;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean } from \"../../../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-ozon-content-toggletip\",\r\n styleUrl: \"./ozon-content-toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class ozonContentToggletip implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoOzonContentToggletipElement;\r\n\r\n /*\r\n The alias of the icon in the button.\r\n */\r\n @Prop({ reflect: true })\r\n icon?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n showToggletip = false;\r\n\r\n private container: HTMLSpanElement \| undefined;\r\n private tooltip: HTMLElement \| undefined;\r\n private tooltipArrow: HTMLElement \| undefined;\r\n\r\n private toggle = () => {\r\n if (this.active) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n };\r\n\r\n private close = () => {\r\n this.active = false;\r\n };\r\n\r\n private focusOutHandler = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyUpHandler = (event: KeyboardEvent) => {\r\n switch (event.key) {\r\n case \"Escape\":\r\n this.close();\r\n return;\r\n case \" \":\r\n case \"Enter\":\r\n this.toggle();\r\n return;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n componentDidRender() {\r\n if (this.tooltip) {\r\n if (this.active && !this.showToggletip) {\r\n this.tooltip.showPopover();\r\n this.showToggletip = true;\r\n } else if (!this.active && this.showToggletip) {\r\n this.tooltip?.hidePopover();\r\n this.showToggletip = false;\r\n }\r\n }\r\n\r\n let cleanUp: TooltipClean \| undefined;\r\n\r\n if (this.active && !cleanUp && this.container && this.tooltip && this.tooltipArrow) {\r\n cleanUp = positionTooltip({\r\n referenceElement: this.container,\r\n tipRef: this.tooltip,\r\n tipArrowRef: this.tooltipArrow,\r\n placementTip: \"top\",\r\n });\r\n }\r\n\r\n if (!this.active && cleanUp) {\r\n cleanUp();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n class=\"toggletip-button\"\r\n role=\"button\"\r\n tabindex={0}\r\n onClick={this.toggle}\r\n onKeyDown={this.keyUpHandler}\r\n onFocusout={this.focusOutHandler}\r\n ref={(element) => (this.container = element)}\r\n >\r\n <span class=\"icon-container\">\r\n <slot name=\"label\" />\r\n <dso-icon icon={this.icon} />\r\n </span>\r\n </span>\r\n <Tooltip\r\n visible\r\n onAfterHidden={() => {}}\r\n tipElementRef={(element) => (this.tooltip = element)}\r\n tipArrowElementRef={(element) => (this.tooltipArrow = element)}\r\n >\r\n <slot />\r\n </Tooltip>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/ozon-content.js CHANGED Viewed

@@ -2631,8 +2631,14 @@ span[role=paragraph] {
   display: block;
 }
+span[role=paragraph] {
+  margin-block: var(--_dt-span-role-paragraph-margin-block, 0);
+}
 span[role=paragraph] + span[role=paragraph] {
-  margin-block: 16px 0;
+  margin-block: var(--_dt-span-role-paragraph-margin-block, 16px 0);
+}
+span[role=paragraph] + span[role=paragraph] .dso-tertiary {
+  margin-block-start: -3px;
 }
 :host(:not([inline])) .fallback {
@@ -3428,7 +3434,7 @@ const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent extends H
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '71bf1fc9de6ed6e967c1344f904be839d0f7e87d' }, transformed);
+        return h(Fragment, { key: 'aa3def72854fedc1b70c0a0e48c595391e5a34f1' }, transformed);
     }
     static get watchers() { return {
         "content": ["contentWatcher"]