@dso-toolkit/core 67.0.0 → 67.1.0

package/dist/collection/components/accordion/components/accordion-section.js

@@ -1,4 +1,4 @@
-import { h, forceUpdate, Fragment, Host, } from "@stencil/core";
+import { forceUpdate, Fragment, h, Host, } from "@stencil/core";
 import { stateMap, } from "./accordion-section.interfaces";
 // eslint-disable-next-line no-console
 const log = window["_dsoLog"] === true ? console.log.bind(console.log) : function () { };
@@ -70,6 +70,7 @@ export class AccordionSection {
             });
         };
         this.handleTitle = undefined;
+        this.wijzigactie = undefined;
         this.heading = "h2";
         this.handleUrl = undefined;
         this.status = undefined;
@@ -151,12 +152,13 @@ export class AccordionSection {
         var _a;
         const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
         const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
-        return (h(Host, { key: '23337050418689dbfc47c9542db507be85152548', class: {
+        return (h(Host, { key: '937a873b5c70c026f894ae8dea52683b863d90b0', class: {
                 "dso-accordion-section": true,
                 ["dso-accordion-" + variant]: true,
                 "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
                 "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: '8493773157cbad694a9276a34edf42f28971c1d3', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '03af7533dc94bef4e5a7ef4bea580075f02c892c', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: 'a2ffd853eb9dfd47220f64a6af05bd1a78bb1efe', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '1d0233d7f7464ba1d0071d401761923d7b644661', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '125ac6d140ca961facba19f52ac0ba12dc2b6364' })))));
+                ["dso-accordion-wijzigactie-" + this.wijzigactie]: !!this.wijzigactie,
+            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: 'f11e91044d5bb13452ae5bf47fee3687251e82df', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '8139be8585ce016428b0a8b60b47f3b96f3e0875', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("dso-renvooi", { value: this.handleTitle }), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, h("dso-renvooi", { value: this.handleTitle }), this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: 'd80403dc350ce8c407c4d57afa239445915e4860', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '04bdf62633f13f08bad4dc0e8ac870cb3c633393', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: 'c28041eb3c640bce06d98411d80d43b9127058f6' })))));
     }
     static get is() { return "dso-accordion-section"; }
     static get encapsulation() { return "shadow"; }
@@ -176,12 +178,18 @@ export class AccordionSection {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "original": "RenvooiValue | undefined",
+                    "resolved": "string | undefined | { toegevoegd: string; } | { verwijderd: string; } | { was: string; wordt: string; }",
+                    "references": {
+                        "RenvooiValue": {
+                            "location": "import",
+                            "path": "../../renvooi/renvooi.interfaces",
+                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiValue"
+                        }
+                    }
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The title of the handle"
@@ -189,6 +197,29 @@ export class AccordionSection {
                 "attribute": "handle-title",
                 "reflect": false
             },
+            "wijzigactie": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AccordionSectionWijzigactie",
+                    "resolved": "\"verwijder\" | \"voegtoe\" | undefined",
+                    "references": {
+                        "AccordionSectionWijzigactie": {
+                            "location": "import",
+                            "path": "./accordion-section.interfaces",
+                            "id": "src/components/accordion/components/accordion-section.interfaces.ts::AccordionSectionWijzigactie"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional 'wijzigactie' that signals if the section is added or removed."
+                },
+                "attribute": "wijzigactie",
+                "reflect": false
+            },
             "heading": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/accordion/components/accordion-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-section.js","sourceRoot":"","sources":["../../../../../src/components/accordion/components/accordion-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  forceUpdate,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n  Method,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  AccordionSectionAnimationStartEvent,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, handleElementRef }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n        {children}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n  heading: AccordionHeading;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return (\r\n        <h2 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h2>\r\n      );\r\n    case \"h3\":\r\n      return (\r\n        <h3 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h3>\r\n      );\r\n    case \"h4\":\r\n      return (\r\n        <h4 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h4>\r\n      );\r\n    case \"h5\":\r\n      return (\r\n        <h5 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h5>\r\n      );\r\n  }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n  state?: AccordionSectionState;\r\n  icon?: string;\r\n  attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n  if (state) {\r\n    return <HandleStateIcon state={state} />;\r\n  }\r\n\r\n  if (attachmentCount) {\r\n    return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n  }\r\n\r\n  if (icon) {\r\n    return <dso-icon icon={icon}></dso-icon>;\r\n  }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n  if (state === \"error\") {\r\n    return <dso-icon icon=\"status-error\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"danger\") {\r\n    return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"success\") {\r\n    return <dso-icon icon=\"status-success\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"info\") {\r\n    return <dso-icon icon=\"status-info\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"warning\") {\r\n    return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n  }\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-accordion-section\",\r\n  styleUrl: \"accordion-section.scss\",\r\n  shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n  private accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionSectionElement;\r\n\r\n  /**\r\n   * The title of the handle\r\n   */\r\n  @Prop()\r\n  handleTitle?: string;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: AccordionHeading = \"h2\";\r\n\r\n  /**\r\n   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n   */\r\n  @Prop()\r\n  handleUrl?: string;\r\n\r\n  /**\r\n   * `state` takes precedence over `attachmentCount` and `icon`\r\n   */\r\n  @Prop()\r\n  status?: AccordionSectionState;\r\n\r\n  /**\r\n   * `attachmentCount` takes precedence over `icon`\r\n   */\r\n  @Prop()\r\n  attachmentCount?: number;\r\n\r\n  /**\r\n   * To set an icon in the heading handle.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  /**\r\n   * The status of the section.\r\n   */\r\n  @Prop()\r\n  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Set when this Accordion Section contains or will contain an Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasNestedAccordion = false;\r\n\r\n  /**\r\n   * The label to be displayed in the heading handle inside a Label (optional)\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The status of the Label in the heading handle (optional)\r\n   */\r\n  @Prop()\r\n  labelStatus?: LabelStatus;\r\n\r\n  /**\r\n   * Calling this method will set focus to the handle.\r\n   */\r\n  @Method()\r\n  async focusHandle() {\r\n    this.handleElementRef?.focus();\r\n  }\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  get containsNestedAccordion() {\r\n    return this.host.querySelector(\"dso-accordion\") !== null;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n    log(\r\n      `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n        bodyHeight,\r\n      )}, behavior: ${JSON.stringify(behavior)})`,\r\n    );\r\n\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      log(`DSO Toolkit [Accordion Section] returning`);\r\n\r\n      return;\r\n    }\r\n\r\n    // this y is relative to the top of the viewport.\r\n    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (bodyHeight ?? 0) : 0);\r\n\r\n    log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n    log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n    const box = this.host.getBoundingClientRect();\r\n\r\n    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n    const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n    const top = box.top + scrollTop - clientTop;\r\n\r\n    log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n    if (sectionBottomY > window.innerHeight) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n          sectionBottomY > window.innerHeight,\r\n        )};`,\r\n      );\r\n\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n      );\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n          shouldScrollToTopOfSection,\r\n        )};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n        behavior,\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top,\r\n        behavior,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n    this.dsoAnimationStart.emit({\r\n      animation: this.open ? \"opening\" : \"closing\",\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section starts its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: true,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n        }}\r\n        hidden={!variant}\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n      >\r\n        <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n          <HandleElement\r\n            handleUrl={this.handleUrl}\r\n            onClick={this.handleClick}\r\n            open={this.open}\r\n            handleElementRef={(e) => (this.handleElementRef = e)}\r\n          >\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n\r\n                <span>{this.handleTitle}</span>\r\n\r\n                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n                <span>\r\n                  {this.handleTitle}\r\n                  {this.isNeutral && (\r\n                    <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n                  )}\r\n                </span>\r\n\r\n                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            )}\r\n          </HandleElement>\r\n        </Handle>\r\n        <dso-expandable\r\n          class=\"dso-section-body\"\r\n          open={this.open}\r\n          enableAnimation\r\n          minimumHeight={this.isNeutral ? 0 : 4}\r\n          onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"accordion-section.js","sourceRoot":"","sources":["../../../../../src/components/accordion/components/accordion-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  h,\r\n  Host,\r\n  Method,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionAnimationStartEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  AccordionSectionWijzigactie,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, handleElementRef }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n        {children}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n  heading: AccordionHeading;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return (\r\n        <h2 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h2>\r\n      );\r\n    case \"h3\":\r\n      return (\r\n        <h3 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h3>\r\n      );\r\n    case \"h4\":\r\n      return (\r\n        <h4 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h4>\r\n      );\r\n    case \"h5\":\r\n      return (\r\n        <h5 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h5>\r\n      );\r\n  }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n  state?: AccordionSectionState;\r\n  icon?: string;\r\n  attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n  if (state) {\r\n    return <HandleStateIcon state={state} />;\r\n  }\r\n\r\n  if (attachmentCount) {\r\n    return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n  }\r\n\r\n  if (icon) {\r\n    return <dso-icon icon={icon}></dso-icon>;\r\n  }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n  if (state === \"error\") {\r\n    return <dso-icon icon=\"status-error\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"danger\") {\r\n    return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"success\") {\r\n    return <dso-icon icon=\"status-success\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"info\") {\r\n    return <dso-icon icon=\"status-info\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"warning\") {\r\n    return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n  }\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-accordion-section\",\r\n  styleUrl: \"accordion-section.scss\",\r\n  shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n  private accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionSectionElement;\r\n\r\n  /**\r\n   * The title of the handle\r\n   */\r\n  @Prop()\r\n  handleTitle!: RenvooiValue | undefined;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the section is added or removed.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: AccordionSectionWijzigactie;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: AccordionHeading = \"h2\";\r\n\r\n  /**\r\n   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n   */\r\n  @Prop()\r\n  handleUrl?: string;\r\n\r\n  /**\r\n   * `state` takes precedence over `attachmentCount` and `icon`\r\n   */\r\n  @Prop()\r\n  status?: AccordionSectionState;\r\n\r\n  /**\r\n   * `attachmentCount` takes precedence over `icon`\r\n   */\r\n  @Prop()\r\n  attachmentCount?: number;\r\n\r\n  /**\r\n   * To set an icon in the heading handle.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  /**\r\n   * The status of the section.\r\n   */\r\n  @Prop()\r\n  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Set when this Accordion Section contains or will contain an Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasNestedAccordion = false;\r\n\r\n  /**\r\n   * The label to be displayed in the heading handle inside a Label (optional)\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The status of the Label in the heading handle (optional)\r\n   */\r\n  @Prop()\r\n  labelStatus?: LabelStatus;\r\n\r\n  /**\r\n   * Calling this method will set focus to the handle.\r\n   */\r\n  @Method()\r\n  async focusHandle() {\r\n    this.handleElementRef?.focus();\r\n  }\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  get containsNestedAccordion() {\r\n    return this.host.querySelector(\"dso-accordion\") !== null;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n    log(\r\n      `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n        bodyHeight,\r\n      )}, behavior: ${JSON.stringify(behavior)})`,\r\n    );\r\n\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      log(`DSO Toolkit [Accordion Section] returning`);\r\n\r\n      return;\r\n    }\r\n\r\n    // this y is relative to the top of the viewport.\r\n    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (bodyHeight ?? 0) : 0);\r\n\r\n    log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n    log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n    const box = this.host.getBoundingClientRect();\r\n\r\n    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n    const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n    const top = box.top + scrollTop - clientTop;\r\n\r\n    log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n    if (sectionBottomY > window.innerHeight) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n          sectionBottomY > window.innerHeight,\r\n        )};`,\r\n      );\r\n\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n      );\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n          shouldScrollToTopOfSection,\r\n        )};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n        behavior,\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top,\r\n        behavior,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n    this.dsoAnimationStart.emit({\r\n      animation: this.open ? \"opening\" : \"closing\",\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section starts its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: true,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n          [\"dso-accordion-wijzigactie-\" + this.wijzigactie]: !!this.wijzigactie,\r\n        }}\r\n        hidden={!variant}\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n      >\r\n        <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n          <HandleElement\r\n            handleUrl={this.handleUrl}\r\n            onClick={this.handleClick}\r\n            open={this.open}\r\n            handleElementRef={(e) => (this.handleElementRef = e)}\r\n          >\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n                <dso-renvooi value={this.handleTitle} />\r\n                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n                <span>\r\n                  <dso-renvooi value={this.handleTitle} />\r\n                  {this.isNeutral && (\r\n                    <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n                  )}\r\n                </span>\r\n\r\n                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            )}\r\n          </HandleElement>\r\n        </Handle>\r\n        <dso-expandable\r\n          class=\"dso-section-body\"\r\n          open={this.open}\r\n          enableAnimation\r\n          minimumHeight={this.isNeutral ? 0 : 4}\r\n          onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/document-card/document-card.css

@@ -33,7 +33,8 @@
 ::slotted([slot=meta]) {
   display: flex !important;
   justify-content: space-between !important;
-  margin-inline-start: auto !important;
+  flex-shrink: 0 !important;
+  align-self: end !important;
 }
 @media screen and (max-width: 480px) {
   ::slotted([slot=meta]) {

package/dist/collection/components/document-component/document-component-heading.js

@@ -12,19 +12,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h } from "@stencil/core";
 export const Heading = (_a, children) => {
-    var { heading } = _a, props = __rest(_a, ["heading"]);
+    var { heading, mode, href, onClick } = _a, props = __rest(_a, ["heading", "mode", "href", "onClick"]);
+    let headingElement;
     switch (heading) {
         default:
         case "h2":
-            return h("h2", Object.assign({}, props), children);
+            headingElement = (h("h2", Object.assign({}, props, { onClick: mode === "document" ? onClick : undefined }), children));
+            break;
         case "h3":
-            return h("h3", Object.assign({}, props), children);
+            headingElement = (h("h3", Object.assign({}, props, { onClick: mode === "document" ? onClick : undefined }), children));
+            break;
         case "h4":
-            return h("h4", Object.assign({}, props), children);
+            headingElement = (h("h4", Object.assign({}, props, { onClick: mode === "document" ? onClick : undefined }), children));
+            break;
         case "h5":
-            return h("h5", Object.assign({}, props), children);
+            headingElement = (h("h5", Object.assign({}, props, { onClick: mode === "document" ? onClick : undefined }), children));
+            break;
         case "h6":
-            return h("h6", Object.assign({}, props), children);
+            headingElement = (h("h6", Object.assign({}, props, { onClick: mode === "document" ? onClick : undefined }), children));
     }
+    if (mode === "table-of-contents" && href) {
+        return (h("a", { href: href, onClick: onClick, class: "heading-anchor" }, headingElement));
+    }
+    return headingElement;
 };
 //# sourceMappingURL=document-component-heading.js.map

package/dist/collection/components/document-component/document-component-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"document-component-heading.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component-heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,OAAO,GAEhB,CAAC,EAAqB,EAAE,QAAQ,EAAE,EAAE;QAAnC,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IACtB,QAAQ,OAAO,EAAE,CAAC;QAChB,QAAQ;QACR,KAAK,IAAI;YACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;QACxC,KAAK,IAAI;YACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;QACxC,KAAK,IAAI;YACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;QACxC,KAAK,IAAI;YACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;QACxC,KAAK,IAAI;YACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IAC1C,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, ...props }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return <h2 {...props}>{children}</h2>;\r\n    case \"h3\":\r\n      return <h3 {...props}>{children}</h3>;\r\n    case \"h4\":\r\n      return <h4 {...props}>{children}</h4>;\r\n    case \"h5\":\r\n      return <h5 {...props}>{children}</h5>;\r\n    case \"h6\":\r\n      return <h6 {...props}>{children}</h6>;\r\n  }\r\n};\r\n"]}
+{"version":3,"file":"document-component-heading.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component-heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,CAAC,EAA8B,MAAM,eAAe,CAAC;AAU9D,MAAM,CAAC,MAAM,OAAO,GAEhB,CAAC,EAA0C,EAAE,QAAQ,EAAE,EAAE;QAAxD,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,OAAY,EAAP,KAAK,cAAxC,sCAA0C,CAAF;IAC3C,IAAI,cAAqB,CAAC;IAC1B,QAAQ,OAAO,EAAE,CAAC;QAChB,QAAQ;QACR,KAAK,IAAI;YACP,cAAc,GAAG,CACf,0BAAQ,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KAC9D,QAAQ,CACN,CACN,CAAC;YACF,MAAM;QACR,KAAK,IAAI;YACP,cAAc,GAAG,CACf,0BAAQ,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KAC9D,QAAQ,CACN,CACN,CAAC;YACF,MAAM;QACR,KAAK,IAAI;YACP,cAAc,GAAG,CACf,0BAAQ,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KAC9D,QAAQ,CACN,CACN,CAAC;YACF,MAAM;QACR,KAAK,IAAI;YACP,cAAc,GAAG,CACf,0BAAQ,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KAC9D,QAAQ,CACN,CACN,CAAC;YACF,MAAM;QACR,KAAK,IAAI;YACP,cAAc,GAAG,CACf,0BAAQ,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KAC9D,QAAQ,CACN,CACN,CAAC;IACN,CAAC;IAED,IAAI,IAAI,KAAK,mBAAmB,IAAI,IAAI,EAAE,CAAC;QACzC,OAAO,CACL,SAAG,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,gBAAgB,IACpD,cAAc,CACb,CACL,CAAC;IACJ,CAAC;IAED,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent, VNode } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\nimport { DocumentComponentMode } from \"./document-component.models\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n  mode: DocumentComponentMode;\r\n  href?: string;\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, mode, href, onClick, ...props }, children) => {\r\n  let headingElement: VNode;\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      headingElement = (\r\n        <h2 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h2>\r\n      );\r\n      break;\r\n    case \"h3\":\r\n      headingElement = (\r\n        <h3 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h3>\r\n      );\r\n      break;\r\n    case \"h4\":\r\n      headingElement = (\r\n        <h4 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h4>\r\n      );\r\n      break;\r\n    case \"h5\":\r\n      headingElement = (\r\n        <h5 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h5>\r\n      );\r\n      break;\r\n    case \"h6\":\r\n      headingElement = (\r\n        <h6 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h6>\r\n      );\r\n  }\r\n\r\n  if (mode === \"table-of-contents\" && href) {\r\n    return (\r\n      <a href={href} onClick={onClick} class=\"heading-anchor\">\r\n        {headingElement}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return headingElement;\r\n};\r\n"]}

