npm - @dso-toolkit/core - Versions diffs - 62.0.0 → 62.2.0 - Mend

@dso-toolkit/core 62.0.0 → 62.2.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 (148) hide show

package/dist/collection/components/expandable/expandable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expandable.js","sourceRoot":"","sources":["../../../src/components/expandable/expandable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAwB,MAAM,SAAS,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAQ,MAAM,UAAU,CAAC;~~AAWhC~~,MAAM,OAAO,UAAU;;;2BAoBH,KAAK;;0BASN,KAAK;;EAGtB,UAAU;IACR,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;EACH,CAAC;EAGD,qBAAqB,CAAC,eAAwB;;IAC5C,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,8BAA8B,EAAE,CAAC;MACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;SAAM;MACL,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;MAClC,OAAO,IAAI,CAAC,aAAa,CAAC;MAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;KACpC;EACH,CAAC;~~EAQD~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n} from \"@stencil/core\";\r\nimport anime, { AnimeInstance } from \"animejs\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nexport interface ExpandableAnimationEndEvent {\r\n bodyHeight: number \| undefined;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-expandable\",\r\n styleUrl: \"expandable.scss\",\r\n shadow: true,\r\n})\r\nexport class Expandable implements ComponentInterface {\r\n private resizeObserver?: ResizeObserver;\r\n\r\n private bodyHeight?: number;\r\n\r\n private animeInstance?: AnimeInstance;\r\n\r\n @Element()\r\n host!: HTMLDsoExpandableElement;\r\n\r\n /*\r\n Set to `true` to expand the content.\r\n /\r\n @Prop({ reflect: true })\r\n open?: boolean;\r\n\r\n /\r\n Set to `true` to show the content animated.\r\n /\r\n @Prop()\r\n enableAnimation = false;\r\n\r\n /\r\n When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to\r\n /\r\n @Prop()\r\n minimumHeight?: number;\r\n\r\n @State()\r\n animationReady = false;\r\n\r\n @Watch(\"open\")\r\n toggleOpen() {\r\n if (this.enableAnimation) {\r\n this.activateAnimation();\r\n }\r\n }\r\n\r\n @Watch(\"enableAnimation\")\r\n toggleEnableAnimation(enableAnimation: boolean) {\r\n if (enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n this.activateObserver();\r\n } else {\r\n this.resizeObserver?.disconnect();\r\n delete this.animeInstance;\r\n this.host.removeAttribute(\"style\");\r\n }\r\n }\r\n\r\n /\r\n Fired ~~when~~ ~~the~~ ~~animation~~ ~~ends.~~ ~~Only~~ ~~when~~ ~~`enableAnimation~~ = ~~true`.\~~r\n */\r\n @Event({ bubbles: false })\r\n dsoExpandableAnimationEnd!: EventEmitter<ExpandableAnimationEndEvent>;\r\n\r\n componentDidLoad(): void {\r\n if (this.enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n }\r\n\r\n this.activateObserver();\r\n }\r\n\r\n private activateObserver() {\r\n this.resizeObserver?.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n aria-hidden={this.open ? \"false\" : \"true\"}\r\n class={clsx({\r\n \"dso-animate-ready\": this.enableAnimation && this.animationReady,\r\n \"dso-hide\": !this.enableAnimation && !this.open,\r\n })}\r\n >\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n\r\n private prepareAnimationResizeObserver(): void {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n if (!entry) {\r\n throw new Error(\"No entry found\");\r\n }\r\n\r\n // entry.contentRect does not include padding, so we use getBoundingClientRect.\r\n const height = entry.target.getBoundingClientRect().height;\r\n\r\n if (this.bodyHeight !== height) {\r\n this.bodyHeight = height;\r\n }\r\n\r\n this.instantiateAnimation();\r\n }, 150)\r\n );\r\n }\r\n\r\n private instantiateAnimation(): void {\r\n this.animeInstance = anime({\r\n targets: this.host,\r\n height: this.minimumHeight ?? 0,\r\n easing: \"cubicBezier(0.4, 0, 0.2, 1)\",\r\n duration: 260,\r\n autoplay: false,\r\n direction: \"normal\",\r\n begin: () => {\r\n if (this.open) {\r\n this.host.style.visibility = \"\";\r\n this.host.style.position = \"\";\r\n this.host.style.bottom = \"\";\r\n }\r\n },\r\n complete: () => {\r\n this.host.style.height = \"\";\r\n\r\n if (!this.open) {\r\n this.host.style.visibility = \"hidden\";\r\n this.host.style.position = \"absolute\";\r\n this.host.style.bottom = \"100%\";\r\n }\r\n },\r\n changeComplete: () => {\r\n this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight });\r\n },\r\n });\r\n\r\n if (!this.open) {\r\n this.animeInstance.reverse();\r\n this.animeInstance.play();\r\n }\r\n\r\n if (this.host) {\r\n this.host.style.height = \"\";\r\n }\r\n\r\n this.animationReady = !!this.animeInstance;\r\n }\r\n\r\n private activateAnimation(): void {\r\n if (this.animeInstance) {\r\n if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {\r\n this.animeInstance.reverse();\r\n } else {\r\n if (this.open) {\r\n this.animeInstance.direction = \"reverse\";\r\n this.animeInstance.play();\r\n } else {\r\n this.animeInstance.direction = \"normal\";\r\n this.animeInstance.play();\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"expandable.js","sourceRoot":"","sources":["../../../src/components/expandable/expandable.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 h,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n} from \"@stencil/core\";\r\nimport anime, { AnimeInstance } from \"animejs\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nexport interface ExpandableAnimationStartEvent {}\r\n\r\nexport interface ExpandableAnimationEndEvent {\r\n bodyHeight: number \| undefined;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-expandable\",\r\n styleUrl: \"expandable.scss\",\r\n shadow: true,\r\n})\r\nexport class Expandable implements ComponentInterface {\r\n private resizeObserver?: ResizeObserver;\r\n\r\n private bodyHeight?: number;\r\n\r\n private animeInstance?: AnimeInstance;\r\n\r\n @Element()\r\n host!: HTMLDsoExpandableElement;\r\n\r\n /*\r\n Set to `true` to expand the content.\r\n /\r\n @Prop({ reflect: true })\r\n open?: boolean;\r\n\r\n /\r\n Set to `true` to show the content animated.\r\n /\r\n @Prop()\r\n enableAnimation = false;\r\n\r\n /\r\n When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to\r\n /\r\n @Prop()\r\n minimumHeight?: number;\r\n\r\n @State()\r\n animationReady = false;\r\n\r\n @Watch(\"open\")\r\n toggleOpen() {\r\n if (this.enableAnimation) {\r\n this.activateAnimation();\r\n }\r\n }\r\n\r\n @Watch(\"enableAnimation\")\r\n toggleEnableAnimation(enableAnimation: boolean) {\r\n if (enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n this.activateObserver();\r\n } else {\r\n this.resizeObserver?.disconnect();\r\n delete this.animeInstance;\r\n this.host.removeAttribute(\"style\");\r\n }\r\n }\r\n\r\n /\r\n Fired before expanding.\r\n /\r\n @Event({ bubbles: false })\r\n dsoExpandableAnimationStart!: EventEmitter<ExpandableAnimationStartEvent>;\r\n\r\n /\r\n Fired after expanding.\r\n */\r\n @Event({ bubbles: false })\r\n dsoExpandableAnimationEnd!: EventEmitter<ExpandableAnimationEndEvent>;\r\n\r\n componentDidLoad(): void {\r\n if (this.enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n }\r\n\r\n this.activateObserver();\r\n }\r\n\r\n private activateObserver() {\r\n this.resizeObserver?.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n aria-hidden={this.open ? \"false\" : \"true\"}\r\n class={clsx({\r\n \"dso-animate-ready\": this.enableAnimation && this.animationReady,\r\n \"dso-hide\": !this.enableAnimation && !this.open,\r\n })}\r\n >\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n\r\n private prepareAnimationResizeObserver(): void {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n if (!entry) {\r\n throw new Error(\"No entry found\");\r\n }\r\n\r\n // entry.contentRect does not include padding, so we use getBoundingClientRect.\r\n const height = entry.target.getBoundingClientRect().height;\r\n\r\n if (this.bodyHeight !== height) {\r\n this.bodyHeight = height;\r\n }\r\n\r\n this.instantiateAnimation();\r\n }, 150)\r\n );\r\n }\r\n\r\n private instantiateAnimation(): void {\r\n this.animeInstance = anime({\r\n targets: this.host,\r\n height: this.minimumHeight ?? 0,\r\n easing: \"cubicBezier(0.4, 0, 0.2, 1)\",\r\n duration: 260,\r\n autoplay: false,\r\n direction: \"normal\",\r\n changeBegin: () => {\r\n this.dsoExpandableAnimationStart.emit({});\r\n },\r\n begin: () => {\r\n if (this.open) {\r\n this.host.style.visibility = \"\";\r\n this.host.style.position = \"\";\r\n this.host.style.bottom = \"\";\r\n }\r\n },\r\n complete: () => {\r\n this.host.style.height = \"\";\r\n\r\n if (!this.open) {\r\n this.host.style.visibility = \"hidden\";\r\n this.host.style.position = \"absolute\";\r\n this.host.style.bottom = \"100%\";\r\n }\r\n },\r\n changeComplete: () => {\r\n this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight });\r\n },\r\n });\r\n\r\n if (!this.open) {\r\n this.animeInstance.reverse();\r\n this.animeInstance.play();\r\n }\r\n\r\n if (this.host) {\r\n this.host.style.height = \"\";\r\n }\r\n\r\n this.animationReady = !!this.animeInstance;\r\n }\r\n\r\n private activateAnimation(): void {\r\n if (this.animeInstance) {\r\n if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {\r\n this.animeInstance.reverse();\r\n } else {\r\n if (this.open) {\r\n this.animeInstance.direction = \"reverse\";\r\n this.animeInstance.play();\r\n } else {\r\n this.animeInstance.direction = \"normal\";\r\n this.animeInstance.play();\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"]}

