npm - @dso-toolkit/core - Versions diffs - 54.3.0 → 56.0.0 - Mend

@dso-toolkit/core 54.3.0 → 56.0.0

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

Files changed (427) 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,~~MAAM,EACN,~~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;~~AAOhC~~,MAAM,OAAO,UAAU;;;2BAoBH,KAAK;;0BASN,KAAK;;~~EAStB~~,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;~~EAED;;KAEG;EAEH~~,~~KAAK,CAAC,iBAAiB~~;~~IACrB~~,~~OAAO,~~IAAI,~~CAAC,aAAa,CAAC;EAC5B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,cAAc;IAClB,OAAO,~~IAAI,CAAC,~~UAAU,CAAC;EACzB,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,~~eAAe,EAAE;MACxB,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACvC;~~EACH~~,~~CAAC;EAED,gBAAgB;IACd,~~IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAEO,gBAAgB;;IACtB,~~MAAM~~,~~kBAAkB,GAAG,~~IAAI,CAAC,~~IAAI~~,~~CAAC~~,~~aAAa~~,CAAC,~~6BAA6B~~,CAAC,~~CAAC;IAElF,~~IAAI,~~kBAAkB,EAAE;MACtB,MAAA,IAAI,~~CAAC,~~cAAc,0CAAE,OAAO,~~CAAC~~,kBAAkB,CAAC,CAAC~~;~~KAClD;EACH~~,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;EACpC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,mBACU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACzC,KAAK,EAAE,IAAI,CAAC;QACV,mBAAmB,EAAE,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,cAAc;QAChE,UAAU,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,IAAI;OAChD,CAAC;MAEF,~~YAAM~~,~~IAAI~~,~~EAAC,oBAAoB,GAAG,CAC7B,~~CACR,CAAC;EACJ,CAAC;EAEO,8BAA8B;IACpC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CACtC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;MACnB,IAAI,CAAC,KAAK,EAAE;QACV,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;OACnC;MAED,+EAA+E;MAC/E,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;MAE3D,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;QAC9B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;OAC1B;~~MAED~~,~~IAAI,~~CAAC,~~oBAAoB,~~EAAE,CAAC~~;IAC9B~~,CAAC,~~EAAE~~,~~GAAG,~~CAAC,~~CACR~~,CAAC;~~EACJ~~,CAAC;EAEO,oBAAoB;;IAC1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MACzB,OAAO,EAAE,IAAI,CAAC,IAAI;MAClB,MAAM,EAAE,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC;MAC/B,MAAM,EAAE,6BAA6B;MACrC,QAAQ,EAAE,GAAG;MACb,QAAQ,EAAE,KAAK;MACf,SAAS,EAAE,QAAQ;MACnB,KAAK,EAAE,GAAG,EAAE;QACV,IAAI,IAAI,CAAC,IAAI,EAAE;UACb,IAAI,~~IAAI,~~CAAC,IAAI,~~EAAE;YACb,IAAI,~~CAAC,~~IAAI,CAAC,~~KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;~~YAChC~~,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;~~YAC9B~~,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;~~WAC7B~~;~~SACF;~~MACH,CAAC;MACD,QAAQ,EAAE,GAAG,EAAE;QACb,IAAI,~~IAAI,~~CAAC,IAAI,~~EAAE;UACb,IAAI,~~CAAC,~~IAAI,CAAC,~~KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;~~UAE5B~~,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;~~YACd~~,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;~~YACtC~~,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;~~YACtC~~,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;~~WACjC~~;~~SACF;~~MACH,CAAC;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;MAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;IAED,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;KAC7B;IAED,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;~~IAC3C~~,~~IAAI,~~CAAC~~,sBAAsB,CAAC,IAAI,EAAE,CAAC~~;~~EACrC,CAAC;~~EAEO,iBAAiB;IACvB,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,GAAG,EAAE;QACxE,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;OAC9B;WAAM;QACL,IAAI,IAAI,CAAC,IAAI,EAAE;UACb,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,SAAS,CAAC;UACzC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;aAAM;UACL,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,QAAQ,CAAC;UACxC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;OACF;KACF;EACH,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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 ~~Method,\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\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 /\r\n @~~internal\r\n /\r\n @Event()\r\n _animationInstantiated!: EventEmitter<void>;\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 ~~@internal\r\n /\r\n @Method()\r\n async~~ ~~_getAnimeInstance():~~ ~~Promise<AnimeInstance~~ \| ~~undefined>~~ ~~{\r\n return~~ this.animeInstance;\r\n }\r\n\r\n /\r\n ~~@internal\~~r\n */\r\n @~~Method~~(~~)\r\n async~~ ~~_getBodyHeight()~~: ~~Promise<number~~ ~~\| undefined> {~~\r\n ~~return~~ ~~this.bodyHeight;\~~r\n }\r\n~~\r\n~~ ~~componentWillLoad~~(): void {\r\n if (this.enableAnimation) {\r\n this.prepareAnimationResizeObserver();\r\n }\r\n }\r\n~~\r\n componentDidLoad(): void {\r\n~~ this.activateObserver();\r\n }\r\n\r\n private activateObserver() {\r\n ~~const bodyContentElement =~~ this.~~host.querySelector(`[slot=\"expandable-content\"]`);\r\n\r\n if (bodyContentElement) {\r\n this.~~resizeObserver?.observe(~~bodyContentElement~~);\r\n ~~}\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 ~~name=\"expandable-content\"~~ />\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.~~host~~) {\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 },\r\n complete: () => {\r\n ~~if (~~this.host~~) {\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 },\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 ~~this._animationInstantiated.emit();\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 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 }, 150)\r\n );\r\n\r\n this.instantiateAnimation();\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"]}

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

