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/esm/dso-map-controls.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-map-controls.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~8ziBAA8ziB~~;;;;;;;;;;;;;;;;;;;~~ACGr1iB~~;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;IACd,eAAU,GAAG,YAAY,CAAC;IAyElC,kDAAmD;IACnD,mDAAoD;gBApE7C,KAAK;;uBAkCE,CAAC,IAAI,CAAC,IAAI;;EAGxB,SAAS,CAAC,IAAa;IACrB,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;KACzE;SAAM;MACL,UAAU,CAAC;;QACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;OACpC,EAAE,kBAAkB,CAAC,CAAC;KACxB;GACF;;;;;;;EASD,MAAM,gBAAgB,CAAC,CAA6B;IAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,aAAa,EAAE,CAAC;MAChB,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC,CAAC;GACJ;EAKD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,gBAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,6BAAuB,CAChB,EACT,WAAK,KAAK,EAAC,cAAc,IACvB,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,0BAAoB,EACpB,gBAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,2BAAqB,EACrB,gBAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,eAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,kBACE,cAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,mCAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,gBAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,0BACE,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACS,CACT,CACL,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","./src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n bottom: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n width: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n position: absolute;\r\n right: calc(100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size});\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n top: core-map-controls-variables.$controls-margin;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n @include button.map-focus();\r\n\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n flex: 0 0 100%;\r\n height: core-map-controls-variables.$zoom-button-size;\r\n min-width: auto;\r\n width: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-bottom-left-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n padding: 0;\r\n position: absolute;\r\n right: core-map-controls-variables.$controls-margin;\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n private panelTitle = \"Kaartlagen\";\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>Kaartlagen</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom in</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom uit</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.panelTitle}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>Verberg paneel {this.panelTitle}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-map-controls.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,4tjBAA4tjB;;;;;;;;;;;;;;;;;;;ACGnvjB;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;IACd,eAAU,GAAG,YAAY,CAAC;IAyElC,kDAAmD;IACnD,mDAAoD;gBApE7C,KAAK;;uBAkCE,CAAC,IAAI,CAAC,IAAI;;EAGxB,SAAS,CAAC,IAAa;IACrB,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;KACzE;SAAM;MACL,UAAU,CAAC;;QACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;OACpC,EAAE,kBAAkB,CAAC,CAAC;KACxB;GACF;;;;;;;EASD,MAAM,gBAAgB,CAAC,CAA6B;IAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,aAAa,EAAE,CAAC;MAChB,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC,CAAC;GACJ;EAKD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,gBAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,6BAAuB,CAChB,EACT,WAAK,KAAK,EAAC,cAAc,IACvB,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,0BAAoB,EACpB,gBAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,2BAAqB,EACrB,gBAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,eAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,kBACE,cAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,mCAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,gBAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,0BACE,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACS,CACT,CACL,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","./src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n bottom: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n width: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n top: units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n position: absolute;\r\n right: calc(100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size});\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n top: core-map-controls-variables.$controls-margin;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n @include button.map-focus();\r\n\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n flex: 0 0 100%;\r\n height: core-map-controls-variables.$zoom-button-size;\r\n min-width: auto;\r\n width: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-bottom-left-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n padding: 0;\r\n position: absolute;\r\n right: core-map-controls-variables.$controls-margin;\r\n top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .toggle-visibility-button {\r\n height: units.$u5;\r\n margin-right: 0;\r\n min-width: auto;\r\n right: calc(100% + core-map-controls-variables.$controls-margin);\r\n width: units.$u5;\r\n\r\n dso-icon {\r\n margin-right: 0;\r\n }\r\n\r\n span {\r\n visibility: hidden;\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n top: units.$u9;\r\n }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n private panelTitle = \"Kaartlagen\";\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>Kaartlagen</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom in</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom uit</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.panelTitle}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>Verberg paneel {this.panelTitle}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-8de88e7c.js';
+import { r as registerInstance, c as createEvent, h } from './index-367cff36.js';
 import { v as v4 } from './v4-d398bde5.js';
 const mapOverlaysCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-8de88e7c.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-367cff36.js';
 import { c as createFocusTrap } from './focus-trap.esm-2a49a38f.js';
 import { v as v4 } from './v4-d398bde5.js';
 import './index.esm-3d6c8190.js';