package/dist/collection/components/header/header.css CHANGED Viewed

@@ -29,50 +29,32 @@
   padding-top: 16px;
 }
-.login .dso-tertiary,
-.logout .dso-tertiary {
-  cursor: pointer;
-  font-family: Asap, sans-serif;
-  font-weight: 600;
-  vertical-align: text-bottom;
-}
-.profile a,
-.logout a,
-.login a {
-  text-decoration: none;
-  color: #39870c;
-  font-weight: 600;
-}
-.profile a:hover, .profile a:focus,
-.logout a:hover,
-.logout a:focus,
-.login a:hover,
-.login a:focus {
-  text-decoration: none;
-}
-.profile a:active,
-.logout a:active,
-.login a:active {
-  text-decoration: underline;
-}
-.profile a:focus,
-.logout a:focus,
-.login a:focus {
-  color: #fff;
-}
 .dso-header-session {
   display: flex;
+  align-items: center;
   margin-left: auto;
 }
-.dso-header-session .profile a {
+.dso-header-session .profile .dso-tertiary,
+.dso-header-session .login .dso-tertiary,
+.dso-header-session .logout .dso-tertiary,
+.dso-header-session .help .dso-tertiary {
+  cursor: pointer;
+  font-family: Asap, sans-serif;
+  font-weight: 600;
+  line-height: 1.5;
+}
+.dso-header-session .profile {
   margin-left: 8px;
 }
-.dso-header-session .profile + .logout {
+.dso-header-session .profile + .logout,
+.dso-header-session .profile ~ .help {
   border-left: 3px solid #ccc;
-  margin-left: 16px;
-  padding-left: 16px;
+  margin-left: 8px;
+  padding-left: 8px;
+}
+.dso-header-session .help a,
+.dso-header-session .help button {
+  display: flex;
 }
 .dso-navbar {
@@ -83,7 +65,7 @@
 }
 dso-dropdown-menu button {
-  align-items: flex-end;
+  align-items: center;
   background-color: transparent;
   border: 0;
   display: flex;

package/dist/collection/components/header/header.interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.interfaces.js","sourceRoot":"","sources":["../../../src/components/header/header.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface HeaderMenuItem {\r\n label: string;\r\n url: string;\r\n active?: boolean;\r\n}\r\n\r\nexport type HeaderNavigationType = \"menuItem\" \| \"profile\" \| \"logout\" \| \"login\" \| \"userHome\";\r\n\r\nexport interface HeaderClickEvent {\r\n originalEvent: MouseEvent;\r\n type: HeaderNavigationType;\r\n /** True when user selected the page holding Ctrl, Alt or other modifiers. Can be used to determine navigation. /\r\n isModifiedEvent: boolean;\r\n /* Url of the selected item. */\r\n url?: string;\r\n}\r\n\r\nexport interface HeaderClickMenuItemEvent extends HeaderClickEvent {\r\n menuItem: HeaderMenuItem;\r\n}\r\n\r\nexport type HeaderEvent = HeaderClickEvent \| HeaderClickMenuItemEvent;\r\n"]}
1	+ {"version":3,"file":"header.interfaces.js","sourceRoot":"","sources":["../../../src/components/header/header.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface HeaderMenuItem {\r\n label: string;\r\n url: string;\r\n active?: boolean;\r\n}\r\n\r\nexport type HeaderNavigationType = \"menuItem\" \| \"profile\" \| \"logout\" \| \"login\" \| \"userHome\" \| \"help\";\r\n\r\nexport interface HeaderClickEvent {\r\n originalEvent: MouseEvent;\r\n type: HeaderNavigationType;\r\n /** True when user selected the page holding Ctrl, Alt or other modifiers. Can be used to determine navigation. /\r\n isModifiedEvent: boolean;\r\n /* Url of the selected item. */\r\n url?: string;\r\n}\r\n\r\nexport interface HeaderClickMenuItemEvent extends HeaderClickEvent {\r\n menuItem: HeaderMenuItem;\r\n}\r\n\r\nexport type HeaderEvent = HeaderClickEvent \| HeaderClickMenuItemEvent;\r\n"]}

package/dist/collection/components/header/header.js CHANGED Viewed

@@ -23,6 +23,8 @@ export class Header {
     this.authStatus = "none";
     this.loginUrl = undefined;
     this.logoutUrl = undefined;
+    this.showHelp = false;
+    this.helpUrl = undefined;
     this.userProfileName = undefined;
     this.userProfileUrl = undefined;
     this.userHomeUrl = undefined;
@@ -112,7 +114,7 @@ export class Header {
         ["use-drop-down"]: this.showDropDown,
       }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("slot", { name: "logo" })), this.showDropDown &&
       this.mainMenu &&
-      (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", strategy: "absolute", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
+      (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", strategy: "absolute", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen")))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, "Help"), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, "Help"), h("dso-icon", { icon: "help" })))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen")))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, "Help"), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, "Help"), h("dso-icon", { icon: "help" })))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
       this.mainMenu
         .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
         .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { placement: "bottom" }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Meer")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