package/dist/collection/components/document-component/document-component.css

@@ -719,7 +719,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host([wijzigactie=verwijderContainer]) .heading-container,
 :host(:where([wijzigactie=verwijder])) {
   --_dso-document-component-text-decoration: line-through;
-  --_dso-renvooi-text-decoration: line-through;
 }
 :host([wijzigactie=verwijderContainer]) .heading-container,
 :host(:where([wijzigactie=verwijder])) {
@@ -817,6 +816,25 @@ a.dso-tertiary, a.dso-tertiary:visited {
   color: #275937;
 }
 
+.heading-anchor {
+  display: flex;
+  flex-wrap: nowrap;
+  background-color: transparent;
+  color: var(--link-color);
+  text-decoration: underline;
+  text-decoration: none;
+}
+.heading-anchor:hover, .heading-anchor:focus-visible {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
+.heading-anchor:active {
+  text-decoration: none;
+}
+.heading-anchor:visited {
+  color: var(--link-visited-color);
+}
+
 .heading-element {
   align-items: start;
   display: flex;
@@ -828,6 +846,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
   vertical-align: middle;
 }
 
+#heading-title {
+  display: block;
+}
+
 :host([not-collapsible]) .heading-container {
   margin-block-end: 0;
 }
@@ -838,20 +860,42 @@ a.dso-tertiary, a.dso-tertiary:visited {
   color: #000;
 }
 
-:host(:not([not-collapsible])) .heading-element {
+:host([mode=document]:not([not-collapsible])) {
+  --link-color: document-component.$heading-anchor-color;
+  --link-hover-color: document-component.$heading-anchor-hover-color;
+}
+:host([mode=document]:not([not-collapsible])) .heading-element {
   cursor: pointer;
 }
-:host(:not([not-collapsible])) .heading-element:hover, :host(:not([not-collapsible])) .heading-element:focus-visible {
+:host([mode=document]:not([not-collapsible])) .heading-element:hover, :host([mode=document]:not([not-collapsible])) .heading-element:focus-visible {
   color: var(--link-hover-color);
   text-decoration: underline;
 }
-:host(:not([not-collapsible])) .heading-element:active {
+:host([mode=document]:not([not-collapsible])) .heading-element:active {
   text-decoration: none;
 }
-:host(:not([not-collapsible])) .editaction-label {
+:host([mode=document]:not([not-collapsible])) .editaction-label {
   margin-inline-start: 24px;
 }
 
+:host([mode=table-of-contents]) .heading-container {
+  padding-inline-start: 8px;
+}
+:host([mode=table-of-contents]) .heading-element {
+  color: inherit;
+}
+:host([mode=table-of-contents]) .editaction-label {
+  margin-inline-start: 0;
+}
+
+:host([mode=table-of-contents][type=ARTIKEL]) .heading-element {
+  color: inherit;
+}
+
+:host([mode=table-of-contents]:not([type=HOOFDSTUK])) .heading-element {
+  font-weight: normal;
+}
+
 .addons {
   margin-inline-start: auto;
   display: flex;
@@ -886,11 +930,15 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .annotation-container {
   padding-inline-end: 8px;
 }
+.annotation-container dso-panel {
+  --_dso-panel-body-background-color: #fff;
+}
 
-:host(:where([wijzigactie=verwijder])) .annotation-container dso-panel {
+:host(:where([annotations-wijzigactie=verwijder])) .annotation-container dso-panel {
   --_dso-panel-body-background-color: #faecee;
+  --_dso-renvooi-text-decoration: line-through;
 }
 
-:host([wijzigactie=voegtoe]) .annotation-container dso-panel {
+:host([annotations-wijzigactie=voegtoe]) .annotation-container dso-panel {
   --_dso-panel-body-background-color: #f2f8ea;
 }

package/dist/collection/components/document-component/document-component.js

@@ -1,4 +1,5 @@
 import { h, Fragment, Host } from "@stencil/core";
+import { isModifiedEvent } from "../../utils/is-modified-event";
 import { Heading } from "./document-component-heading";
 const wijzigactieLabels = {
     nieuweContainer: "Toegevoegd",
@@ -15,7 +16,10 @@ const wijzigactieLabels = {
 export class DocumentComponent {
     constructor() {
         this.handleHeadingClick = (e) => {
-            if (this.type !== "LID") {
+            if (this.mode === "table-of-contents") {
+                this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+            }
+            else if (this.type !== "LID") {
                 this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });
             }
         };
@@ -46,8 +50,11 @@ export class DocumentComponent {
         this.alternativeTitle = undefined;
         this.type = undefined;
         this.wijzigactie = undefined;
+        this.annotationsWijzigactie = undefined;
         this.mark = undefined;
         this.recursiveToggle = undefined;
+        this.mode = "document";
+        this.href = undefined;
     }
     get wijzigactieLabel() {
         return this.wijzigactie && wijzigactieLabels[this.wijzigactie];
@@ -61,6 +68,11 @@ export class DocumentComponent {
         }
         return undefined;
     }
+    showOntwerpBadge() {
+        return (this.genesteOntwerpInformatie &&
+            !this.bevatOntwerpInformatie &&
+            ((!this.open && this.mode === "document") || this.mode === "table-of-contents"));
+    }
     render() {
         const suffix = this.suffix();
         const collapsible = !!((this.label || this.nummer || this.opschrift || this.alternativeTitle) &&
@@ -73,7 +85,7 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (h(Host, { key: '39bacfd2c41b74ed451bf34161e6a33cf51c7ca9', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '93b3a3c570ee0188884d4328c21c1f2f8b563784', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'd7b9e993c885cada89f79720c677abd464b64806', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '32d527c8735ccd5d053d422d5d1d0f90bb1f0e99', class: "heading" }, h(Heading, { key: 'e10aaa36596cbd958eeae81321d5c85ca1d7ef70', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: '4af544286bbf38dce190c844c55fb1e24a934d1c', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: '8ec4306f64b6b044291b5cb5bc48ef3303d517cd', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: 'e6da0a2685724087edf27d53b6691b9765deeac6', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: 'a6d9b394665aa139349a156ec41612a11619964e', id: "heading-title" }, this.notApplicable && h("span", { key: 'cfec0cfb4e5c6f60f1e1deeacb2d64c5462fcdfa', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: 'f6d72e0a97216cd23c86f4ed8f3d8c6d372a091e' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: '62c9d7923bd11e7680d8a37fd3415b2886bf3973', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: '52e92f79252e4ee7d87e8488d001399a947df8fb', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: '71013a6e7021e88a59c2106e92bdaf7242ee48e3', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '252343a7a833b1a4f155a2817f42f3da1ace6d04', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '4683c28f78e5980fbd05fd64ffafbe3fee43fad2', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '61a5e97d4e50bdcefbc75695d48ae5ca32bd8853', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("button", { key: 'a68005f6e877278b552fb177361517102b6f88c6', type: "button", class: "dso-tertiary", "aria-controls": this.openAnnotation ? "annotations" : undefined, "aria-expanded": this.openAnnotation.toString(), onClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("dso-icon", { key: '663c9753888c9c527c1c927545eedcaf4e544478', icon: "label" }), h("span", { key: '338190bc276d24b094e910c159ac63f4f950c40b', class: "sr-only" }, "Toelichting bekijken")))))))), this.openAnnotation && (h("div", { key: 'b18ee4e6199481087cb861e6e459583204063f2c', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: 'c602d21323b6d035f90049b503d797d0233b0ba6', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("h2", { key: '65c0e9f263a34cf17cac4c6d4d61998304cc692b', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'ced7df684cc5ae4dd8c7a943cfcad201b7c42353', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: '391d266d030eb0b1dffa566951592adaa821469f', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: 'fa0c9b2aa478bacc1d9f1546e3e553442e9a5f01', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '2f727f2691b60ae40a8a0914977f041227c3255e', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: 'ca7b318a2656bd425dcd97cbd6b34badad68f696', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { key: '42acd41f100d89a7c21a5eb776d14b809f5880a7', class: "children-container", part: "_children-container" }, h("slot", { key: 'f38841370988de0d34e03461e4d35c759b3b6853' }))));
+        return (h(Host, { key: '050711aa3e5227ac9a468b4177cf2408a812c524', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'bd5484e50d030e424fb3ba4e2d5b86451b00e181', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '327b9a53addde2ff513a077b28c140b760c35d4b', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '1bc6de30e0517bbf6d671a34cc0e52281d53b8d0', class: "heading" }, h(Heading, { key: '26a645af827d41e0ce19d1c2b17a7f14e9be299c', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("button", { key: '477baa2478a912a7e62098ed402680221c607b4e', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: '9a04f2c1dc70deb54d2f7977d7d41740c78df351', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: 'a594823723148ed63fb1774dc446296ae3efc4da', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("span", { key: '909c52529cc65621d7973a2e06f3501d8d8d4216', id: "heading-title" }, this.notApplicable && h("span", { key: 'd869da95a5e8d8d49bd7850c0ac4760cfad05801', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: '07d4c76b7e1329efb78c41560389b506165de833' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("button", { key: '941b9f8c4d29897ec2a39bf42904c5b326a475d9', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: '46337a7625cb46d1161569722d76822c831a872b', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.showOntwerpBadge() && (h(Fragment, null, h("dso-badge", { key: 'ade951add661eefbd7d11c9de029e6b2e0394cba', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '294d694a2f50878bbcac8b7b13476ce5cbdf78e3', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '18484e4344d0ff694dc67858eaff24ca0d27b0a8', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '8bf558ed5dd48df4d23f4957302e147c45651b95', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (h("button", { key: '05314fa8305396e460fe95688acb97f94f166a1e', type: "button", class: "dso-tertiary", "aria-controls": this.openAnnotation ? "annotations" : undefined, "aria-expanded": this.openAnnotation.toString(), onClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("dso-icon", { key: '0a0f62fc38084a2d6c0c916350dba255ee353993', icon: "label" }), h("span", { key: '13ed74cf4e9ce6b812d1a21f1c4f937657eabcaf', class: "sr-only" }, "Kenmerken en kaartgegevens ", this.openAnnotation ? "verbergen" : "tonen")))))))), this.openAnnotation && (h("div", { key: '463130f23f107cc2347747bb39fdbbe8a890247b', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: 'f4d3b73f47d0918b276694de035bb722ec79c57f', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '00db47e61722b1b4917210987513edd18758e66a', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '48b7dc786ed04ec4246c8034ab8bc3d15859b943', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === "document" && (h("div", { key: '729087f463134d47897dcf5246d949e8c8d73610', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: '80333fb2c38651ad98e7bc707c65a60fb4e2bd2d', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: 'b06d8846e17d9c1b165bef0e38fb31018dddcae3', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '01529975b3e2526a5540bf96cdf19fe2488fabc3', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { key: 'cb741975adcc22246353c06878f1dc6d1b2a8f1b', class: "children-container", part: "_children-container" }, h("slot", { key: 'fc5cf019d82b45aa6ac5789bc228a639367f18c2' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }
@@ -418,6 +430,29 @@ export class DocumentComponent {
                 "attribute": "wijzigactie",
                 "reflect": true
             },
+            "annotationsWijzigactie": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DocumentComponentAnnotationsWijzigactie",
+                    "resolved": "\"verwijder\" | \"voegtoe\" | undefined",
+                    "references": {
+                        "DocumentComponentAnnotationsWijzigactie": {
+                            "location": "import",
+                            "path": "./document-component.models",
+                            "id": "src/components/document-component/document-component.models.ts::DocumentComponentAnnotationsWijzigactie"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The wijzigactie for all annotations."
+                },
+                "attribute": "annotations-wijzigactie",
+                "reflect": true
+            },
             "mark": {
                 "type": "unknown",
                 "mutable": false,
@@ -461,6 +496,47 @@ export class DocumentComponent {
                 },
                 "attribute": "recursive-toggle",
                 "reflect": false
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DocumentComponentMode",
+                    "resolved": "\"document\" | \"table-of-contents\"",
+                    "references": {
+                        "DocumentComponentMode": {
+                            "location": "import",
+                            "path": "./document-component.models",
+                            "id": "src/components/document-component/document-component.models.ts::DocumentComponentMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\""
+                },
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "\"document\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL to which the Heading links (only in mode=\"table-of-contents\")."
+                },
+                "attribute": "href",
+                "reflect": true
             }
         };
     }
@@ -507,6 +583,27 @@ export class DocumentComponent {
                         }
                     }
                 }
+            }, {
+                "method": "dsoTableOfContentsClick",
+                "name": "dsoTableOfContentsClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks the heading in mode=\"table-of-contents\"."
+                },
+                "complexType": {
+                    "original": "DocumentComponentTableOfContentsClickEvent",
+                    "resolved": "DocumentComponentTableOfContentsClickEvent",
+                    "references": {
+                        "DocumentComponentTableOfContentsClickEvent": {
+                            "location": "import",
+                            "path": "./document-component.models",
+                            "id": "src/components/document-component/document-component.models.ts::DocumentComponentTableOfContentsClickEvent"
+                        }
+                    }
+                }
             }, {
                 "method": "dsoOzonContentAnchorClick",
                 "name": "dsoOzonContentAnchorClick",