-const modalCss = "@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;margin-top:15vh;margin-left:auto;margin-right:auto;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;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal .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{margin:0 0 16px}.dso-modal .dso-body ul,.dso-modal .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){padding-inline-start:24px}.dso-modal .dso-body pre{margin:0 0 16px}.dso-modal .dso-body blockquote{padding:16px 24px}.dso-modal .dso-body dso-highlight-box,.dso-modal .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:0 32px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}.dso-modal-overlay{background-color:rgba(255, 255, 255, 0.8);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";
+const modalCss = "@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;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}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.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-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-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.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-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.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-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:16px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{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);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";
 const Modal = class {
   constructor(hostRef) {
@@ -29,7 +29,7 @@ const Modal = class {
   }
   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/esm/dso-modal.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-modal.entry.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,~~k9JAAk9J~~;;~~MCWt9J~~,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;GACzE;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,EAAE,YAAY,EAAE,MAAM,SAAS,EAAE,CAAC,CAAC;GAC1D;EAED,MAAM;;IACJ,QACE,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,mBAAmB,GAAO,EACrC,WACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAE/C,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,IACrF,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,WAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,YAAM,IAAI,EAAC,MAAM,~~GAAQ~~,~~CACrB~~,~~EAEL~~,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,QAAQ,~~GAAQ~~,~~CACvB~~,CACP,CACG,CACF,CACG,EACX;GACH;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;;UACZ,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,QACE,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAoB,iCAAiC,CAAC,mCAC7E,MAAA,IAAI,CAAC,YAAY,0CAAE,aAAa,CAAoB,YAAY,CAAC,mCACjE,KAAK,EACL;SACH;QACD,iBAAiB,EAAE,IAAI;QACvB,cAAc,EAAE,CAAC,CAAC,mBAAK,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;UACzB,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;SACd;QACD,YAAY,EAAE;UACZ,OAAO,IAAI,CAAC,IAAI,CAAC;UAEjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;SAClD;OACF,CAAC,CAAC,QAAQ,EAAE,CAAC;KACf;GACF;;;;;;;","names":[],"sources":["./src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-modal-overlay {\r\n @include modal.overlay();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","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"],"version":3}
1	+ {"file":"dso-modal.entry.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,83MAA83M;;MCWl4M,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;GACzE;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,EAAE,YAAY,EAAE,MAAM,SAAS,EAAE,CAAC,CAAC;GAC1D;EAED,MAAM;;IACJ,QACE,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,mBAAmB,GAAO,EACrC,WACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAE/C,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,IACrF,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,0BACE,WAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACF,CACG,EACX;GACH;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;;UACZ,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,QACE,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAoB,iCAAiC,CAAC,mCAC7E,MAAA,IAAI,CAAC,YAAY,0CAAE,aAAa,CAAoB,YAAY,CAAC,mCACjE,KAAK,EACL;SACH;QACD,iBAAiB,EAAE,IAAI;QACvB,cAAc,EAAE,CAAC,CAAC,mBAAK,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;UACzB,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;SACd;QACD,YAAY,EAAE;UACZ,OAAO,IAAI,CAAC,IAAI,CAAC;UAEjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;SAClD;OACF,CAAC,CAAC,QAAQ,EAAE,CAAC;KACf;GACF;;;;;;;","names":[],"sources":["./src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-modal-overlay {\r\n @include modal.overlay();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","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"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-8de88e7c.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-367cff36.js';
 import { i as isModifiedEvent } from './is-modified-event-34370220.js';
 const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8de88e7c.js';
+import { r as registerInstance, h } from './index-367cff36.js';
 const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-bottom:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;height:16px}.progress .progress-bar>span{background-color:#39870c;float:left;height:100%;width:0%}.progress .progress-bar+span{font-size:14px;margin-top:8px}";

package/dist/esm/dso-progress-indicator.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-8de88e7c.js';
+import { r as registerInstance, h, H as Host } from './index-367cff36.js';
 const progressIndicatorCss = "*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-left:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner{height:24px;width:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding:12px 16px}:host([size=medium]) .dso-progress-indicator-spinner{height:32px;width:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner{height:48px;width:48px}:host([size=large]):host([block]){padding:24px 16px}";

package/dist/esm/dso-responsive-element.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8de88e7c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-367cff36.js';
 const responsiveElementCss = ":host{display:block}";

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8de88e7c.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-367cff36.js';
 import { c as clsx } from './clsx.m-25174a58.js';
 import { d as debounce_1 } from './index-f2bf58ce.js';
-const scrollableCss = ":host{display:block;height:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{height:100%;position:relative}.dso-shadow-container .dso-scroll-container{height:100%;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;height:24px;left:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;width:100%}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));top:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));bottom:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
+const scrollableCss = ":host{display:block;height:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{height:100%;max-height:inherit;min-height:inherit;position:relative}.dso-shadow-container .dso-scroll-container{height:100%;max-height:inherit;min-height:inherit;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;height:24px;left:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;width:100%;pointer-events:none}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));top:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));bottom:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
 const resizeObserver = new ResizeObserver(debounce_1((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
 function getScrollableComponentFromResizeObserverEntry({ target, }) {
@@ -73,20 +73,20 @@ const Scrollable = class {
       childList: false,
       subtree: true,
     });
-    if (this.scrollContainerDiv instanceof HTMLDivElement) {
-      resizeObserver.observe(this.scrollContainerDiv);
+    if (this.shadowContainerDiv instanceof HTMLDivElement) {
+      resizeObserver.observe(this.shadowContainerDiv);
     }
     this.slottedElements.forEach((element) => resizeObserver.observe(element));
   }
   disconnectedCallback() {
-    if (this.scrollContainerDiv instanceof HTMLDivElement) {
-      resizeObserver.unobserve(this.scrollContainerDiv);
+    if (this.shadowContainerDiv instanceof HTMLDivElement) {
+      resizeObserver.unobserve(this.shadowContainerDiv);
     }
     this.mutationObserver.disconnect();
     this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
   }
   render() {
-    return (h("div", { class: "dso-shadow-container" }, h("div", { ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+    return (h("div", { ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
         [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
       }), onScroll: () => this._setScrollState() }, h("slot", null))));
   }

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

	@@ -1 +1 @@
1	- {"file":"dso-scrollable.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,~~mmCAAmmC~~;;~~ACMznC~~,MAAM,cAAc,GAAG,IAAI,cAAc,CACvCA,UAAQ,CACN,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,eAAK,OAAA,MAAA,6CAA6C,CAAC,KAAK,CAAC,0CAAE,eAAe,EAAE,CAAA,EAAA,CAAC,EAChH,EAAE,CACH,CACF,CAAC;AAEF,SAAS,6CAA6C,CAAC,EACrD,MAAM,GACc;EACpB,IAAI,MAAM,CAAC,UAAU,YAAY,UAAU,IAAI,wBAAwB,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;IAC/F,OAAO,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;GAC/B;EAED,IAAI,MAAM,CAAC,aAAa,IAAI,wBAAwB,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;IAC1E,OAAO,MAAM,CAAC,aAAa,CAAC;GAC7B;EAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,wBAAwB,CAAC,OAAgB;EAChD,OAAO,OAAO,CAAC,OAAO,KAAK,gBAAgB,CAAC;AAC9C,CAAC;MAOY,UAAU;;;;;IAEb,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,KACtD,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE;;MACzB,MAAM,OAAO,GAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;MAChE,IAAI,OAAO,KAAK,IAAI,CAAC,IAAI,EAAE;QACzB,OAAO;OACR;MAED,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB,CAAC,CACH,CAAC;~~0BAc~~+B,UAAU;;;;;EAM3C,MAAM,eAAe;IACnB,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAChD,IAAI,IAAI,CAAC,cAAc,KAAK,cAAc,EAAE;MAC1C,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;MAErC,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,IAAI,IAAI,CAAC,cAAc,KAAK,QAAQ,EAAE;QACrE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;OAC5D;KACF;GACF;EAED,IAAY,eAAe;IACzB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAEO,iBAAiB;IACvB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC5B,OAAO,UAAU,CAAC;KACnB;IAED,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;IAE1E,IAAI,YAAY,IAAI,YAAY,EAAE;MAChC,OAAO,UAAU,CAAC;KACnB;IAED,IAAI,SAAS,KAAK,CAAC,EAAE;MACnB,OAAO,KAAK,CAAC;KACd;IAED,IAAI,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,CAAC,EAAE;MAC/C,OAAO,QAAQ,CAAC;KACjB;IAED,IAAI,SAAS,GAAG,CAAC,EAAE;MACjB,OAAO,QAAQ,CAAC;KACjB;IAED,OAAO,UAAU,CAAC;GACnB;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;MACvC,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,KAAK;MACjB,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,kBAAkB,YAAY,cAAc,EAAE;MACrD,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACjD;IAED,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;GAC5E;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,kBAAkB,YAAY,cAAc,EAAE;MACrD,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACnD;IAED,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IAEnC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;GAC9E;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,sBAAsB,~~IAC/B~~,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAC3C,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE;QAClC,CAAC,cAAc,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,cAAc,KAAK,UAAU;OAC1E,CAAC,EACF,QAAQ,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAEtC,eAAa,CACT,CACF,EACN;GACH;;;;;;;","names":["debounce"],"sources":["./src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","./src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n height: 100%;\r\n overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n height: 100%;\r\n position: relative;\r\n\r\n .dso-scroll-container {\r\n height: 100%;\r\n overflow-y: auto;\r\n\r\n &::before,\r\n &::after {\r\n background-repeat: no-repeat;\r\n background-size: 100% units.$u3;\r\n content: \"\";\r\n display: block;\r\n height: units.$u3;\r\n left: 0;\r\n opacity: 0;\r\n overflow: visible;\r\n position: absolute;\r\n transition: opacity 150ms ease-in-out;\r\n width: 100%;\r\n }\r\n\r\n &::before {\r\n background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n top: 0;\r\n }\r\n\r\n &::after {\r\n background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n bottom: 0;\r\n }\r\n\r\n &.dso-scroll-bottom {\r\n &::before {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-top {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-middle {\r\n &::before,\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries) => entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50\r\n )\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n })\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.~~scrollContainerDiv~~ instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.~~scrollContainerDiv~~);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.~~scrollContainerDiv~~ instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.~~scrollContainerDiv~~);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-scrollable.entry.js","mappings":"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","names":["debounce"],"sources":["./src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","./src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n height: 100%;\r\n overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n height: 100%;\r\n max-height: inherit;\r\n min-height: inherit;\r\n position: relative;\r\n\r\n .dso-scroll-container {\r\n height: 100%;\r\n max-height: inherit;\r\n min-height: inherit;\r\n overflow-y: auto;\r\n\r\n &::before,\r\n &::after {\r\n background-repeat: no-repeat;\r\n background-size: 100% units.$u3;\r\n content: \"\";\r\n display: block;\r\n height: units.$u3;\r\n left: 0;\r\n opacity: 0;\r\n overflow: visible;\r\n position: absolute;\r\n transition: opacity 150ms ease-in-out;\r\n width: 100%;\r\n pointer-events: none;\r\n }\r\n\r\n &::before {\r\n background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n top: 0;\r\n }\r\n\r\n &::after {\r\n background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n bottom: 0;\r\n }\r\n\r\n &.dso-scroll-bottom {\r\n &::before {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-top {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-middle {\r\n &::before,\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries) => entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50\r\n )\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n })\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8de88e7c.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-367cff36.js';
 import { d as debounce_1 } from './index-f2bf58ce.js';
 import { c as createFocusTrap } from './focus-trap.esm-2a49a38f.js';
 import { v as v4 } from './v4-d398bde5.js';
 import './index.esm-3d6c8190.js';
-const tableCss = "@keyframes slideInFromTop {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  margin-bottom: 24px;\n}\n\n.dso-header {\n  min-height: 32px;\n}\n.dso-header h2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n.dso-header .dso-close {\n  color: #275937;\n}\n\n:host .dso-modal {\n  bottom: 0;\n  height: 100%;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 530;\n  inset: 0px;\n  height: 100%;\n  position: fixed;\n  z-index: 530;\n}\n:host .dso-modal .dso-dialog {\n  animation: 1s ease-out 0s 1 slideInFromTop;\n  margin-top: 15vh;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 640px;\n  opacity: 1;\n  background-color: #fff;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n}\n:host .dso-modal .dso-header {\n  border-bottom: 1px solid #ccc;\n  padding: 16px;\n  position: relative;\n}\n:host .dso-modal .dso-header h2 {\n  color: #275937;\n  margin: 0;\n  max-width: calc(100% - 24px);\n}\n:host .dso-modal .dso-header .dso-close {\n  background-color: transparent;\n  border: 0;\n  height: 32px;\n  padding: 0;\n  position: absolute;\n  right: 13px;\n  text-align: center;\n  top: 16px;\n  width: 32px;\n}\n:host .dso-modal .dso-body {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 1.5rem;\n  overflow-x: auto;\n  padding: 32px;\n}\n:host .dso-modal .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal .dso-body ul,\n:host .dso-modal .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal .dso-body dso-highlight-box,\n:host .dso-modal .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal .dso-footer {\n  min-height: 80px;\n  padding: 0 32px 32px;\n  text-align: right;\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (min-width: 768px) {\n  :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .btn-default, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .btn-default, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .btn-default, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .btn-default {\n    margin-left: 16px;\n  }\n  :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .btn + .btn-link, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn-link, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn-link, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn-link {\n    margin-left: 0;\n  }\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-dialog {\n    max-width: 100%;\n    margin-top: 0;\n  }\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n  margin-top: 1rem;\n  max-width: calc(100% - 2rem);\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n  max-height: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n  .dso-modal .dso-dialog.dso-table-dialog {\n    max-width: 100%;\n  }\n}\n\n:host([is-responsive]) .dso-table-body {\n  border: 1px solid #ccc;\n  margin-bottom: 0;\n  overflow-y: hidden;\n  width: 100%;\n}\n:host([is-responsive]) .dso-table-body.dso-body {\n  width: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n  margin-bottom: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n  width: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n  margin-left: auto;\n}\n\n.dso-responsive-message {\n  font-size: 0.8em;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: center;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-modal-overlay {\n  background-color: rgba(255, 255, 255, 0.8);\n  bottom: 0;\n  display: block;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 529;\n}\n\n.dso-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";
+const tableCss = "@keyframes slideInFromTop {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  margin-bottom: 24px;\n}\n\n.dso-header {\n  min-height: 32px;\n}\n.dso-header h2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n.dso-header .dso-close {\n  color: #275937;\n}\n\n:host .dso-modal {\n  bottom: 0;\n  height: 100%;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 530;\n  inset: 0px;\n  height: 100%;\n  position: fixed;\n  z-index: 530;\n}\n:host .dso-modal .dso-dialog {\n  animation: 1s ease-out 0s 1 slideInFromTop;\n  background-color: #fff;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: clamp(40px, 15vh, 15vh);\n  max-width: 640px;\n  opacity: 1;\n}\n:host .dso-modal .dso-header {\n  border-bottom: 1px solid #ccc;\n  padding: 16px;\n  position: relative;\n}\n:host .dso-modal .dso-header h2 {\n  color: #275937;\n  margin: 0;\n  max-width: calc(100% - 24px);\n}\n:host .dso-modal .dso-header .dso-close {\n  background-color: transparent;\n  border: 0;\n  height: 32px;\n  padding: 0;\n  position: absolute;\n  right: 13px;\n  text-align: center;\n  top: 16px;\n  width: 32px;\n}\n:host .dso-modal > .dso-dialog > .dso-body {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 1.5rem;\n  overflow-x: auto;\n  padding: 32px;\n}\n:host .dso-modal > .dso-dialog > .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul,\n:host .dso-modal > .dso-dialog > .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 6.5rem;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {\n  padding: 32px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal .dso-footer {\n  min-height: 80px;\n  padding: 16px 32px;\n  text-align: right;\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (min-width: 768px) {\n  :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .btn-default, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .btn-default, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .btn-default, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .btn-default {\n    margin-left: 16px;\n  }\n  :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .btn + .btn-link, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn-link, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn-link, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn-link {\n    margin-left: 0;\n  }\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-dialog {\n    max-width: 100%;\n    margin-top: 0;\n  }\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (max-height: 380px) {\n  :host .dso-modal .dso-dialog {\n    margin-bottom: 8px;\n    margin-top: 8px;\n    min-height: 216px;\n  }\n  :host .dso-modal .dso-header {\n    padding: 8px 16px;\n  }\n  :host .dso-modal .dso-header .dso-close {\n    top: 8px;\n  }\n  :host .dso-modal .dso-body {\n    padding: 16px 24px;\n  }\n  :host .dso-modal .dso-footer {\n    min-height: auto;\n    overflow: auto;\n    padding: 8px 32px;\n  }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n  margin-top: 1rem;\n  max-width: calc(100% - 2rem);\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n  max-height: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n  .dso-modal .dso-dialog.dso-table-dialog {\n    max-width: 100%;\n  }\n}\n\n:host([is-responsive]) .dso-table-body {\n  border: 1px solid #ccc;\n  margin-bottom: 0;\n  overflow-y: hidden;\n  width: 100%;\n}\n:host([is-responsive]) .dso-table-body.dso-body {\n  width: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n  margin-bottom: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n  width: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n  margin-left: auto;\n}\n\n.dso-responsive-message {\n  font-size: 0.8em;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: center;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-modal-overlay {\n  background-color: rgba(255, 255, 255, 0.8);\n  bottom: 0;\n  display: block;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 529;\n}\n\n.dso-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";
 const Table = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"dso-table.entry.js","mappings":"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","names":["debounce"],"sources":["./src/components/table/table.scss?tag=dso-table&encapsulation=shadow","./src/components/table/table.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n@use \"~dso-toolkit/src/components/table\";\r\n\r\n:host {\r\n display: block;\r\n margin-bottom: units.$u3;\r\n}\r\n\r\n.dso-header {\r\n min-height: units.$u4;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-size: units.$font-size-h2;\r\n font-weight: 700;\r\n }\r\n\r\n .dso-close {\r\n color: colors.$bosgroen;\r\n }\r\n}\r\n\r\n:host .dso-modal {\r\n @include modal.root();\r\n\r\n inset: 0px;\r\n height: 100%;\r\n position: fixed;\r\n z-index: zindex.$modal;\r\n}\r\n\r\n.dso-modal .dso-dialog.dso-table-dialog {\r\n margin-top: 1rem;\r\n max-width: calc(100% - 2rem);\r\n\r\n .dso-body {\r\n $dso-body-unavailable-height: (2 * modal.$header-padding) + (modal.$footer-button-height + modal.$footer-padding);\r\n max-height: calc(100vh - #{$dso-body-unavailable-height} - 1.5em - 2rem); // margin\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n max-width: 100%;\r\n }\r\n}\r\n\r\n:host([is-responsive]) {\r\n .dso-table-body {\r\n border: 1px solid table.$border-color;\r\n margin-bottom: 0;\r\n overflow-y: hidden;\r\n width: 100%;\r\n\r\n &.dso-body {\r\n width: calc(100% - modal.$body-padding * 2);\r\n }\r\n }\r\n}\r\n\r\n.dso-table-utilities {\r\n align-items: center;\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: units.$u1;\r\n\r\n .dso-responsive-message {\r\n margin-bottom: 0;\r\n\r\n &:only-child {\r\n width: 100%;\r\n }\r\n }\r\n\r\n .open-modal-button {\r\n &:only-child {\r\n margin-left: auto;\r\n }\r\n }\r\n}\r\n\r\n.dso-responsive-message {\r\n font-size: 0.8em;\r\n margin-bottom: units.$u1;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-modal-overlay {\r\n @include modal.overlay();\r\n}\r\n\r\n.dso-table-placeholder {\r\n box-shadow: inset 0 0 0 1px table.$border-color;\r\n display: grid;\r\n place-content: center;\r\n}\r\n","import { h, Component, ComponentInterface, Element, Host, Prop, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n tag: \"dso-table\",\r\n styleUrl: \"table.scss\",\r\n shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n private resizeObserver?: ResizeObserver;\r\n\r\n private focusTrapElement?: HTMLDivElement;\r\n\r\n private buttonElement?: HTMLButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private labelledbyId = v4();\r\n\r\n @Element()\r\n host!: HTMLDsoTableElement;\r\n\r\n /*\r\n Prevents the table being opened in a modal.\r\n /\r\n @Prop({ reflect: true })\r\n noModal = false;\r\n\r\n /\r\n Indicates whether the table is currently horizontally scrollable.\r\n */\r\n @Prop({ reflect: true })\r\n isResponsive = false;\r\n\r\n @State()\r\n modalActive = false;\r\n\r\n @State()\r\n placeholderHeight?: number;\r\n\r\n private startResponsiveBehavior(): void {\r\n this.resizeObserver?.observe(this.host);\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.startResponsiveBehavior();\r\n }\r\n\r\n componentDidRender() {\r\n this.setFocusTrap();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n return (\r\n <Host>\r\n {this.modalActive && this.placeholderHeight && (\r\n <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n )}\r\n\r\n {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n <div class={{ \"dso-modal\": this.modalActive }}>\r\n <div\r\n class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n ref={(element) => (this.focusTrapElement = element)}\r\n {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n >\r\n {(this.isResponsive \|\| !this.noModal) && (\r\n <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n {this.isResponsive && (\r\n <div class=\"dso-responsive-message\">\r\n <span>beweeg de tabel van links naar rechts</span>\r\n </div>\r\n )}\r\n\r\n {!this.noModal && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary open-modal-button\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => this.openModal()}\r\n >\r\n <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n <span>vergroten</span>\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {this.modalActive && (\r\n <div class=\"dso-header\">\r\n <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n {caption \|\| \"Uitvergrote tabel dialoog\"}\r\n </h2>\r\n <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n </div>\r\n )}\r\n\r\n <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private openModal() {\r\n this.placeholderHeight = this.host.clientHeight;\r\n this.modalActive = true;\r\n }\r\n\r\n private closeModal() {\r\n this.placeholderHeight = undefined;\r\n this.modalActive = false;\r\n }\r\n\r\n private setFocusTrap() {\r\n if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n this.closeModal();\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => this.closeModal(),\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n }).activate();\r\n } else if (!this.modalActive && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n if (!dsoTable) {\r\n throw new Error(\"No dsoTable found\");\r\n }\r\n\r\n const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n this.isResponsive =\r\n Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n }\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-table.entry.js","mappings":"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","names":["debounce"],"sources":["./src/components/table/table.scss?tag=dso-table&encapsulation=shadow","./src/components/table/table.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n@use \"~dso-toolkit/src/components/table\";\r\n\r\n:host {\r\n display: block;\r\n margin-bottom: units.$u3;\r\n}\r\n\r\n.dso-header {\r\n min-height: units.$u4;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-size: units.$font-size-h2;\r\n font-weight: 700;\r\n }\r\n\r\n .dso-close {\r\n color: colors.$bosgroen;\r\n }\r\n}\r\n\r\n:host .dso-modal {\r\n @include modal.root();\r\n\r\n inset: 0px;\r\n height: 100%;\r\n position: fixed;\r\n z-index: zindex.$modal;\r\n}\r\n\r\n.dso-modal .dso-dialog.dso-table-dialog {\r\n margin-top: 1rem;\r\n max-width: calc(100% - 2rem);\r\n\r\n .dso-body {\r\n $dso-body-unavailable-height: (2 * modal.$header-padding) + (modal.$footer-button-height + modal.$footer-padding);\r\n max-height: calc(100vh - #{$dso-body-unavailable-height} - 1.5em - 2rem); // margin\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n max-width: 100%;\r\n }\r\n}\r\n\r\n:host([is-responsive]) {\r\n .dso-table-body {\r\n border: 1px solid table.$border-color;\r\n margin-bottom: 0;\r\n overflow-y: hidden;\r\n width: 100%;\r\n\r\n &.dso-body {\r\n width: calc(100% - modal.$body-padding * 2);\r\n }\r\n }\r\n}\r\n\r\n.dso-table-utilities {\r\n align-items: center;\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: units.$u1;\r\n\r\n .dso-responsive-message {\r\n margin-bottom: 0;\r\n\r\n &:only-child {\r\n width: 100%;\r\n }\r\n }\r\n\r\n .open-modal-button {\r\n &:only-child {\r\n margin-left: auto;\r\n }\r\n }\r\n}\r\n\r\n.dso-responsive-message {\r\n font-size: 0.8em;\r\n margin-bottom: units.$u1;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-modal-overlay {\r\n @include modal.overlay();\r\n}\r\n\r\n.dso-table-placeholder {\r\n box-shadow: inset 0 0 0 1px table.$border-color;\r\n display: grid;\r\n place-content: center;\r\n}\r\n","import { h, Component, ComponentInterface, Element, Host, Prop, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n tag: \"dso-table\",\r\n styleUrl: \"table.scss\",\r\n shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n private resizeObserver?: ResizeObserver;\r\n\r\n private focusTrapElement?: HTMLDivElement;\r\n\r\n private buttonElement?: HTMLButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private labelledbyId = v4();\r\n\r\n @Element()\r\n host!: HTMLDsoTableElement;\r\n\r\n /*\r\n Prevents the table being opened in a modal.\r\n /\r\n @Prop({ reflect: true })\r\n noModal = false;\r\n\r\n /\r\n Indicates whether the table is currently horizontally scrollable.\r\n */\r\n @Prop({ reflect: true })\r\n isResponsive = false;\r\n\r\n @State()\r\n modalActive = false;\r\n\r\n @State()\r\n placeholderHeight?: number;\r\n\r\n private startResponsiveBehavior(): void {\r\n this.resizeObserver?.observe(this.host);\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.startResponsiveBehavior();\r\n }\r\n\r\n componentDidRender() {\r\n this.setFocusTrap();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n return (\r\n <Host>\r\n {this.modalActive && this.placeholderHeight && (\r\n <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n )}\r\n\r\n {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n <div class={{ \"dso-modal\": this.modalActive }}>\r\n <div\r\n class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n ref={(element) => (this.focusTrapElement = element)}\r\n {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n >\r\n {(this.isResponsive \|\| !this.noModal) && (\r\n <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n {this.isResponsive && (\r\n <div class=\"dso-responsive-message\">\r\n <span>beweeg de tabel van links naar rechts</span>\r\n </div>\r\n )}\r\n\r\n {!this.noModal && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary open-modal-button\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => this.openModal()}\r\n >\r\n <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n <span>vergroten</span>\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {this.modalActive && (\r\n <div class=\"dso-header\">\r\n <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n {caption \|\| \"Uitvergrote tabel dialoog\"}\r\n </h2>\r\n <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n </div>\r\n )}\r\n\r\n <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private openModal() {\r\n this.placeholderHeight = this.host.clientHeight;\r\n this.modalActive = true;\r\n }\r\n\r\n private closeModal() {\r\n this.placeholderHeight = undefined;\r\n this.modalActive = false;\r\n }\r\n\r\n private setFocusTrap() {\r\n if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n this.closeModal();\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => this.closeModal(),\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n }).activate();\r\n } else if (!this.modalActive && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n if (!dsoTable) {\r\n throw new Error(\"No dsoTable found\");\r\n }\r\n\r\n const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n this.isResponsive =\r\n Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n }\r\n }\r\n}\r\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-8de88e7c.js';
+import { r as registerInstance, h, F as Fragment, a as getElement } from './index-367cff36.js';
 const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}:host(:focus){outline:none}";

package/dist/esm/dso-toolkit.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-8de88e7c.js';
-export { s as setNonce } from './index-8de88e7c.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-367cff36.js';
+export { s as setNonce } from './index-367cff36.js';
 /*
- Stencil Client Patch Browser v3.3.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v3.4.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"_toggleAnnotation":[64]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[516],"hasNestedSection":[32],"hover":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-expandable-heading",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1],"suppressed":[4],"editAction":[1,"edit-action"]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"ariaId":[32],"hasFooter":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"_getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[513]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32],"_getAnimeInstance":[64],"_getBodyHeight":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dsot-document-component-demo",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]}],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
 });
 //# sourceMappingURL=dso-toolkit.js.map

package/dist/esm/dso-toolkit.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-toolkit.js","mappings":";;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v3.3.1 \| MIT Licensed \| https://stenciljs.com\n /\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/*\n Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n \n @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n /\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null \|\| _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null \|\| _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s\|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /noop/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts \|\| BUILD.safari10 \|\| BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\|\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm \|\| {})['data-opts'] \|\| {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration / IS_ESM_BUILD /) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n / promise noop /\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim \|\| BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') \|\| scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/ webpackChunkName: \"polyfills-dom\" / './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}
1	+ {"file":"dso-toolkit.js","mappings":";;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v3.4.0 \| MIT Licensed \| https://stenciljs.com\n /\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/*\n Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n \n @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n /\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null \|\| _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null \|\| _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s\|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /noop/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts \|\| BUILD.safari10 \|\| BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\|\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm \|\| {})['data-opts'] \|\| {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration / IS_ESM_BUILD /) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n / promise noop /\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim \|\| BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') \|\| scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/ webpackChunkName: \"polyfills-dom\" / './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8de88e7c.js';
-import { d as detectOverflow, h as hasOverflow, c as createPopper, b as beforeWrite } from './has-overflow-fdc85d8f.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-367cff36.js';
+import { d as detectOverflow, h as hasOverflow, c as createPopper, b as beforeWrite } from './has-overflow-814a0f4e.js';
 import { c as clsx } from './clsx.m-25174a58.js';
 import { d as debounce_1 } from './index-f2bf58ce.js';

package/dist/esm/dso-tree-view.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-8de88e7c.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-367cff36.js';
 import { c as clsx } from './clsx.m-25174a58.js';
 const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {

package/dist/esm/dso-viewer-grid.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-8de88e7c.js';
+import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-367cff36.js';
 import { c as createFocusTrap } from './focus-trap.esm-2a49a38f.js';
 import './index.esm-3d6c8190.js';