@@ -204,7 +206,7 @@ export class Header {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor."
+          "text": "When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\nThe login button will then render as an anchor."
         },
         "attribute": "login-url",
         "reflect": false
@@ -221,11 +223,46 @@ export class Header {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The URL to open when the user activates \"logout\"."
+          "text": "The URL to open when the user activates \"logout\".\r\nIf no URL is specified, a button element is used instead."
         },
         "attribute": "logout-url",
         "reflect": false
       },
+      "showHelp": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | undefined",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Show a help-button or link in the header"
+        },
+        "attribute": "show-help",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "helpUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The URL to open when the user activates \"help\".\r\nIf no URL is specified, a button element is used instead."
+        },
+        "attribute": "help-url",
+        "reflect": false
+      },
       "userProfileName": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/header/header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n scoped: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string }\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Menu</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <span class=\"profile-label\">Welkom:</span>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu placement=\"bottom\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Meer</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n scoped: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string }\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp? = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Menu</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>Help</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>Help</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>Help</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>Help</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu placement=\"bottom\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Meer</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/highlight-box/highlight-box.css CHANGED Viewed

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  container-type: inline-size;
 }
 :host-context(.row.dso-equal-heights) {

package/dist/collection/components/logo/logo.js CHANGED Viewed

@@ -50,7 +50,7 @@ export class Logo {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The ribbon contains the text for a possible 'sticker' on top of the logo.\r\nUsed to clarify status of the page, like 'beta'."
+          "text": "The ribbon contains the text for a possible 'sticker' on top of the logo.\r\nUsed to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")"
         },
         "attribute": "ribbon",
         "reflect": false

package/dist/collection/components/logo/logo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../src/components/logo/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7E,MAAM,OAAO,IAAI;;;;;EAgBf,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,kBAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;MAC9G,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG;QACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D;MAEN,WAAK,KAAK,EAAC,eAAe;QACxB,YAAM,KAAK,EAAC,yBAAyB,gBAAiB;QACtD,YAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C;MAEL,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ;MAC1D,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-logo\",\r\n styleUrl: \"logo.scss\",\r\n shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n /*\r\n The label clarifies the service within the Omgevingsloket, shown\r\n * as a subtitle (and on smaller screens as the main wordmark itself).\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n * Used to clarify ~~status~~ of ~~the~~ ~~page~~, ~~like~~ ~~'beta'.\~~r\n \r\n /\r\n @Prop()\r\n ribbon?: string;\r\n\r\n render() {\r\n return (\r\n <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n </svg>\r\n\r\n <div class=\"logo-wordmark\">\r\n <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n <span class=\"logo-wordmark-loket\">loket</span>\r\n </div>\r\n\r\n {this.label && <span class=\"logo-label\">{this.label}</span>}\r\n {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../src/components/logo/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7E,MAAM,OAAO,IAAI;;;;;EAgBf,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,kBAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;MAC9G,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG;QACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D;MAEN,WAAK,KAAK,EAAC,eAAe;QACxB,YAAM,KAAK,EAAC,yBAAyB,gBAAiB;QACtD,YAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C;MAEL,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ;MAC1D,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-logo\",\r\n styleUrl: \"logo.scss\",\r\n shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n /*\r\n The label clarifies the service within the Omgevingsloket, shown\r\n * as a subtitle (and on smaller screens as the main wordmark itself).\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n \r\n /\r\n @Prop()\r\n ribbon?: string;\r\n\r\n render() {\r\n return (\r\n <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n </svg>\r\n\r\n <div class=\"logo-wordmark\">\r\n <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n <span class=\"logo-wordmark-loket\">loket</span>\r\n </div>\r\n\r\n {this.label && <span class=\"logo-label\">{this.label}</span>}\r\n {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -46,7 +46,6 @@ export class Mapper {
       return t;
     }, []);
     this.fallbackNode = new OzonContentFallbackNode();