@@ -57,6 +57,11 @@
 .login a:active {
   text-decoration: underline;
 }
+.profile a:focus,
+.logout a:focus,
+.login a:focus {
+  color: #fff;
+}
 .dso-header-session {
   display: flex;
@@ -100,16 +105,19 @@ dso-dropdown-menu .dso-dropdown-options {
     width: 100%;
   }
 }
-dso-dropdown-menu .dso-dropdown-options ul li a {
+dso-dropdown-menu .dso-dropdown-options ul li a,
+dso-dropdown-menu .dso-dropdown-options ul li button {
   color: #275937;
   font-size: 1.25rem;
   padding: 16px;
   white-space: pre-wrap;
 }
-dso-dropdown-menu .dso-dropdown-options ul li a:focus {
+dso-dropdown-menu .dso-dropdown-options ul li a:focus,
+dso-dropdown-menu .dso-dropdown-options ul li button:focus {
   color: #fff;
 }
-dso-dropdown-menu .dso-dropdown-options ul li a:hover {
+dso-dropdown-menu .dso-dropdown-options ul li a:hover,
+dso-dropdown-menu .dso-dropdown-options ul li button:hover {
   background-color: #fff;
   color: #275937;
   text-decoration: underline;

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

@@ -6,6 +6,9 @@ const minDesktopViewportWidth = 992;
 export class Header {
   constructor() {
     this.onWindowResize = debounce(() => {
+      var _a, _b;
+      (_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.removeAttribute("open");
+      (_b = this.dropdownElement) === null || _b === void 0 ? void 0 : _b.removeAttribute("tabindex");
       this.setDropDownMenu();
       this.setOverflowMenu();
       if (this.showDropDown) {

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 hasSubLogo = false;\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 componentWillLoad() {\r\n this.hasSubLogo = this.host.querySelector(\"[slot = 'sub-logo']\") !== null;\r\n }\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.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 [\"has-sub-logo\"]: this.hasSubLogo,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <div class=\"logo\">\r\n <slot name=\"logo\" />\r\n </div>\r\n <div class=\"sub-logo\">\r\n <slot name=\"sub-logo\" />\r\n </div>\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 dropdown-align=\"left\">\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, 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 hasSubLogo = false;\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 componentWillLoad() {\r\n this.hasSubLogo = this.host.querySelector(\"[slot = 'sub-logo']\") !== null;\r\n }\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 [\"has-sub-logo\"]: this.hasSubLogo,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <div class=\"logo\">\r\n <slot name=\"logo\" />\r\n </div>\r\n <div class=\"sub-logo\">\r\n <slot name=\"sub-logo\" />\r\n </div>\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 dropdown-align=\"left\">\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/list-button/list-button.css CHANGED Viewed

@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
+:host {
+  display: block;
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -186,16 +190,7 @@
   background-color: #fff;
   border-color: #39870c;
   color: #191919;
-}
-@media screen and (max-width: 767px) {
-  .dso-btn-group > *.dso-selected + .dso-input-number {
-    box-shadow: inset 0 -1px 0 0 #39870c, inset 0 0 0 0 #39870c, inset -1px 0 0 0 #39870c, inset 1px 0 0 0 #39870c;
-  }
-}
-@media screen and (min-width: 768px) {
-  .dso-btn-group > *.dso-selected + .dso-input-number {
-    box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
-  }
+  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
 }
 .dso-btn-group > *:active + .dso-input-number, .dso-btn-group > *:active + .dso-input-number:hover,
 .dso-btn-group > *.active + .dso-input-number,
@@ -215,24 +210,6 @@
 .dso-btn-group .dso-list-button {
   padding-right: 15px;
 }
-@media screen and (max-width: 767px) {
-  .dso-btn-group {
-    flex-direction: column;
-  }
-  .dso-btn-group > *:first-child {
-    border-radius: 4px 4px 0 0;
-  }
-  .dso-btn-group > *:not(:first-child) {
-    border-left-style: solid !important;
-    border-top-style: none !important;
-  }
-  .dso-btn-group > *:last-child {
-    border-radius: 0 0 4px 4px;
-  }
-  .dso-btn-group > *:only-child {
-    border-radius: 4px;
-  }
-}
 .dso-selectable {
   position: relative;
@@ -427,9 +404,11 @@
   border-width: 1px;
   box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;
 }
-.dso-list-button.dso-selected.dso-single-count {
-  border-right: 0;
-  box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;
+@media screen and (min-width: 768px) {
+  .dso-list-button.dso-selected.dso-single-count {
+    border-right: 0;
+    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;
+  }
 }
 .dso-list-button > span {
   display: block;

package/dist/collection/components/map-controls/map-controls.css CHANGED Viewed

@@ -24,6 +24,9 @@
 :host([open]) .toggle-visibility-button {
   display: none;
 }
+:host([open]) .zoom-buttons {
+  top: 16px;
+}
 button {
   -webkit-appearance: button;
@@ -430,4 +433,23 @@ header h2 {
   font-family: "Asap", sans-serif;
   line-height: 1;
   margin: 0;
+}
+@media screen and (max-width: 767px) {
+  .toggle-visibility-button {
+    height: 40px;
+    margin-right: 0;
+    min-width: auto;
+    right: calc(100% + 16px);
+    width: 40px;
+  }
+  .toggle-visibility-button dso-icon {
+    margin-right: 0;
+  }
+  .toggle-visibility-button span {
+    visibility: hidden;
+  }
+  .zoom-buttons {
+    top: 72px;
+  }
 }

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

@@ -54,13 +54,13 @@ button::-moz-focus-inner {
 }
 .dso-modal .dso-dialog {
   animation: 1s ease-out 0s 1 slideInFromTop;
-  margin-top: 15vh;
+  background-color: #fff;
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
   margin-left: auto;
   margin-right: auto;
+  margin-top: clamp(40px, 15vh, 15vh);
   max-width: 640px;
   opacity: 1;
-  background-color: #fff;
-  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
 }
 .dso-modal .dso-header {
   border-bottom: 1px solid #ccc;
@@ -83,41 +83,74 @@ button::-moz-focus-inner {
   top: 16px;
   width: 32px;
 }
-.dso-modal .dso-body {
+.dso-modal > .dso-dialog > .dso-body {
   height: calc(100% - 96px - 1.5rem);
   max-height: calc(70vh - 144px - 1.5em);
   min-height: 1.5rem;
   overflow-x: auto;
   padding: 32px;
 }
-.dso-modal .dso-body p {
+.dso-modal > .dso-dialog > .dso-body p {
+  margin: 0 0 16px;
+}
+.dso-modal > .dso-dialog > .dso-body ul,
+.dso-modal > .dso-dialog > .dso-body ol {
+  margin-bottom: 16px;
+}
+.dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+.dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+  padding-inline-start: 24px;
+}
+.dso-modal > .dso-dialog > .dso-body pre {
+  margin: 0 0 16px;
+}
+.dso-modal > .dso-dialog > .dso-body blockquote {
+  padding: 16px 24px;
+}
+.dso-modal > .dso-dialog > .dso-body dso-highlight-box,
+.dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
+  margin-bottom: 24px;
+}
+.dso-modal > .dso-dialog > .dso-body img {
+  height: auto;
+  max-width: 100%;
+}
+.dso-modal > .dso-dialog > dso-scrollable {
+  height: calc(100% - 96px - 1.5rem);
+  max-height: calc(70vh - 144px - 1.5em);
+  min-height: 6.5rem;
+}
+.dso-modal > .dso-dialog > dso-scrollable .dso-body {
+  padding: 32px;
+}
+.dso-modal > .dso-dialog > dso-scrollable .dso-body p {
   margin: 0 0 16px;
 }
-.dso-modal .dso-body ul,
-.dso-modal .dso-body ol {
+.dso-modal > .dso-dialog > dso-scrollable .dso-body ul,
+.dso-modal > .dso-dialog > dso-scrollable .dso-body ol {
   margin-bottom: 16px;
 }
-.dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-.dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+.dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+.dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
   padding-inline-start: 24px;
 }
-.dso-modal .dso-body pre {
+.dso-modal > .dso-dialog > dso-scrollable .dso-body pre {
   margin: 0 0 16px;
 }
-.dso-modal .dso-body blockquote {
+.dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
   padding: 16px 24px;
 }
-.dso-modal .dso-body dso-highlight-box,
-.dso-modal .dso-body .dso-highlight-box {
+.dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
+.dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
   margin-bottom: 24px;
 }
-.dso-modal .dso-body img {
+.dso-modal > .dso-dialog > dso-scrollable .dso-body img {
   height: auto;
   max-width: 100%;
 }
 .dso-modal .dso-footer {
   min-height: 80px;
-  padding: 0 32px 32px;
+  padding: 16px 32px;
   text-align: right;
 }
 @media screen and (max-width: 767px) {
@@ -166,6 +199,27 @@ button::-moz-focus-inner {
     float: none;
   }
 }
+@media screen and (max-height: 380px) {
+  .dso-modal .dso-dialog {
+    margin-bottom: 8px;
+    margin-top: 8px;
+    min-height: 216px;
+  }
+  .dso-modal .dso-header {
+    padding: 8px 16px;
+  }
+  .dso-modal .dso-header .dso-close {
+    top: 8px;
+  }
+  .dso-modal .dso-body {
+    padding: 16px 24px;
+  }
+  .dso-modal .dso-footer {
+    min-height: auto;
+    overflow: auto;
+    padding: 8px 32px;
+  }
+}
 .dso-modal-overlay {
   background-color: rgba(255, 255, 255, 0.8);

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

@@ -23,7 +23,7 @@ export class Modal {
   }
   render() {
     var _a;
-    return (h(Fragment, null, h("div", { class: "dso-modal-overlay" }), h("div", { class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
+    return (h(Fragment, null, h("div", { class: "dso-modal-overlay" }), h("div", { class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", null, h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" }))), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
   }
   setFocusTrap() {
     if (this.dialogElement && !this.trap) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,eAAe,EAAsC,MAAM,YAAY,CAAC;AACjF,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAS1B,MAAM,OAAO,KAAK;;kBAWP,EAAE,EAAE;;;gBAeS,QAAQ;2BAMZ,IAAI;;;;EAoBtB,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;EAC1E,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,uEAAuE;EACnI,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,EAAC,QAAQ;MACP,WAAK,KAAK,EAAC,mBAAmB,GAAO;MACrC,WACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAE/C,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;UACrF,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAC,YAAY;YACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM;YAC1C,IAAI,CAAC,eAAe,IAAI,CACvB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;cAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY;cAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,CACP,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR;UAED,WAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC;~~YAC~~/B,YAAM,IAAI,EAAC,MAAM,~~GAAQ~~,~~CACrB~~;~~UAEL~~,IAAI,CAAC,SAAS,IAAI,CACjB,WAAK,KAAK,EAAC,YAAY;YACrB,YAAM,IAAI,EAAC,QAAQ,~~GAAQ~~,~~CACvB~~,CACP,CACG,CACF,CACG,CACZ,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACpC,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE;QAC9C,YAAY,EAAE,GAAG,EAAE;;UACjB,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAc,IAAI,CAAC,YAAY,CAAC,CAAC;YACpF,IAAI,CAAC,mBAAmB,EAAE;cACxB,OAAO,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,YAAY,sBAAsB,CAAC,CAAC;aACnE;iBAAM;cACL,OAAO,mBAAmB,CAAC;aAC5B;WACF;UAED,OAAO,CACL,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAoB,iCAAiC,CAAC,mCAC7E,MAAA,IAAI,CAAC,YAAY,0CAAE,aAAa,CAAoB,YAAY,CAAC,mCACjE,KAAK,CACN,CAAC;QACJ,CAAC;QACD,iBAAiB,EAAE,IAAI;QACvB,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,eAAC,OAAA,MAAA,MAAA,IAAI,CAAC,WAAW,qDAAG,CAAC,CAAC,mCAAI,CAAC,CAAA,EAAA;QACjD,iBAAiB,EAAE,IAAI;QACvB,eAAe,EAAE;UACf,aAAa,EAAE,IAAI;SACpB;QACD,uBAAuB,EAAE,CAAC,CAAC,EAAE,EAAE;UAC7B,IAAI,CAAC,YAAY,UAAU,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;YACxE,OAAO,IAAI,CAAC;WACb;UAED,OAAO,KAAK,CAAC;QACf,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;UACjB,OAAO,IAAI,CAAC,IAAI,CAAC;UAEjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;QACnD,CAAC;OACF,CAAC,CAAC,QAAQ,EAAE,CAAC;KACf;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State } from \"@stencil/core\";\r\nimport { createFocusTrap, FocusTargetValueOrFalse, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { DsoModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n private dialogElement?: HTMLDivElement;\r\n\r\n private modalElement?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n @State()\r\n hasFooter?: boolean;\r\n\r\n /*\r\n The title of the Modal.\r\n /\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /\r\n the role for the modal `dialog` \| `alert` \| `alertdialog`.\r\n /\r\n @Prop()\r\n role: string \| null = \"dialog\";\r\n\r\n /\r\n when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n /\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n /\r\n Selector used to query the element which will be focused when the component instantiated. When undefined the modal focuses the first button.dso-primary in the modal footer. If no button can be found the close button is focused.\r\n /\r\n @Prop()\r\n initialFocus?: string;\r\n\r\n /\r\n Function that returns the element to focus on Modal close. Return `false` for no focus restore.\r\n /\r\n @Prop()\r\n returnFocus?: (nodeFocusedBeforeActivation: HTMLElement \| SVGElement) => FocusTargetValueOrFalse;\r\n\r\n /\r\n Emitted when the user wants to close the Modal.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<DsoModalCloseEvent>;\r\n\r\n componentWillLoad(): void {\r\n this.hasFooter = this.host.querySelector(\"[slot = 'footer']\") !== null;\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.setFocusTrap();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <div class=\"dso-modal-overlay\"></div>\r\n <div\r\n class=\"dso-modal\"\r\n role={this.role ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.modalElement = element)}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\" ref={(element) => (this.dialogElement = element)}>\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n Dialoog\r\n </span>\r\n )}\r\n\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\"~~></slot~~>\r\n </~~div~~>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\"~~></slot>\~~r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n\r\n private setFocusTrap() {\r\n if (this.dialogElement && !this.trap) {\r\n this.trap = createFocusTrap(this.dialogElement, {\r\n initialFocus: () => {\r\n if (this.initialFocus) {\r\n const initialFocusElement = this.host.querySelector<HTMLElement>(this.initialFocus);\r\n if (!initialFocusElement) {\r\n console.warn(`element '${this.initialFocus}' could not be found`);\r\n } else {\r\n return initialFocusElement;\r\n }\r\n }\r\n\r\n return (\r\n this.host.querySelector<HTMLButtonElement>(\"div[slot='footer'] .dso-primary\") ??\r\n this.modalElement?.querySelector<HTMLButtonElement>(\".dso-close\") ??\r\n false\r\n );\r\n },\r\n allowOutsideClick: true,\r\n setReturnFocus: (e) => this.returnFocus?.(e) ?? e,\r\n escapeDeactivates: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.modalElement) {\r\n return true;\r\n }\r\n\r\n return false;\r\n },\r\n onDeactivate: () => {\r\n delete this.trap;\r\n\r\n this.dsoClose.emit({ originalEvent: undefined });\r\n },\r\n }).activate();\r\n }\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State } from \"@stencil/core\";\r\nimport { createFocusTrap, FocusTargetValueOrFalse, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { DsoModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n private dialogElement?: HTMLDivElement;\r\n\r\n private modalElement?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n @State()\r\n hasFooter?: boolean;\r\n\r\n /*\r\n The title of the Modal.\r\n /\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /\r\n the role for the modal `dialog` \| `alert` \| `alertdialog`.\r\n /\r\n @Prop()\r\n role: string \| null = \"dialog\";\r\n\r\n /\r\n when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n /\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n /\r\n Selector used to query the element which will be focused when the component instantiated. When undefined the modal focuses the first button.dso-primary in the modal footer. If no button can be found the close button is focused.\r\n /\r\n @Prop()\r\n initialFocus?: string;\r\n\r\n /\r\n Function that returns the element to focus on Modal close. Return `false` for no focus restore.\r\n /\r\n @Prop()\r\n returnFocus?: (nodeFocusedBeforeActivation: HTMLElement \| SVGElement) => FocusTargetValueOrFalse;\r\n\r\n /\r\n Emitted when the user wants to close the Modal.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<DsoModalCloseEvent>;\r\n\r\n componentWillLoad(): void {\r\n this.hasFooter = this.host.querySelector(\"[slot = 'footer']\") !== null;\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.setFocusTrap();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <div class=\"dso-modal-overlay\"></div>\r\n <div\r\n class=\"dso-modal\"\r\n role={this.role ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.modalElement = element)}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\" ref={(element) => (this.dialogElement = element)}>\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n Dialoog\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n\r\n private setFocusTrap() {\r\n if (this.dialogElement && !this.trap) {\r\n this.trap = createFocusTrap(this.dialogElement, {\r\n initialFocus: () => {\r\n if (this.initialFocus) {\r\n const initialFocusElement = this.host.querySelector<HTMLElement>(this.initialFocus);\r\n if (!initialFocusElement) {\r\n console.warn(`element '${this.initialFocus}' could not be found`);\r\n } else {\r\n return initialFocusElement;\r\n }\r\n }\r\n\r\n return (\r\n this.host.querySelector<HTMLButtonElement>(\"div[slot='footer'] .dso-primary\") ??\r\n this.modalElement?.querySelector<HTMLButtonElement>(\".dso-close\") ??\r\n false\r\n );\r\n },\r\n allowOutsideClick: true,\r\n setReturnFocus: (e) => this.returnFocus?.(e) ?? e,\r\n escapeDeactivates: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.modalElement) {\r\n return true;\r\n }\r\n\r\n return false;\r\n },\r\n onDeactivate: () => {\r\n delete this.trap;\r\n\r\n this.dsoClose.emit({ originalEvent: undefined });\r\n },\r\n }).activate();\r\n }\r\n }\r\n}\r\n"]}

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

@@ -85,8 +85,16 @@ export class Mapper {
     });
   }
   transform(xml, context) {
+    if (!xml) {
+      return h(Fragment, null);
+    }
     if (!this.cache || this.cache.xml !== xml) {
-      this.cache = { xml, document: this.domParser.parseFromString(xml, "text/xml") };
+      const document = this.domParser.parseFromString(xml, "text/xml");
+      if (document.querySelector("html > body > parsererror")) {
+        console.error(document);
+        return h(Fragment, null);
+      }
+      this.cache = { xml, document };
     }
     const xmlDocument = this.cache.document;
     return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);

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;IAGU,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;~~EAwDtC~~,CAAC;~~EAtDS~~,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,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,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;MACzC,IAAI,CAAC,~~KAAK~~,~~GAAG~~,~~EAAE~~,GAAG,EAAE,QAAQ,EAAE,~~IAAI~~,CAAC,~~SAAS~~,CAAC,~~eAAe~~,CAAC,GAAG,EAAE,~~UAAU~~,~~CAAC~~,EAAE,CAAC;~~KACjF~~;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAExC,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;EACnE,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 cache: { xml: string; document: Document } \| undefined;\r\n\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 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 (!this.cache \|\| this.cache.xml !== xml) {\r\n ~~this.cache~~ = ~~{ xml, document:~~ this.domParser.parseFromString(xml, \"text/xml\") };\r\n }\r\n\r\n const xmlDocument = this.cache.document;\r\n\r\n return this.mapNodeToJsx(xmlDocument.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\n\r\nexport class Mapper {\r\n private cache: { xml: string; document: Document } \| undefined;\r\n\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 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 if (!this.cache \|\| this.cache.xml !== xml) {\r\n const document = this.domParser.parseFromString(xml, \"text/xml\");\r\n if (document.querySelector(\"html > body > parsererror\")) {\r\n console.error(document);\r\n\r\n return <Fragment />;\r\n }\r\n\r\n this.cache = { xml, document };\r\n }\r\n\r\n const xmlDocument = this.cache.document;\r\n\r\n return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);\r\n }\r\n}\r\n"]}

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

@@ -5,6 +5,11 @@ ins {
   text-decoration: none;
 }
+del {
+  background-color: #f5d8dc;
+  color: #000;
+}
 :host(:not([inline])) {
   display: block;
 }
@@ -38,6 +43,7 @@ ins {
   color: #191919;
 }
+.sr-only,
 .deleted-start,
 .deleted-end {
   position: absolute;
@@ -144,10 +150,26 @@ span[role=paragraph] {
   display: block;
 }
-.fallback {
+:host(:not([inline])) .fallback {
   display: block;
 }
+a {
+  background-color: transparent;
+  color: #39870c;
+  text-decoration: underline;
+}
+a:hover, a:focus {
+  color: #676cb0;
+  text-decoration: underline;
+}
+a:active {
+  text-decoration: none;
+}
+a:visited {
+  color: #8b4a6a;
+}
 .od-Term {
   font-weight: 700;
 }
@@ -244,4 +266,30 @@ span[role=paragraph] {
 }
 .dso-ins a {
   color: #000;
+}
+.dso-rich-content p {
+  margin: 0 0 16px;
+}
+.dso-rich-content ul,
+.dso-rich-content ol {
+  margin-bottom: 16px;
+}
+.dso-rich-content ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+.dso-rich-content ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+  padding-inline-start: 24px;
+}
+.dso-rich-content pre {
+  margin: 0 0 16px;
+}
+.dso-rich-content blockquote {
+  padding: 16px 24px;
+}
+.dso-rich-content dso-highlight-box,
+.dso-rich-content .dso-highlight-box {
+  margin-bottom: 24px;
+}
+.dso-rich-content img {
+  height: auto;
+  max-width: 100%;
 }