-    this.domParser = new DOMParser();
   }
   findMapper(name) {
     var _a;
@@ -85,21 +84,32 @@ export class Mapper {
       path,
     });
   }
-  transform(xml, context) {
-    if (!xml) {
+  transform(input, context) {
+    if (!input) {
       return h(Fragment, null);
     }
-    const document = this.domParser.parseFromString(xml, "text/xml");
+    const document = this.inputToXmlDocument(input);
     if (document.querySelector("parsererror")) {
       console.error({
         message: "[DSO Toolkit: Ozon Content Mapper] Unable to parse XML",
         context,
-        xml,
+        input,
         document,
       });
       return h(Fragment, null);
     }
     return this.mapNodeToJsx(document.getRootNode(), context, []);
   }
+  inputToXmlDocument(input) {
+    var _a;
+    if (input instanceof XMLDocument) {
+      return input;
+    }
+    if (typeof input === "string") {
+      (_a = this.domParser) !== null && _a !== void 0 ? _a : (this.domParser = new DOMParser());
+      return this.domParser.parseFromString(input, "text/xml");
+    }
+    return document.implementation.createDocument(null, null);
+  }
 }
 //# sourceMappingURL=ozon-content-mapper.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ozon-content-mapper.js","sourceRoot":"","sources":["../../../src/components/ozon-content/ozon-content-mapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAO,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,oCAAoC,EAAE,MAAM,sCAAsC,CAAC;AAC5F,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,+BAA+B,EAAE,MAAM,gCAAgC,CAAC;~~AAIjF~~,MAAM,OAAO,MAAM;EAAnB;IACU,YAAO,GAAsB;MACnC,IAAI,mBAAmB,EAAE;MACzB,IAAI,uBAAuB,EAAE;MAC7B,IAAI,qBAAqB,EAAE;MAC3B,IAAI,wBAAwB,EAAE;MAC9B,IAAI,qBAAqB,EAAE;MAC3B,IAAI,qBAAqB,EAAE;MAC3B,IAAI,iBAAiB,EAAE;MACvB,IAAI,sBAAsB,EAAE;MAC5B,IAAI,oCAAoC,EAAE;MAC1C,IAAI,mBAAmB,EAAE;MACzB,IAAI,oBAAoB,EAAE;MAC1B,IAAI,uBAAuB,EAAE;MAC7B,IAAI,qBAAqB,EAAE;MAC3B,IAAI,oBAAoB,EAAE;MAC1B,IAAI,mBAAmB,EAAE;MACzB,IAAI,0BAA0B,EAAE;MAChC,IAAI,+BAA+B,EAAE;KACtC,CAAC;IAEM,SAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAW,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;MACpD,IAAI,CAAC,CAAC,OAAO,EAAE;QACb,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;OACtB;MAED,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,EAAE,CAAC,CAAC;IAEC,iBAAY,GAAG,IAAI,uBAAuB,EAAE,CAAC;~~IAE7C~~,~~cAAS,GAAG,IAAI,SAAS,EAAE,~~CAAC;~~EAmEtC~~,~~CAAC;EAjES,~~UAAU,CAAC,IAAY;;IAC7B,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;MAC5B,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,CACL,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;MACtB,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE;QACzB,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;OAC9B;MAED,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC;IACzB,CAAC,CAAC,mCAAI,IAAI,CAAC,YAAY,CACxB,CAAC;EACJ,CAAC;EAED,YAAY,CAAC,IAA8B,EAAE,OAA2B,EAAE,IAAY;;IACpF,IAAI,IAAI,YAAY,QAAQ,EAAE;MAC5B,OAAO,EAAC,QAAQ,QAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAY,CAAC;KAChG;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MACvB,OAAO,EAAC,QAAQ,QAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAY,CAAC;KACpF;IAED,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IACzC,IAAI,CAAC,MAAM,EAAE;MACX,OAAO,EAAC,QAAQ,OAAG,CAAC;KACrB;IAED,MAAM,QAAQ,GAAG,MAAA,MAAM,CAAC,QAAQ,uDAAG,IAAI,CAAC,CAAC;IAEzC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7D,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAU,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,iCAAM,OAAO,CAAC,KAAK,KAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9G,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;MACzB,MAAM,EAAE,OAAO,CAAC,MAAM;MACtB,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC;MACnE,eAAe,EAAE,OAAO,CAAC,eAAe;MACxC,QAAQ;MACR,KAAK;MACL,IAAI;KACL,CAAC,CAAC;EACL,CAAC;EAED,SAAS,CAAC,~~GAAW~~,EAAE,OAA2B;~~IAChD~~,IAAI,CAAC,~~GAAG~~,EAAE;~~MACR~~,OAAO,EAAC,QAAQ,OAAG,CAAC;KACrB;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,~~SAAS~~,CAAC,~~eAAe~~,CAAC,~~GAAG,EAAE,UAAU,~~CAAC~~,CAAC~~;~~IACjE~~,IAAI,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE;MACzC,OAAO,CAAC,KAAK,CAAC;QACZ,OAAO,EAAE,wDAAwD;QACjE,OAAO;QACP,~~GAAG~~;~~QACH~~,QAAQ;OACT,CAAC,CAAC;MAEH,OAAO,EAAC,QAAQ,OAAG,CAAC;KACrB;IAED,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;EAChE,CAAC;CACF","sourcesContent":["import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"./get-node-name.function\";\r\nimport { OzonContentAlNode } from \"./nodes/al.node\";\r\nimport { OzonContentBronNode } from \"./nodes/bron.node\";\r\nimport { OzonContentDocumentNode } from \"./nodes/document.node\";\r\nimport { OzonContentExtRefNode } from \"./nodes/ext-ref.node\";\r\nimport { OzonContentFallbackNode } from \"./nodes/fallback.node\";\r\nimport { OzonContentFiguurNode } from \"./nodes/figuur.node\";\r\nimport { OzonContentInhoudNode } from \"./nodes/inhoud.node\";\r\nimport { OzonContentInlineTekstAfbeeldingNode } from \"./nodes/inline-tekst-afbeelding.node\";\r\nimport { OzonContentInlineNodes } from \"./nodes/inline.nodes\";\r\nimport { OzonContentIntIoRefNode } from \"./nodes/int-io-ref.node\";\r\nimport { OzonContentIntRefNode } from \"./nodes/int-ref.node\";\r\nimport { OzonContentLijstNode } from \"./nodes/lijst.node\";\r\nimport { OzonContentNieuweTekstNode } from \"./nodes/nieuwe-tekst.node\";\r\nimport { OzonContentNootNode } from \"./nodes/noot.node\";\r\nimport { OzonContentOpschriftNode } from \"./nodes/opschrift.node\";\r\nimport { OzonContentTableNode } from \"./nodes/table.node\";\r\nimport { OzonContentTextNode } from \"./nodes/text.node\";\r\nimport { OzonContentVerwijderdeTekstNode } from \"./nodes/verwijderde-tekst.node\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentNode } from \"./ozon-content-node.interface\";\r\n\r\nexport class Mapper {\r\n private mappers: OzonContentNode[] = [\r\n new OzonContentTextNode(),\r\n new OzonContentDocumentNode(),\r\n new OzonContentInhoudNode(),\r\n new OzonContentOpschriftNode(),\r\n new OzonContentIntRefNode(),\r\n new OzonContentExtRefNode(),\r\n new OzonContentAlNode(),\r\n new OzonContentInlineNodes(),\r\n new OzonContentInlineTekstAfbeeldingNode(),\r\n new OzonContentNootNode(),\r\n new OzonContentTableNode(),\r\n new OzonContentIntIoRefNode(),\r\n new OzonContentFiguurNode(),\r\n new OzonContentLijstNode(),\r\n new OzonContentBronNode(),\r\n new OzonContentNieuweTekstNode(),\r\n new OzonContentVerwijderdeTekstNode(),\r\n ];\r\n\r\n private skip = this.mappers.reduce<string[]>((t, m) => {\r\n if (m.handles) {\r\n t.push(...m.handles);\r\n }\r\n\r\n return t;\r\n }, []);\r\n\r\n private fallbackNode = new OzonContentFallbackNode();\r\n\r\n private domParser ~~= new~~ DOMParser();\r\n\r\n private findMapper(name: string): OzonContentNode \| undefined {\r\n if (this.skip.includes(name)) {\r\n return undefined;\r\n }\r\n\r\n return (\r\n this.mappers.find((m) => {\r\n if (Array.isArray(m.name)) {\r\n return m.name.includes(name);\r\n }\r\n\r\n return m.name === name;\r\n }) ?? this.fallbackNode\r\n );\r\n }\r\n\r\n mapNodeToJsx(node: Node \| Node[] \| NodeList, context: OzonContentContext, path: Node[]): JSX.Element {\r\n if (node instanceof NodeList) {\r\n return <Fragment>{Array.from(node).map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n }\r\n\r\n if (Array.isArray(node)) {\r\n return <Fragment>{node.map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n }\r\n\r\n const nodeName = getNodeName(node);\r\n const mapper = this.findMapper(nodeName);\r\n if (!mapper) {\r\n return <Fragment />;\r\n }\r\n\r\n const identity = mapper.identify?.(node);\r\n\r\n const state = identity ? context.state[identity] : undefined;\r\n const setState = identity ? (s: unknown) => context.setState({ ...context.state, [identity]: s }) : undefined;\r\n\r\n return mapper.render(node, {\r\n inline: context.inline,\r\n mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),\r\n emitAnchorClick: context.emitAnchorClick,\r\n setState,\r\n state,\r\n path,\r\n });\r\n }\r\n\r\n transform(~~xml~~: ~~string~~, context: OzonContentContext): JSX.Element {\r\n if (!~~xml~~) {\r\n return <Fragment />;\r\n }\r\n\r\n const document = this.~~domParser.parseFromString~~(~~xml, \"text/xml\"~~);\r\n if (document.querySelector(\"parsererror\")) {\r\n console.error({\r\n message: \"[DSO Toolkit: Ozon Content Mapper] Unable to parse XML\",\r\n context,\r\n ~~xml~~,\r\n document,\r\n });\r\n\r\n return <Fragment />;\r\n }\r\n\r\n return this.mapNodeToJsx(document.getRootNode(), context, []);\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"ozon-content-mapper.js","sourceRoot":"","sources":["../../../src/components/ozon-content/ozon-content-mapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"./get-node-name.function\";\r\nimport { OzonContentAlNode } from \"./nodes/al.node\";\r\nimport { OzonContentBronNode } from \"./nodes/bron.node\";\r\nimport { OzonContentDocumentNode } from \"./nodes/document.node\";\r\nimport { OzonContentExtRefNode } from \"./nodes/ext-ref.node\";\r\nimport { OzonContentFallbackNode } from \"./nodes/fallback.node\";\r\nimport { OzonContentFiguurNode } from \"./nodes/figuur.node\";\r\nimport { OzonContentInhoudNode } from \"./nodes/inhoud.node\";\r\nimport { OzonContentInlineTekstAfbeeldingNode } from \"./nodes/inline-tekst-afbeelding.node\";\r\nimport { OzonContentInlineNodes } from \"./nodes/inline.nodes\";\r\nimport { OzonContentIntIoRefNode } from \"./nodes/int-io-ref.node\";\r\nimport { OzonContentIntRefNode } from \"./nodes/int-ref.node\";\r\nimport { OzonContentLijstNode } from \"./nodes/lijst.node\";\r\nimport { OzonContentNieuweTekstNode } from \"./nodes/nieuwe-tekst.node\";\r\nimport { OzonContentNootNode } from \"./nodes/noot.node\";\r\nimport { OzonContentOpschriftNode } from \"./nodes/opschrift.node\";\r\nimport { OzonContentTableNode } from \"./nodes/table.node\";\r\nimport { OzonContentTextNode } from \"./nodes/text.node\";\r\nimport { OzonContentVerwijderdeTekstNode } from \"./nodes/verwijderde-tekst.node\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentNode } from \"./ozon-content-node.interface\";\r\nimport { OzonContentInputType } from \"./ozon-content.interfaces\";\r\n\r\nexport class Mapper {\r\n private mappers: OzonContentNode[] = [\r\n new OzonContentTextNode(),\r\n new OzonContentDocumentNode(),\r\n new OzonContentInhoudNode(),\r\n new OzonContentOpschriftNode(),\r\n new OzonContentIntRefNode(),\r\n new OzonContentExtRefNode(),\r\n new OzonContentAlNode(),\r\n new OzonContentInlineNodes(),\r\n new OzonContentInlineTekstAfbeeldingNode(),\r\n new OzonContentNootNode(),\r\n new OzonContentTableNode(),\r\n new OzonContentIntIoRefNode(),\r\n new OzonContentFiguurNode(),\r\n new OzonContentLijstNode(),\r\n new OzonContentBronNode(),\r\n new OzonContentNieuweTekstNode(),\r\n new OzonContentVerwijderdeTekstNode(),\r\n ];\r\n\r\n private skip = this.mappers.reduce<string[]>((t, m) => {\r\n if (m.handles) {\r\n t.push(...m.handles);\r\n }\r\n\r\n return t;\r\n }, []);\r\n\r\n private fallbackNode = new OzonContentFallbackNode();\r\n\r\n private domParser?: DOMParser;\r\n\r\n private findMapper(name: string): OzonContentNode \| undefined {\r\n if (this.skip.includes(name)) {\r\n return undefined;\r\n }\r\n\r\n return (\r\n this.mappers.find((m) => {\r\n if (Array.isArray(m.name)) {\r\n return m.name.includes(name);\r\n }\r\n\r\n return m.name === name;\r\n }) ?? this.fallbackNode\r\n );\r\n }\r\n\r\n mapNodeToJsx(node: Node \| Node[] \| NodeList, context: OzonContentContext, path: Node[]): JSX.Element {\r\n if (node instanceof NodeList) {\r\n return <Fragment>{Array.from(node).map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n }\r\n\r\n if (Array.isArray(node)) {\r\n return <Fragment>{node.map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n }\r\n\r\n const nodeName = getNodeName(node);\r\n const mapper = this.findMapper(nodeName);\r\n if (!mapper) {\r\n return <Fragment />;\r\n }\r\n\r\n const identity = mapper.identify?.(node);\r\n\r\n const state = identity ? context.state[identity] : undefined;\r\n const setState = identity ? (s: unknown) => context.setState({ ...context.state, [identity]: s }) : undefined;\r\n\r\n return mapper.render(node, {\r\n inline: context.inline,\r\n mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),\r\n emitAnchorClick: context.emitAnchorClick,\r\n setState,\r\n state,\r\n path,\r\n });\r\n }\r\n\r\n transform(input: OzonContentInputType \| undefined, context: OzonContentContext): JSX.Element {\r\n if (!input) {\r\n return <Fragment />;\r\n }\r\n\r\n const document = this.inputToXmlDocument(input);\r\n if (document.querySelector(\"parsererror\")) {\r\n console.error({\r\n message: \"[DSO Toolkit: Ozon Content Mapper] Unable to parse XML\",\r\n context,\r\n input,\r\n document,\r\n });\r\n\r\n return <Fragment />;\r\n }\r\n\r\n return this.mapNodeToJsx(document.getRootNode(), context, []);\r\n }\r\n\r\n private inputToXmlDocument(input: OzonContentInputType): XMLDocument {\r\n if (input instanceof XMLDocument) {\r\n return input;\r\n }\r\n\r\n if (typeof input === \"string\") {\r\n this.domParser ??= new DOMParser();\r\n\r\n return this.domParser.parseFromString(input, \"text/xml\");\r\n }\r\n\r\n return document.implementation.createDocument(null, null);\r\n }\r\n}\r\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ozon-content.interfaces.js","sourceRoot":"","sources":["../../../src/components/ozon-content/ozon-content.interfaces.ts"],"names":[],"mappings":"AAAA,iCAAiC","sourcesContent":["// Sync interfaces with readme.md\r\n\r\nexport interface OzonContentAnchorClickEvent {\r\n /** Node type, eg: `IntRef` or `IntIoRef` */\r\n node: string;\r\n href: string;\r\n documentComponent: string;\r\n originalEvent: MouseEvent;\r\n}\r\n"]}
1	+ {"version":3,"file":"ozon-content.interfaces.js","sourceRoot":"","sources":["../../../src/components/ozon-content/ozon-content.interfaces.ts"],"names":[],"mappings":"AAAA,iCAAiC","sourcesContent":["// Sync interfaces with readme.md\r\n\r\nexport interface OzonContentAnchorClickEvent {\r\n /** Node type, eg: `IntRef` or `IntIoRef` */\r\n node: string;\r\n href: string;\r\n documentComponent: string;\r\n originalEvent: MouseEvent;\r\n}\r\n\r\nexport type OzonContentInputType = XMLDocument \| string;\r\n"]}

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

@@ -11,14 +11,13 @@ export class OzonContent {
     this.state = {};
   }
   render() {
-    var _a;
     const context = {
       state: this.state,
       inline: this.inline,
       setState: (state) => (this.state = state),
       emitAnchorClick: this.dsoAnchorClick.emit,
     };
-    const transformed = mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : "", context);
+    const transformed = mapper.transform(this.content, context);
     return h(Fragment, null, transformed);
   }
   static get is() { return "dso-ozon-content"; }
@@ -39,12 +38,18 @@ export class OzonContent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
+          "original": "OzonContentInputType",
+          "resolved": "XMLDocument | string | undefined",
+          "references": {
+            "OzonContentInputType": {
+              "location": "import",
+              "path": "./ozon-content.interfaces",
+              "id": "src/components/ozon-content/ozon-content.interfaces.ts::OzonContentInputType"
+            }
+          }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The XML to be rendered."

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EAET,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,QAAQ,EAER,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAK/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;;;kBAWb,KAAK;iBAcgB,EAAE;;EALhC,cAAc;IACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;EAClB,CAAC;EAKD,MAAM;;IACJ,MAAM,OAAO,GAAuB;MAClC,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,MAAM,EAAE,IAAI,CAAC,MAAM;MACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACzC,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;KAC1C,CAAC;IAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,~~MAAA,~~IAAI,CAAC,OAAO,~~mCAAI,~~EAAE,~~EAAE,~~OAAO,CAAC,CAAC;~~IAElE~~,OAAO,EAAC,QAAQ,QAAE,WAAW,CAAY,CAAC;EAC5C,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Event,\r\n EventEmitter,\r\n Prop,\r\n State,\r\n Fragment,\r\n JSX,\r\n Watch,\r\n} from \"@stencil/core\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentAnchorClickEvent } from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n tag: \"dso-ozon-content\",\r\n styleUrl: \"ozon-content.scss\",\r\n shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n /*\r\n The XML to be rendered.\r\n /\r\n @Prop()\r\n content: ~~string \| undefined~~;\r\n\r\n /\r\n Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n /\r\n @Prop({ reflect: true })\r\n inline = false;\r\n\r\n /\r\n Emitted when `<a>` is clicked.\r\n */\r\n @Event()\r\n dsoAnchorClick!: EventEmitter<OzonContentAnchorClickEvent>;\r\n\r\n @Watch(\"content\")\r\n contentWatcher() {\r\n this.state = {};\r\n }\r\n\r\n @State()\r\n state: OzonContentNodeState = {};\r\n\r\n render(): JSX.Element {\r\n const context: OzonContentContext = {\r\n state: this.state,\r\n inline: this.inline,\r\n setState: (state) => (this.state = state),\r\n emitAnchorClick: this.dsoAnchorClick.emit,\r\n };\r\n\r\n const transformed = mapper.transform(this.content ~~?? \"\"~~, context);\r\n\r\n return <Fragment>{transformed}</Fragment>;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EAET,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,QAAQ,EAER,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAK/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;;;kBAWb,KAAK;iBAcgB,EAAE;;EALhC,cAAc;IACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;EAClB,CAAC;EAKD,MAAM;IACJ,MAAM,OAAO,GAAuB;MAClC,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,MAAM,EAAE,IAAI,CAAC,MAAM;MACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACzC,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;KAC1C,CAAC;IAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAE5D,OAAO,EAAC,QAAQ,QAAE,WAAW,CAAY,CAAC;EAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Event,\r\n EventEmitter,\r\n Prop,\r\n State,\r\n Fragment,\r\n JSX,\r\n Watch,\r\n} from \"@stencil/core\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentAnchorClickEvent, OzonContentInputType } from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n tag: \"dso-ozon-content\",\r\n styleUrl: \"ozon-content.scss\",\r\n shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n /*\r\n The XML to be rendered.\r\n /\r\n @Prop()\r\n content?: OzonContentInputType;\r\n\r\n /\r\n Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n /\r\n @Prop({ reflect: true })\r\n inline = false;\r\n\r\n /\r\n Emitted when `<a>` is clicked.\r\n */\r\n @Event()\r\n dsoAnchorClick!: EventEmitter<OzonContentAnchorClickEvent>;\r\n\r\n @Watch(\"content\")\r\n contentWatcher() {\r\n this.state = {};\r\n }\r\n\r\n @State()\r\n state: OzonContentNodeState = {};\r\n\r\n render(): JSX.Element {\r\n const context: OzonContentContext = {\r\n state: this.state,\r\n inline: this.inline,\r\n setState: (state) => (this.state = state),\r\n emitAnchorClick: this.dsoAnchorClick.emit,\r\n };\r\n\r\n const transformed = mapper.transform(this.content, context);\r\n\r\n return <Fragment>{transformed}</Fragment>;\r\n }\r\n}\r\n"]}

package/dist/collection/components/viewer-grid/components/document-panel.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { viewerGridSizeLabelMap, } from "../viewer-grid.interfaces";
+import { SizingButtons } from "./sizing-buttons";
 export const DocumentPanel = ({ tabView, panelSize, shrinkDocumentPanel, expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd, }) => (h("div", { class: "dso-document-panel", onTransitionEnd: (e) => {
     if (e.propertyName === "flex-basis") {
       dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });
     }
-  } }, !tabView && (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte documentpaneel: ", viewerGridSizeLabelMap[panelSize]), panelSize !== "small" && (h("button", { type: "button", class: "shrink", onClick: shrinkDocumentPanel }, h("span", { class: "sr-only" }, "Documentpaneel smaller maken"), h("dso-icon", { icon: "chevron-right" }))), panelSize !== "large" && (h("button", { type: "button", class: "expand", onClick: expandDocumentPanel }, h("span", { class: "sr-only" }, "Documentpaneel breder maken"), h("dso-icon", { icon: "chevron-left" }))))), h("div", { class: "content" }, h("slot", { name: "document-panel" }))));
+  } }, !tabView && (h(SizingButtons, { panelLabel: "Documentpaneel", size: panelSize, expand: expandDocumentPanel, shrink: shrinkDocumentPanel })), h("div", { class: "content" }, h("slot", { name: "document-panel" }))));
 //# sourceMappingURL=document-panel.js.map

package/dist/collection/components/viewer-grid/components/document-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-panel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/document-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAErE~~,OAAO,~~EAGL~~,~~sBAAsB~~,~~GACvB~~,MAAM,~~2BAA2B~~,CAAC;~~AAUnC~~,MAAM,CAAC,MAAM,aAAa,GAAsD,CAAC,EAC/E,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,sCAAsC,GACvC,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAC,oBAAoB,EAC1B,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;IACrB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;MACnC,sCAAsC,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;KACzE;EACH,CAAC;EAEA,CAAC,OAAO,IAAI,CACX,~~WAAK,KAAK,~~EAAC,~~gBAAgB;IACzB~~,~~YAAM~~,~~KAAK~~,EAAC,~~SAAS~~,~~eAAW~~,~~QAAQ~~,~~iBAAa~~,~~MAAM;;MAChC,sBAAsB,CAAC,~~SAAS,~~CAAC~~,~~CACrD;IACN~~,~~SAAS,KAAK,OAAO,IAAI,CACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,~~EAAE,mBAAmB~~;MAC/D~~,~~YAAM~~,~~KAAK~~,~~EAAC,SAAS,mCAAoC;MACzD,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACV;IACA,SAAS,KAAK,OAAO,IAAI,CACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,~~EAAE,mBAAmB~~;MAC/D~~,~~YAAM~~,~~KAAK,EAAC,SAAS,kCAAmC~~;~~MACxD,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC,CACV,CACG,CACP;~~EACD,WAAK,KAAK,EAAC,SAAS;IAClB,YAAM,IAAI,EAAC,gBAAgB,GAAG,CAC1B,CACF,CACP,CAAC","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport {~~\r\n~~ ViewerGridPanelSize~~,\r\n~~ ViewerGridChangeSizeAnimationEndEvent~~,\r\n viewerGridSizeLabelMap,\r\n~~} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n tabView: boolean;\r\n panelSize: ViewerGridPanelSize;\r\n shrinkDocumentPanel: () => void;\r\n expandDocumentPanel: () => void;\r\n dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n tabView,\r\n panelSize,\r\n shrinkDocumentPanel,\r\n expandDocumentPanel,\r\n dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class=\"dso-document-panel\"\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n }\r\n }}\r\n >\r\n {!tabView && (\r\n <~~div class=\"sizing-buttons~~\~~">\~~r\n ~~<span class~~=\"~~sr-only~~\" ~~aria-live=\"polite~~\~~" aria-atomic=\"true\">\~~r\n ~~Breedte documentpaneel: {viewerGridSizeLabelMap[panelSize]}\r\n~~ ~~</span>\r\n~~ {panelSize ~~!== \"small\" && (\r\n <button type=\"button\" class=\"shrink\" onClick={shrinkDocumentPanel~~}~~>\r~~\~~n <span class=\"sr-only\">Documentpaneel smaller maken</span>\~~r\n ~~<dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n~~ ~~)}\r\n {panelSize !== \"large\" && (\r\n <button type=\"button\" class=\"~~expand~~\" onClick~~={expandDocumentPanel}~~>\r~~\~~n <span class=\"sr-only\">Documentpaneel breder maken</span>\~~r\n ~~<dso-icon icon=\"chevron-left\"></dso-icon>\r\n </button>\r\n~~ )}\r\n ~~</div>\~~r\n )}\r\n <div class=\"content\">\r\n <slot name=\"document-panel\" />\r\n </div>\r\n </div>\r\n);\r\n"]}
1	+ {"version":3,"file":"document-panel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/document-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,CAAC,EAAE,MAAM,eAAe,CAAC;AAGrE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAUjD,MAAM,CAAC,MAAM,aAAa,GAAsD,CAAC,EAC/E,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,sCAAsC,GACvC,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAC,oBAAoB,EAC1B,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;IACrB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;MACnC,sCAAsC,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;KACzE;EACH,CAAC;EAEA,CAAC,OAAO,IAAI,CACX,EAAC,aAAa,IACZ,UAAU,EAAC,gBAAgB,EAC3B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,mBAAmB,EAC3B,MAAM,EAAE,mBAAmB,GAC3B,CACH;EACD,WAAK,KAAK,EAAC,SAAS;IAClB,YAAM,IAAI,EAAC,gBAAgB,GAAG,CAC1B,CACF,CACP,CAAC","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n tabView: boolean;\r\n panelSize: ViewerGridPanelSize;\r\n shrinkDocumentPanel: () => void;\r\n expandDocumentPanel: () => void;\r\n dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n tabView,\r\n panelSize,\r\n shrinkDocumentPanel,\r\n expandDocumentPanel,\r\n dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class=\"dso-document-panel\"\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n }\r\n }}\r\n >\r\n {!tabView && (\r\n <SizingButtons\r\n panelLabel=\"Documentpaneel\"\r\n size={panelSize}\r\n expand={expandDocumentPanel}\r\n shrink={shrinkDocumentPanel}\r\n />\r\n )}\r\n <div class=\"content\">\r\n <slot name=\"document-panel\" />\r\n </div>\r\n </div>\r\n);\r\n"]}

package/dist/collection/components/viewer-grid/components/main-panel.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import clsx from "clsx";
-import { viewerGridSizeLabelMap, } from "../viewer-grid.interfaces";
-export const MainPanel = ({ mode, tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, shrinkMain, expandMain, expandContent, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
+import { SizingButtons } from "./sizing-buttons";
+export const MainPanel = ({ mode, tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, shrinkMain, expandMain, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
     compact: !tabView && documentPanelOpen && !mainPanelExpanded,
     expanded: !tabView && documentPanelOpen && mainPanelExpanded,
     collapsed: mainPanelHidden,
@@ -10,5 +10,6 @@ export const MainPanel = ({ mode, tabView, mainSize, documentPanelOpen, mainPane
       dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
     }
   } }, !tabView &&
-  (!documentPanelOpen ? (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte ", mode === "vdk" ? "zoeken paneel" : "hoofdpaneel", ": ", viewerGridSizeLabelMap[mainSize]), mainSize !== "small" && (h("button", { type: "button", class: "shrink", onClick: shrinkMain }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " smaller maken"), h("dso-icon", { icon: "chevron-left" }))), mainSize !== "large" && (h("button", { type: "button", class: "expand", onClick: expandMain }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " breder maken"), h("dso-icon", { icon: "chevron-right" }))))) : (h("div", { class: "toggle-button" }, h("button", { type: "button", onClick: toggleMainPanel }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " ", mainPanelHidden ? "Tonen" : "Verbergen"), h("dso-icon", { icon: mainPanelHidden ? "chevron-right" : "chevron-left" }))))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }), !tabView && documentPanelOpen && (h("button", { class: "dso-tertiary expand-button", onClick: expandContent }, h("dso-icon", { icon: mainPanelExpanded ? "chevron-up" : "chevron-down" }), h("span", null, mainPanelExpanded ? "Verberg" : "Toon", " documenten op gekozen locatie"))), documentPanelOpen && mainPanelExpanded && h("slot", { name: "main-expanded" }))));
+  (((mode === "vrk" || (documentPanelOpen && !mainPanelExpanded)) && (h(SizingButtons, { panelLabel: mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", size: mainSize, expand: expandMain, shrink: shrinkMain }))) ||
+    (mode === "vdk" && documentPanelOpen && (h("div", { class: "toggle-button" }, h("button", { type: "button", onClick: toggleMainPanel }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " ", mainPanelHidden ? "Tonen" : "Verbergen"), h("dso-icon", { icon: mainPanelHidden ? "chevron-right" : "chevron-left" })))))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }))));
 //# sourceMappingURL=main-panel.js.map