npm - @dso-toolkit/core - Versions diffs - 84.1.0 → 86.0.0 - Mend

@dso-toolkit/core 84.1.0 → 86.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 (699) hide show

package/dist/components/dso-annotation-gebiedsaanwijzing.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-annotation-gebiedsaanwijzing.js","mappings":";;;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,~~g5MAAg5M~~,CAAC;;~~MCiBj6M~~,2BAA2B,iBAAAA,kBAAA,CAAA,MAAA,2BAAA,SAAA,WAAA,CAAA;AALxC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;QAuCU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6BrC;IA3BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAC,CAAA,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,IAAI,GAAI,CAC5B,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-gebiedsaanwijzing&encapsulation=shadow","src/components/annotation/annotation-gebiedsaanwijzing/annotation-gebiedsaanwijzing.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/*\r\n @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n /\r\n@Component({\r\n tag: \"dso-annotation-gebiedsaanwijzing\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationGebiedsaanwijzing implements ComponentInterface {\r\n /\r\n Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de annotatie actief is.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n /\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /\r\n Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /\r\n De naam van de gebiedsaanwijzing.\r\n */\r\n @Prop()\r\n naam?: RenvooiValue \| string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationGebiedsaanwijzingElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <span class=\"content\">\r\n <dso-renvooi value={this.naam} />\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-annotation-gebiedsaanwijzing.js","mappings":";;;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ikMAAikM,CAAC;;MCiBllM,2BAA2B,iBAAAA,kBAAA,CAAA,MAAA,2BAAA,SAAA,WAAA,CAAA;AALxC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;QAuCU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6BrC;IA3BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAC,CAAA,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,IAAI,GAAI,CAC5B,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-gebiedsaanwijzing&encapsulation=shadow","src/components/annotation/annotation-gebiedsaanwijzing/annotation-gebiedsaanwijzing.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/*\r\n @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n /\r\n@Component({\r\n tag: \"dso-annotation-gebiedsaanwijzing\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationGebiedsaanwijzing implements ComponentInterface {\r\n /\r\n Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de annotatie actief is.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n /\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /\r\n Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /\r\n De naam van de gebiedsaanwijzing.\r\n */\r\n @Prop()\r\n naam?: RenvooiValue \| string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationGebiedsaanwijzingElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <span class=\"content\">\r\n <dso-renvooi value={this.naam} />\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-annotation-kaart.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './renvooi.js';
 import { d as defineCustomElement$2 } from './slide-toggle.js';
-const annotationCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]){--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}`;
+const annotationCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}`;
 const AnnotationKaart = /*@__PURE__*/ proxyCustomElement(class AnnotationKaart extends HTMLElement {
     constructor(registerHost) {

package/dist/components/dso-annotation-kaart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-annotation-kaart.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,~~g5MAAg5M~~,CAAC;;~~MCcj6M~~,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAA,WAAA,CAAA;AAL5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkCU,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAU;AAC7C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACd;;AAGF,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;AACpC,aAAA,CAAC;AACJ,SAAC;AAeF;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,IACrB,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAA,EAC5D,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CAC/B,KAEJ,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAa,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CAC5B,CACR;QAED,OAAO,CAAC,CAAA,cAAc,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAE,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,MAAM,GAAG,EAAE,KAAK,EAAE,KAAK,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-kaart&encapsulation=shadow","src/components/annotation/annotation-kaart/annotation-kaart.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationKaartClickEvent } from \"./annotation-kaart.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-annotation-kaart\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationKaart implements ComponentInterface {\r\n /*\r\n Een optionele wijzigactie die aangeeft of de annotatie is toegevoegd of verwijderd.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /\r\n De naam van de kaart.\r\n /\r\n @Prop()\r\n naam?: RenvooiValue \| string;\r\n\r\n /\r\n De url naar de kaart.\r\n \r\n Gebruik het event `dsoClick` om de navigatie aan de router te koppelen.\r\n /\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /\r\n Event als de gebruiker de kaartnaam selecteert.\r\n \r\n Let op \"isModifiedEvent\" om te bepalen of de navigatieactie door de router of de browser moet worden afgehandeld.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<AnnotationKaartClickEvent>;\r\n\r\n private clickHandler = (e: MouseEvent): void => {\r\n if (!this.href) {\r\n return;\r\n }\r\n\r\n this.dsoClick.emit({\r\n href: this.href,\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n };\r\n\r\n render() {\r\n const title = this.href ? (\r\n <a class=\"content\" href={this.href} onClick={this.clickHandler}>\r\n <dso-renvooi value={this.naam} />\r\n </a>\r\n ) : (\r\n <span class=\"content\">\r\n <dso-renvooi value={this.naam} />\r\n </span>\r\n );\r\n\r\n return <AnnotationBody symbol={<dso-icon icon=\"land\" />} title={title} />;\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-annotation-kaart.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ikMAAikM,CAAC;;MCcllM,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAA,WAAA,CAAA;AAL5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkCU,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAU;AAC7C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACd;;AAGF,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;AACpC,aAAA,CAAC;AACJ,SAAC;AAeF;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,IACrB,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAA,EAC5D,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CAC/B,KAEJ,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAa,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CAC5B,CACR;QAED,OAAO,CAAC,CAAA,cAAc,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAE,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,MAAM,GAAG,EAAE,KAAK,EAAE,KAAK,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-kaart&encapsulation=shadow","src/components/annotation/annotation-kaart/annotation-kaart.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationKaartClickEvent } from \"./annotation-kaart.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-annotation-kaart\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationKaart implements ComponentInterface {\r\n /*\r\n Een optionele wijzigactie die aangeeft of de annotatie is toegevoegd of verwijderd.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /\r\n De naam van de kaart.\r\n /\r\n @Prop()\r\n naam?: RenvooiValue \| string;\r\n\r\n /\r\n De url naar de kaart.\r\n \r\n Gebruik het event `dsoClick` om de navigatie aan de router te koppelen.\r\n /\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /\r\n Event als de gebruiker de kaartnaam selecteert.\r\n \r\n Let op \"isModifiedEvent\" om te bepalen of de navigatieactie door de router of de browser moet worden afgehandeld.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<AnnotationKaartClickEvent>;\r\n\r\n private clickHandler = (e: MouseEvent): void => {\r\n if (!this.href) {\r\n return;\r\n }\r\n\r\n this.dsoClick.emit({\r\n href: this.href,\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n };\r\n\r\n render() {\r\n const title = this.href ? (\r\n <a class=\"content\" href={this.href} onClick={this.clickHandler}>\r\n <dso-renvooi value={this.naam} />\r\n </a>\r\n ) : (\r\n <span class=\"content\">\r\n <dso-renvooi value={this.naam} />\r\n </span>\r\n );\r\n\r\n return <AnnotationBody symbol={<dso-icon icon=\"land\" />} title={title} />;\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-annotation-omgevingsnormwaarde.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { d as defineCustomElement$4 } from './renvooi.js';
 import { d as defineCustomElement$3 } from './slide-toggle.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
-const annotationCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]){--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}`;
+const annotationCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}`;
 const AnnotationOmgevingsnormwaarde = /*@__PURE__*/ proxyCustomElement(class AnnotationOmgevingsnormwaarde extends HTMLElement {
     constructor(registerHost) {

package/dist/components/dso-annotation-omgevingsnormwaarde.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-annotation-omgevingsnormwaarde.js","mappings":";;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,~~g5MAAg5M~~,CAAC;;~~MCoBj6M~~,6BAA6B,iBAAAA,kBAAA,CAAA,MAAA,6BAAA,SAAA,WAAA,CAAA;AAL1C,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;QAyDU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6CrC;IA3CC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAA,CAAC,oBAAoB,EAAA,IAAA,CAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,KAAK,EAC5B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAChC,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,GAAG,UACA,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,OAAO,EAAI,CAAA,MACvC,CACJ,CACA,EAEL,IAAI,EACF,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,IAAI,CAAC,WAAW,IAAI,kBAAG,IAAI,CAAC,WAAW,CAAI,EAC3C,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACtC,CAAA,CAAA,QAAA,EAAA,IAAA,QACI,CAAC,CAAA,2BAA2B,EAAC,EAAA,MAAM,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,CACtD,CACJ,CACI,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-omgevingsnormwaarde&encapsulation=shadow","src/components/annotation/annotation-omgevingsnormwaarde/annotation-omgevingsnormwaarde.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/*\r\n Dit component wordt voor een Omgevingsnorm en Omgevingswaarde gebruikt.\r\n \r\n @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n /\r\n@Component({\r\n tag: \"dso-annotation-omgevingsnormwaarde\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationOmgevingsnormwaarde implements ComponentInterface {\r\n /\r\n Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de annotatie actief is.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n /\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /\r\n Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /\r\n De naam van de omgevingsnorm of omgevingswaarde.\r\n /\r\n @Prop()\r\n naam?: RenvooiValue \| string;\r\n\r\n /\r\n De toelichting van de waardes.\r\n /\r\n @Prop()\r\n toelichting?: string;\r\n\r\n /\r\n De waardes van de omgevingsnorm of omgevingswaarde.\r\n /\r\n @Prop()\r\n waardes?: Array<RenvooiValue \| string>;\r\n\r\n /\r\n De eenheid van de omgevingsnorm of omgevingswaarde.\r\n */\r\n @Prop()\r\n eenheid?: RenvooiValue \| string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationOmgevingsnormwaardeElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active \|\| false}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <dso-renvooi value={this.naam} />\r\n {this.eenheid && (\r\n <>\r\n {\" \"}\r\n (in <dso-renvooi value={this.eenheid} />)\r\n </>\r\n )}\r\n </>\r\n }\r\n data={\r\n <>\r\n <span class=\"content\">\r\n {this.toelichting && <>{this.toelichting}</>}\r\n {this.waardes && this.waardes.length > 0 && (\r\n <>\r\n : <AnnotationListRenvooiValues values={this.waardes} />\r\n </>\r\n )}\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-annotation-omgevingsnormwaarde.js","mappings":";;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ikMAAikM,CAAC;;MCoBllM,6BAA6B,iBAAAA,kBAAA,CAAA,MAAA,6BAAA,SAAA,WAAA,CAAA;AAL1C,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;QAyDU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6CrC;IA3CC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAA,CAAC,oBAAoB,EAAA,IAAA,CAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,KAAK,EAC5B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAChC,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,GAAG,UACA,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,OAAO,EAAI,CAAA,MACvC,CACJ,CACA,EAEL,IAAI,EACF,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,IAAI,CAAC,WAAW,IAAI,kBAAG,IAAI,CAAC,WAAW,CAAI,EAC3C,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACtC,CAAA,CAAA,QAAA,EAAA,IAAA,QACI,CAAC,CAAA,2BAA2B,EAAC,EAAA,MAAM,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,CACtD,CACJ,CACI,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-omgevingsnormwaarde&encapsulation=shadow","src/components/annotation/annotation-omgevingsnormwaarde/annotation-omgevingsnormwaarde.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/*\r\n Dit component wordt voor een Omgevingsnorm en Omgevingswaarde gebruikt.\r\n \r\n @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n /\r\n@Component({\r\n tag: \"dso-annotation-omgevingsnormwaarde\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationOmgevingsnormwaarde implements ComponentInterface {\r\n /\r\n Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n /\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de annotatie actief is.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n /\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /\r\n Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /\r\n De naam van de omgevingsnorm of omgevingswaarde.\r\n /\r\n @Prop()\r\n naam?: RenvooiValue \| string;\r\n\r\n /\r\n De toelichting van de waardes.\r\n /\r\n @Prop()\r\n toelichting?: string;\r\n\r\n /\r\n De waardes van de omgevingsnorm of omgevingswaarde.\r\n /\r\n @Prop()\r\n waardes?: Array<RenvooiValue \| string>;\r\n\r\n /\r\n De eenheid van de omgevingsnorm of omgevingswaarde.\r\n */\r\n @Prop()\r\n eenheid?: RenvooiValue \| string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationOmgevingsnormwaardeElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active \|\| false}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <dso-renvooi value={this.naam} />\r\n {this.eenheid && (\r\n <>\r\n {\" \"}\r\n (in <dso-renvooi value={this.eenheid} />)\r\n </>\r\n )}\r\n </>\r\n }\r\n data={\r\n <>\r\n <span class=\"content\">\r\n {this.toelichting && <>{this.toelichting}</>}\r\n {this.waardes && this.waardes.length > 0 && (\r\n <>\r\n : <AnnotationListRenvooiValues values={this.waardes} />\r\n </>\r\n )}\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-card.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, tra
 import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const cardCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-selectable]:not([is-selectable=false])) .dso-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-heading,:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-content{grid-column:2/-1}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-selectable{grid-row:span 2;margin-inline-end:8px}:host([active]:not([active=false])) .dso-card-container{background-color:#e5e5e5}.dso-card-container{padding-block:16px;padding-inline:16px;inline-size:100%;block-size:100%}.dso-card-container:has(.dso-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}.dso-card-container .dso-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-card-container .dso-card-heading{flex-wrap:wrap}}.dso-card-container .dso-card-heading+.dso-card-content{margin-block-start:8px}.heading-anchor{display:flex;gap:4px;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}::slotted([slot=selectable]){font-size:0 !important;--_dt-selectable-padding-inline-start:24px;--_dt-selectable-input-wrapper-margin-inline-start:-24px;--_dt-selectable-input-wrapper-padding-inline-start:24px}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interactions]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interactions]){flex-basis:100% !important;margin-block-start:16px !important}}`;
+const cardCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-selectable]:not([is-selectable=false])) .dso-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-heading,:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-content{grid-column:2/-1}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-selectable{grid-row:span 2;margin-inline-end:8px}:host([active]:not([active=false])) .dso-card-container{background-color:#e5e5e5}.dso-card-container{padding-block:16px;padding-inline:16px;inline-size:100%;block-size:100%}.dso-card-container:has(.dso-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}.dso-card-container .dso-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-card-container .dso-card-heading{flex-wrap:wrap}}.dso-card-container .dso-card-heading+.dso-card-content{margin-block-start:8px}.heading-anchor{display:flex;gap:4px;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}::slotted([slot=selectable]){font-size:0 !important;--_dt-selectable-padding-inline-start:24px;--_dt-selectable-input-wrapper-margin-inline-start:-24px;--_dt-selectable-input-wrapper-padding-inline-start:24px}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interactions]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interactions]){flex-basis:100% !important;margin-block-start:16px !important}}`;
 const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
     constructor(registerHost) {

package/dist/components/dso-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-card.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,i9JAAi9J,CAAC;;MCiB59J,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAA,WAAA,CAAA;;;;;;;;;IAgCf,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAGtB,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD;;AAGF,QAAA,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AAG1F,IAAA,IAAI,wBAAwB,GAAA;QAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC;;AAGvD,IAAA,IAAI,0BAA0B,GAAA;QAC5B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC;;IAGzD,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,wBAAwB,KAAK,IAAI;AAE3D,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAA,EAAgB,YAAY,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,CAAC,YAAY,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAG,CACtB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC1B,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,KACtB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAEzC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,EACvB,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAY,CAAA,EAC1C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAA+C,EAAA,yCAAA,CAAA,CAClE,CACL;aACE,IAAI,CAAC,IAAI,KAAK,UAAU,KACvB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,EACvB,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,UAAU,EAAA,CAAY,CACnC,CACL,CAAC,KACA,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,EACvB,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,eAAe,EAAA,CAAY,CACxC,CACL,EACF,IAAI,CAAC,0BAA0B,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACrE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host([is-selectable]:not([is-selectable=\"false\"])) {\r\n .dso-card-container {\r\n display: grid;\r\n grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n .dso-card-heading,\r\n .dso-card-content {\r\n grid-column: 2 /-1;\r\n }\r\n\r\n .dso-card-selectable {\r\n grid-row: span 2;\r\n\r\n margin-inline-end: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-card-container {\r\n background-color: colors.$grijs-10;\r\n }\r\n}\r\n\r\n.dso-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n block-size: 100%;\r\n\r\n &:has(.dso-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: colors.$grijs-5;\r\n }\r\n\r\n .dso-card-heading {\r\n align-items: center;\r\n display: flex;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n\r\n + .dso-card-content {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n.heading-anchor {\r\n display: flex;\r\n gap: units.$u1 * 0.5;\r\n\r\n color: colors.$bosgroen;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n}\r\n\r\n::slotted([slot=\"selectable\"]) {\r\n font-size: 0 !important;\r\n --_dt-selectable-padding-inline-start: #{units.$u3};\r\n --_dt-selectable-input-wrapper-margin-inline-start: #{-(units.$u3)};\r\n --_dt-selectable-input-wrapper-padding-inline-start: #{units.$u3};\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: flex !important;\r\n align-items: center !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n color: colors.$bosgroen !important;\r\n line-height: 1.25 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n --_dt-rich-content-margin-block: #{units.$u1};\r\n --_dt-rich-content-margin-block-end: 0;\r\n --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interactions\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n margin-inline-start: auto !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u2 !important;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { CardClickEvent } from \"./card.interfaces\";\r\n\r\n/*\r\n @slot selectable - An optional slot to place a `Selectable` in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n /\r\n@Component({\r\n tag: \"dso-card\",\r\n styleUrl: \"card.scss\",\r\n shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoCardElement;\r\n\r\n /\r\n The URL to which the Card heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href!: string \| undefined;\r\n\r\n /\r\n Display the link as an external link or a download link\r\n * - \"download\"\r\n * - \"extern\"\r\n /\r\n @Prop({ reflect: true })\r\n mode?: string;\r\n\r\n /\r\n Makes the Card active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the Card heading is clicked.\r\n */\r\n @Event()\r\n dsoCardClick!: EventEmitter<CardClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\"[slot='selectable']\");\r\n }\r\n\r\n get interactionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='interactions']\");\r\n }\r\n\r\n render() {\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n return (\r\n <Host is-selectable={isSelectable}>\r\n <div class=\"dso-card-container\">\r\n <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n <slot name=\"selectable\" />\r\n </div>\r\n <div class=\"dso-card-heading\">\r\n {(this.mode === \"extern\" && (\r\n <a\r\n href={this.href}\r\n class=\"heading-anchor\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n onClick={(e) => this.clickEventHandler(e)}\r\n >\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n </a>\r\n )) \|\|\r\n (this.mode === \"download\" && (\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"download\"></dso-icon>\r\n </a>\r\n )) \|\| (\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )}\r\n {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n </div>\r\n <div class=\"dso-card-content\">\r\n <slot name=\"content\" />\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-card.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host([is-selectable]:not([is-selectable=\"false\"])) {\r\n .dso-card-container {\r\n display: grid;\r\n grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n .dso-card-heading,\r\n .dso-card-content {\r\n grid-column: 2 /-1;\r\n }\r\n\r\n .dso-card-selectable {\r\n grid-row: span 2;\r\n\r\n margin-inline-end: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-card-container {\r\n background-color: colors.$grijs-10;\r\n }\r\n}\r\n\r\n.dso-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n block-size: 100%;\r\n\r\n &:has(.dso-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: colors.$grijs-5;\r\n }\r\n\r\n .dso-card-heading {\r\n align-items: center;\r\n display: flex;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n\r\n + .dso-card-content {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n.heading-anchor {\r\n display: flex;\r\n gap: units.$u1 * 0.5;\r\n\r\n color: colors.$bosgroen;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n}\r\n\r\n::slotted([slot=\"selectable\"]) {\r\n font-size: 0 !important;\r\n --_dt-selectable-padding-inline-start: #{units.$u3};\r\n --_dt-selectable-input-wrapper-margin-inline-start: #{-(units.$u3)};\r\n --_dt-selectable-input-wrapper-padding-inline-start: #{units.$u3};\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: flex !important;\r\n align-items: center !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n color: colors.$bosgroen !important;\r\n line-height: 1.25 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n --_dt-rich-content-margin-block: #{units.$u1};\r\n --_dt-rich-content-margin-block-end: 0;\r\n --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interactions\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n margin-inline-start: auto !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u2 !important;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { CardClickEvent } from \"./card.interfaces\";\r\n\r\n/*\r\n @slot selectable - An optional slot to place a `Selectable` in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n /\r\n@Component({\r\n tag: \"dso-card\",\r\n styleUrl: \"card.scss\",\r\n shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoCardElement;\r\n\r\n /\r\n The URL to which the Card heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href!: string \| undefined;\r\n\r\n /\r\n Display the link as an external link or a download link\r\n * - \"download\"\r\n * - \"extern\"\r\n /\r\n @Prop({ reflect: true })\r\n mode?: string;\r\n\r\n /\r\n Makes the Card active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the Card heading is clicked.\r\n */\r\n @Event()\r\n dsoCardClick!: EventEmitter<CardClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\"[slot='selectable']\");\r\n }\r\n\r\n get interactionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='interactions']\");\r\n }\r\n\r\n render() {\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n return (\r\n <Host is-selectable={isSelectable}>\r\n <div class=\"dso-card-container\">\r\n <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n <slot name=\"selectable\" />\r\n </div>\r\n <div class=\"dso-card-heading\">\r\n {(this.mode === \"extern\" && (\r\n <a\r\n href={this.href}\r\n class=\"heading-anchor\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n onClick={(e) => this.clickEventHandler(e)}\r\n >\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n </a>\r\n )) \|\|\r\n (this.mode === \"download\" && (\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"download\"></dso-icon>\r\n </a>\r\n )) \|\| (\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )}\r\n {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n </div>\r\n <div class=\"dso-card-content\">\r\n <slot name=\"content\" />\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-document-card.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, transform
 import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:16px !important}}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}`;
+const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}::slotted([slot=meta]){margin-inline-end:8px}::slotted([slot=status]){margin-inline-end:8px}`;
 const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends HTMLElement {
     constructor(registerHost) {
@@ -31,8 +31,11 @@ const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends
     get metaSlottedElement() {
         return this.host.querySelector("[slot='meta']");
     }
+    get interactionsSlottedElement() {
+        return this.host.querySelector("[slot='interactions']");
+    }
     render() {
-        return (h("div", { key: 'fa7b46b5f893de1939b774c925d34f7f18e15571', class: "dso-document-card-container" }, h("div", { key: '682a8fa1673b1c38ca16fc6f4f1a274719adb9f4', class: "dso-document-card-heading" }, h("a", { key: 'ee6c434a98e009753e38f92ef38580970025a58b', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'a14a1a16baafedd1806bf3417dea1135b9cfdb41', class: "icon-container" }, h("dso-icon", { key: '843ee861b72689523ce5af6479a3aa1a9ffd84c2', icon: "chevron-right" }), h("slot", { key: '918b8e3797b99bd07902ab849f95e3a5b2bf1531', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '226986aeeb3d0091f274697b67ebd8de3c358c53', name: "meta" })), h("div", { key: 'e0d5195cfa6feb274e4df486b4ca5869f6654ada', class: "dso-document-card-type" }, h("slot", { key: '089ae1f70596e1bff98b74acad76a0c6f00e665e', name: "type" })), h("div", { key: '6ae6d7023a4b045f7120977d5bccd9b3edaf5ccd', class: "dso-document-card-status" }, h("slot", { key: '832d0c2fda8e6fab9ff211d3fbbdd3a8bdf3bbce', name: "status" }))));
+        return (h("div", { key: '7ad84c77cd9cad0cfe796d71d9889cd42a46dcff', class: "dso-document-card-container" }, h("div", { key: 'cd01ffeccf94bdf273afb2f0356610895ee2209c', class: "dso-document-card-heading" }, h("a", { key: '1272f0fb728edeb32ce9ad2dba93a3cb44f4c69a', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'acedac80a682a895706e45846230656d381c46cc', class: "icon-container" }, h("dso-icon", { key: '0808cc4158363e032e566f55783d4d81d8d00f7b', icon: "chevron-right" }), h("slot", { key: '0523647b2f8aafffabe191a0d0e985055581737f', name: "heading" })))), h("div", { key: 'bc5e9ca39e326cd9fdd0849b890b864de925f774', class: "dso-document-card-type" }, h("slot", { key: '22d9f6b73539a9e0a414b59a7c92c9bcddb70a52', name: "type" })), h("div", { key: 'a891f27126d774e6c50277d25fb4c72cc16d62a5', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '64199f7e9d2e0ae1fe039083d79a868b9760139b', name: "meta" }), h("slot", { key: '9dfbe5e04c8abfd93aff4982f9bd383170d711d5', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '7855de2e14a64d8b68c1840264082f96f48d895b', name: "interactions" }))));
     }
     get host() { return this; }
     static get style() { return documentCardCss(); }

package/dist/components/dso-document-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-document-card.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,~~2xDAA2xD~~,CAAC;;~~MCiB9yD~~,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;;;;IAwBvB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAGtB,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD;;AAGF,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AAGlG,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;;~~IAGjD~~,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1B,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAG,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,~~EAAA~~,~~CAAG~~,CAClB,CACL,~~EACH~~,~~IAAI~~,~~CAAC~~,~~kBAAkB~~,KAAK,~~IAAI~~,~~IAAI~~,~~6DAAM~~,IAAI,EAAC,MAAM,EAAA,CAAG,~~CACrD~~,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,~~wBAAwB~~,EAAA,~~EACjC~~,~~CAAA~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAM~~,IAAI,EAAC,MAAM,~~EAAA~~,~~CAAG~~,~~CAChB~~,~~EACN~~,~~CAAK,~~CAAA,~~KAAA~~,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,~~KAAK~~,EAAC,0BAA0B,~~EAAA~~,~~EACnC~~,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,~~QAAQ~~,~~GAAG~~,~~CAClB~~,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/document-card/document-card.scss?tag=dso-document-card&encapsulation=shadow","src/components/document-card/document-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/document-card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-document-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n\r\n .dso-document-card-heading {\r\n align-items: center;\r\n display: flex;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n &:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: document-card.$background-color-hover;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-document-card-container {\r\n background-color: document-card.$background-color-active;\r\n }\r\n}\r\n~~\r\n~~::slotted([slot=\"meta\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n flex-shrink: 0 !important;\r\n align-self: end !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u2 !important;\r\n }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: inline !important;\r\n color: colors.$bosgroen !important;\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n line-height: 1.25 !important;\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n}\r\n\r\n.heading-anchor {\r\n color: document-card.$heading-anchor-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: document-card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: document-card.$heading-anchor-color;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n\r\n .icon-container {\r\n position: relative;\r\n padding-inline-end: units.$u3;\r\n\r\n dso-icon {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n inset-block-end: -3px;\r\n block-size: units.$u3;\r\n inline-size: units.$u3;\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"type\"]) {\r\n --_dt-info-button-margin-inline-start: 0;\r\n\r\n display: flex !important;\r\n gap: units.$u1 !important;\r\n}\r\n\r\n.dso-document-card-heading + .dso-document-card-type,\r\n.dso-document-card-heading + .dso-document-card-status,\r\n.dso-document-card-type + .dso-document-card-status {\r\n margin-block-start: units.$u1;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/*\r\n @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot ~~type~~ - A slot to hold ~~type~~ of ~~document~~ ~~with~~ an ~~optional `Toggletip`.\~~r\n * @slot ~~status~~ - A slot to ~~hold~~ ~~some~~ ~~status~~ ~~information on the document~~.\r\n /\r\n@Component({\r\n tag: \"dso-document-card\",\r\n styleUrl: \"document-card.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoDocumentCardElement;\r\n\r\n /\r\n The URL to which the DocumentCard heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href!: string \| undefined;\r\n\r\n /\r\n Makes the DocumentCard active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the DocumentCard heading is clicked.\r\n */\r\n @Event()\r\n dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get metaSlottedElement() {\r\n return this.host.querySelector(\"[slot='meta']\");\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"dso-document-card-container\">\r\n <div class=\"dso-document-card-heading\">\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <span class=\"icon-container\">\r\n <dso-icon icon=\"chevron-right\" />\r\n <slot name=\"heading\" />\r\n </span>\r\n </a>\r\n ~~{this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n~~ </div>\r\n <div class=\"dso-document-card-type\">\r\n <slot name=\"type\" />\r\n </div>\r\n <div class=\"dso-document-card-status\">\r\n <slot name=\"status\" />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-document-card.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/document-card/document-card.scss?tag=dso-document-card&encapsulation=shadow","src/components/document-card/document-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/document-card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-document-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n\r\n .dso-document-card-heading {\r\n align-items: center;\r\n display: flex;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n &:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: document-card.$background-color-hover;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-document-card-container {\r\n background-color: document-card.$background-color-active;\r\n }\r\n}\r\n::slotted([slot=\"heading\"]) {\r\n display: inline !important;\r\n color: colors.$bosgroen !important;\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n line-height: 1.25 !important;\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n}\r\n\r\n.heading-anchor {\r\n color: document-card.$heading-anchor-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: document-card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: document-card.$heading-anchor-color;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n\r\n .icon-container {\r\n position: relative;\r\n padding-inline-end: units.$u3;\r\n\r\n dso-icon {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n inset-block-end: -3px;\r\n block-size: units.$u3;\r\n inline-size: units.$u3;\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"type\"]) {\r\n --_dt-info-button-margin-inline-start: 0;\r\n\r\n display: flex !important;\r\n gap: units.$u1 !important;\r\n}\r\n\r\n.dso-document-card-heading + .dso-document-card-type,\r\n.dso-document-card-heading + .dso-document-card-status,\r\n.dso-document-card-type + .dso-document-card-status {\r\n margin-block-start: units.$u1;\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n margin-inline-end: units.$u1;\r\n}\r\n\r\n::slotted([slot=\"status\"]) {\r\n margin-inline-end: units.$u1;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/*\r\n @slot heading - A slot to place the title of the card in.\r\n * @slot type - A slot to hold type of document with an optional `Toggletip`.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot status - A slot to hold some status information on the document.\r\n * @slot interactions - An optional slot for one or more `Badge`'s.\r\n /\r\n@Component({\r\n tag: \"dso-document-card\",\r\n styleUrl: \"document-card.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoDocumentCardElement;\r\n\r\n /\r\n The URL to which the DocumentCard heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href!: string \| undefined;\r\n\r\n /\r\n Makes the DocumentCard active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the DocumentCard heading is clicked.\r\n */\r\n @Event()\r\n dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get metaSlottedElement() {\r\n return this.host.querySelector(\"[slot='meta']\");\r\n }\r\n\r\n get interactionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='interactions']\");\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"dso-document-card-container\">\r\n <div class=\"dso-document-card-heading\">\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <span class=\"icon-container\">\r\n <dso-icon icon=\"chevron-right\" />\r\n <slot name=\"heading\" />\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"dso-document-card-type\">\r\n <slot name=\"type\" />\r\n </div>\r\n <div class=\"dso-document-card-status\">\r\n {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n <slot name=\"status\" />\r\n {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-header.js CHANGED Viewed

@@ -160,7 +160,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         }
     }
     render() {
-        return (h(Host, { key: 'be2307ac0dd7b904dab98b9939934a66b826b58e', "is-compact": this.isCompact }, h("div", { key: 'df33364ae9b770ff89cb1b2fa744bbe444d9aa48', class: "dso-header" }, h("div", { key: 'aa283ab329b3ad2ff95c287a14c9ab2e9ce9107b', class: "logo-container" }, h("slot", { key: '150276e26091fb0d259a4b6235286dcd47150bdd', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '228fb75a1651e9674939baf063450690f28c4976', "is-compact": this.isCompact }, h("div", { key: '33568c3eb674b8d22e62ceb4efd9ea78a73b5ea3', class: "dso-header" }, h("div", { key: '895c3dc52a24defdb752cd1961dd5219b1d505a2', class: "logo-container" }, h("slot", { key: '5f911f80f477c4d902bb96cc6ca1d941aa80324e', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     renderCompact() {
         return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))));

package/dist/components/dso-highlight-box.js CHANGED Viewed

@@ -13,7 +13,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: 'baa2e7b69d8594b34bb3f87b10e50155fcb8bbeb', "has-counter": hasCounter }, hasCounter && h("div", { key: 'e1a29441395455061a92191c2a0d09cac29a1e3d', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'db2bf2c61f04cc0f0a6ac8cd17af5c083cea10f5', name: "icon" })), h("slot", { key: '9ab5693fccdaed92f15dce9c7a76b954f5b53693' })));
+        return (h(Host, { key: '49ad2a72f1a776d093c82afbc2843084575c2cdf', "has-counter": hasCounter }, hasCounter && h("div", { key: '76d449915cb077afa494e3527824b721772defa9', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '640640745b99f80117b9e97a80f9eb00b285b330', name: "icon" })), h("slot", { key: 'cdf119170cc1c86332eb9a8c249a741aa7174d94' })));
     }
     get element() { return this; }
     static get style() { return highlightBoxCss(); }

package/dist/components/dso-history-item.js CHANGED Viewed

@@ -46,7 +46,7 @@ const HistoryItem = /*@__PURE__*/ proxyCustomElement(class HistoryItem extends H
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h(Fragment, { key: '2e77d236980aed9e08e35161d001d17f1728a83b' }, h("div", { key: 'c0c0be85009c8f7d97c321a5bdbf43bda7a6f64b', class: "history-item-date" }, h("slot", { key: '099aefc48360345b5d55f6aebe5f9d29aefe59c9', name: "date" })), h("div", { key: 'c4da694c8b9659aecbd6a4594bb5f46dfa372456', class: "history-item-content" }, h("div", { key: '9fd28a25b87a15bf57442a7648834d57e6f260e6', class: "history-item-status-message" }, h("dso-icon", { key: 'cf331e4b19413148a68bafc6bc1849551bb6f435', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '8aa1952d43a8bdf28f63d81e3723e8634be9a0be', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '7128bf286bf5f92c4e061f7b06ad8a709fb88d87', class: "history-item-title" }, h("a", { key: '38635bb3ff0de20d5fdb8633bd5699112cfa753b', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6a0efc08c7f7d4283f6417505bb727dc4bab75d4', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '505111ed0bf510619c6814b89f01a4ed96f8e2bd', class: "history-item-explanation" }, h("slot", { key: '2b27be5812d5b62e11da7b1a1d4da0c68dd1f625', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '6f6b7e404bf94a00c0835098470d00b70ba5203b', class: "history-item-warning" }, h("dso-icon", { key: '1e8c8c07ebed9ccb58f21f9b2a6c279510b19e4b', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'df67c18e8aea8dfabf5e9ca5cbd33cb0cba0d47b', name: "warning" }))))));
+        return (h(Fragment, { key: '540840de191624a2a899117ab993346ad010addf' }, h("div", { key: 'a6c83fd5a9f776ff6a9af660bc52f6c9aa40e609', class: "history-item-date" }, h("slot", { key: 'cbec4ec21d97bcd969f2d757d118378e5bc99b80', name: "date" })), h("div", { key: '5d2ebd3b7669d770b1f6c4f87aab2dfef24ecb7d', class: "history-item-content" }, h("div", { key: 'da987825824c7b0b9d77d55b6a7756c2a057d9b5', class: "history-item-status-message" }, h("dso-icon", { key: '1efaac069ba0b9a9809f574ff87d0bd72e00fc54', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '4a0cb1eb1af2997086c895e50d79d9d60916d402', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '6f469044cc80f25ea3b8e29b572e4832a9c05cd3', class: "history-item-title" }, h("a", { key: '1b8872feb8d4fe27c8849abc804da2159ca57882', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'ecb8d1339350840104fa20ce9809feadc507f100', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '68e8f7a37f9a9dc77723ab7c1e357acf0c1ec107', class: "history-item-explanation" }, h("slot", { key: '964f77c8f75253092be241b72fe8e189ef908a46', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: 'b7687ba9fb1ba7ca3c9d87a3a3225e2e535e7d0f', class: "history-item-warning" }, h("dso-icon", { key: '02d0b36eb925ba6a6b187f329066c9326b014e00', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'b2a75c28f4523afa1c96409fbd7d970ac6772d90', name: "warning" }))))));
     }
     get host() { return this; }
     static get style() { return historyItemCss(); }

package/dist/components/dso-input-range.js CHANGED Viewed

@@ -19,13 +19,13 @@ const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends HTM
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), h("span", { key: '91eeb869d8529a793ab25c766cb38b75dd388ba7', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '98734659f11a5d9793f76b7ebd170b56fe1ef965', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: 'd187af008bb6acdfacf391f509ab83d17eaef891', id: "description", hidden: true }, this.description)), h("span", { key: 'f1041606979f3cb05eec80fae45d2ea8c901fadf', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '18d055df50d550b68b11511fab87cc3e9bd17bae', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '04774c80c6ac969cf1338d3b4ea39dabf531539b', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '0c10b36570bf6ccbadf38e5b110d3b8f5c950521', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return this; }
     static get style() { return inputRangeCss(); }

package/dist/components/dso-legend-item.js CHANGED Viewed

@@ -27,7 +27,7 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends HTM
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
-        this.mutationObserver.observe(this.host, { attributes: true, childList: true });
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
     }
     disconnectedCallback() {
         var _a;
@@ -43,7 +43,12 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends HTM
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: 'f753caaecc4aeab79b89a20e1557a655b04cb260', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'a75c1d97fbbe89266574689c01f7a32df686d69b', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'a7f6cc12d291a5cd177a2d32c7ad3630ab389ea2' }, h("slot", { key: 'ba092f9b9282783c791b9a866aa553d5de0dff7f', name: "symbol" }))), h("div", { key: '89ba0029501e16008fc591447abf5da85064a247' }, h("slot", { key: 'ea1eddba325f2ee5dc3d993a796bcd08035ca3c1' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '7ae2b598a535263de28dcaa2cb285f21a25ca29e', position: "bottom" }, this.disabledMessage)), h("div", { key: '8b5ea6746505207e4aec98ef9ea794b2263f8a3a', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: 'f1cbd32b832722464e312efb7fed5b73e5985952', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '99a2ff880a4de5fc5167fc1ca3fadf467e83f70d', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'e38b48835e20002548cc8c5bdf14543a077983f0', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '216cf4002d7666e9ae8452efa219dd8f8eed250d', name: "options" })))));
+        const label = this.host.querySelector("span[slot='label']");
+        let accessibleLabel = "Maak actief";
+        if (label === null || label === void 0 ? void 0 : label.textContent) {
+            accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
+        }
+        return (h(Host, { key: '113e4cc95985fed9befcc75cf7dd49d431a6a724', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '32b00c02feaa2107691c0f57cb508be44417033b', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '7fedb010d0ff7d53acddef537be6c6009f250f84' }, h("slot", { key: 'a566482b9b60fe5e69f74d2af4c3c093f01c8665', name: "symbol" }))), h("div", { key: 'd6c4fbe4e9dfbf52dd02255d3bad704de7edb313' }, h("slot", { key: 'bfa9d87992c0cab9d034260153e634158f4b6c3a', name: "label" })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '13927a8346bf1c2b34c83bcc5ab9fed9e3394789', position: "bottom" }, this.disabledMessage)), h("div", { key: 'daf55817441d0156625630afb68be8209a7ff96a', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: '15d1448d3338cda2bae8c395f1a376f5c8b37449', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '851d2b0d696a8c2271f3ae5a610115606773899c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'b29ccf455d9326c56ec6f9d5cbc3d07302718773', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '8ce07dd6a490e7853ab464690af7a07f23bc7cae', name: "options" })))));
     }
     get host() { return this; }
     static get style() { return legendItemCss(); }

package/dist/components/dso-legend-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-legend-item.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,kzBAAkzB,CAAC;;~~MC0Bn0B~~,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;AASE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAuChB,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;~~AA0EpB~~;~~IAtEC~~,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;~~AAE1E~~,~~QAAA,~~IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;~~IAGjF~~,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAG9B,IAAA,IAAI,oBAAoB,GAAA;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC;;AAGnD,IAAA,IAAI,qBAAqB,GAAA;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC;;IAGpD,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI;AACpD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,KAAK,IAAI;~~AAEtD~~,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAA,EAChG,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC,EAAA,EACjE,SAAS,KACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,~~CAAQ~~,~~CACJ~~,EACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,KACpC,CAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,eAAe,CAAiB,CACxE,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACnC,IAAI,CAAC,MAAM,IAAI,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC1C,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,EACnC,EAAE,EAAC,aAAa,EAChB,UAAU,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EAAA,CACxD,CACH,EACA,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,eAAe,~~EAAC~~,~~aAAa~~,~~EAC7B~~,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAE,CAAC,CAAC,KACnB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,CAEpG,CACH,CACG,CACF,EACL,UAAU,KACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,SAAS,EAAA,EAC9D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACP,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.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@use \"~dso-toolkit/src/global/mixins/symbol.mixins\" as symbol-mixins;\r\n@use \"legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(span[slot=\"symbol\"]) {\r\n @include symbol-mixins.symbolContainer(\r\n legend-item-variables.$symbol-block-size,\r\n legend-item-variables.$symbol-inline-size\r\n );\r\n}\r\n\r\n::slotted(h3) {\r\n margin: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"options\"]) {\r\n margin-block-start: units.$u1;\r\n}\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol + .options {\r\n margin-block-start: units.$u1;\r\n }\r\n\r\n dso-icon-button.active {\r\n --_dso-icon-button-tertiary-color: #{colors.$bosgroen-140};\r\n }\r\n}\r\n\r\n.legend-item-right-content {\r\n margin-inline-start: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-content: center;\r\n align-items: center;\r\n\r\n dso-slide-toggle {\r\n display: flex;\r\n align-self: center;\r\n line-height: 1;\r\n margin-inline-start: 8px;\r\n padding-block-start: 0 !important;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n /\r\n@Component({\r\n tag: \"dso-legend-item\",\r\n styleUrl: \"legend-item.scss\",\r\n shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoLegendItemElement;\r\n\r\n /\r\n To disable the Legend Item\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Message to be shown behind a toggletip when the Legend Item is disabled\r\n /\r\n @Prop()\r\n disabledMessage?: string;\r\n\r\n /\r\n Controls whether this Legend Item can be active or not\r\n /\r\n @Prop({ reflect: true })\r\n activatable?: boolean;\r\n\r\n /\r\n Controls whether this Legend Item is active or not\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n /\r\n Emitted when the mouse enters the Legend Item\r\n /\r\n @Event()\r\n dsoMouseEnter!: EventEmitter;\r\n\r\n /\r\n Emitted when the mouse leaves the Legend Item\r\n */\r\n @Event()\r\n dsoMouseLeave!: EventEmitter;\r\n\r\n @State()\r\n showOptions = false;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get optionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='options']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n {hasSymbol && (\r\n <div>\r\n <slot name=\"symbol\" />\r\n </div>\r\n )}\r\n <div>\r\n <slot />\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n\r\n <div class=\"legend-item-right-content\">\r\n {this.active && hasOptions && !this.disabled && (\r\n <dso-icon-button\r\n label=\"Opties\"\r\n icon=\"more\"\r\n variant=\"tertiary\"\r\n class={{ active: this.showOptions }}\r\n id=\"edit-button\"\r\n onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n />\r\n )}\r\n {this.activatable && (\r\n <dso-slide-toggle\r\n accessibleLabel~~=\"Maak actief~~\"\r\n checked={this.active}\r\n disabled={this.disabled}\r\n onDsoActiveChange={(e) =>\r\n this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n }\r\n />\r\n )}\r\n </div>\r\n </div>\r\n {hasOptions && (\r\n <div hidden={this.disabled \|\| !this.showOptions} class=\"options\">\r\n <slot name=\"options\" />\r\n </div>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-legend-item.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.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@use \"~dso-toolkit/src/global/mixins/symbol.mixins\" as symbol-mixins;\r\n@use \"legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(span[slot=\"symbol\"]) {\r\n @include symbol-mixins.symbolContainer(\r\n legend-item-variables.$symbol-block-size,\r\n legend-item-variables.$symbol-inline-size\r\n );\r\n}\r\n\r\n::slotted(h3) {\r\n margin: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"options\"]) {\r\n margin-block-start: units.$u1;\r\n}\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol + .options {\r\n margin-block-start: units.$u1;\r\n }\r\n\r\n dso-icon-button.active {\r\n --_dso-icon-button-tertiary-color: #{colors.$bosgroen-140};\r\n }\r\n}\r\n\r\n.legend-item-right-content {\r\n margin-inline-start: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-content: center;\r\n align-items: center;\r\n\r\n dso-slide-toggle {\r\n display: flex;\r\n align-self: center;\r\n line-height: 1;\r\n margin-inline-start: 8px;\r\n padding-block-start: 0 !important;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot label - The label for this Legend Item. Should be targetted with either `<h3 slot=\"label\">...</h3>` or\r\n * `<span slot=\"label\">...</span>`\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n /\r\n@Component({\r\n tag: \"dso-legend-item\",\r\n styleUrl: \"legend-item.scss\",\r\n shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoLegendItemElement;\r\n\r\n /\r\n To disable the Legend Item\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Message to be shown behind a toggletip when the Legend Item is disabled\r\n /\r\n @Prop()\r\n disabledMessage?: string;\r\n\r\n /\r\n Controls whether this Legend Item can be active or not\r\n /\r\n @Prop({ reflect: true })\r\n activatable?: boolean;\r\n\r\n /\r\n Controls whether this Legend Item is active or not\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n /\r\n Emitted when the mouse enters the Legend Item\r\n /\r\n @Event()\r\n dsoMouseEnter!: EventEmitter;\r\n\r\n /\r\n Emitted when the mouse leaves the Legend Item\r\n */\r\n @Event()\r\n dsoMouseLeave!: EventEmitter;\r\n\r\n @State()\r\n showOptions = false;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get optionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='options']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n const label = this.host.querySelector(\"span[slot='label']\");\r\n let accessibleLabel = \"Maak actief\";\r\n if (label?.textContent) {\r\n accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;\r\n }\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n {hasSymbol && (\r\n <div>\r\n <slot name=\"symbol\" />\r\n </div>\r\n )}\r\n <div>\r\n <slot name=\"label\" />\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n\r\n <div class=\"legend-item-right-content\">\r\n {this.active && hasOptions && !this.disabled && (\r\n <dso-icon-button\r\n label=\"Opties\"\r\n icon=\"more\"\r\n variant=\"tertiary\"\r\n class={{ active: this.showOptions }}\r\n id=\"edit-button\"\r\n onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n />\r\n )}\r\n {this.activatable && (\r\n <dso-slide-toggle\r\n accessibleLabel={accessibleLabel}\r\n checked={this.active}\r\n disabled={this.disabled}\r\n onDsoActiveChange={(e) =>\r\n this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n }\r\n />\r\n )}\r\n </div>\r\n </div>\r\n {hasOptions && (\r\n <div hidden={this.disabled \|\| !this.showOptions} class=\"options\">\r\n <slot name=\"options\" />\r\n </div>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-legend.js CHANGED Viewed

@@ -75,7 +75,7 @@ const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends HTMLElement
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
+        return (h(Host, { key: '26e817d9f760e220fcba00aed980bf2bd7ee1697' }, h("div", { key: 'd9fed11954d8f4df4480fae12d361e134aafe7f3', class: "topbar" }, h("div", { key: 'e9f21c805928ffee5ee26293011704983ca46ebd', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '1c51e117733829cd351074be0ace4dad008f1eeb', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: 'ef59ecc0c8221fbbec78df269b476aa43872a138', class: "content" }, h("div", { key: '6f4f8d627425c6d85c39953e0355ee2c48b969d5', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '2a57288315327f31330eb2389f0b0d01de51a783' })))));
     }
     get host() { return this; }
     static get style() { return legendCss(); }

package/dist/components/dso-list-button.js CHANGED Viewed

@@ -133,8 +133,6 @@ const listButtonCss = () => `*,
   background-color: #fff;
   border-color: #e5e5e5;
   color: #666;
-}
-.dso-button-group.dso-disabled > * {
   pointer-events: none;
 }
 .dso-button-group > * {
@@ -158,8 +156,6 @@ const listButtonCss = () => `*,
   flex-wrap: nowrap;
   padding-block: 0;
   padding-inline: 16px;
-}
-.dso-button-group > .dso-input-number {
   background-color: #fff;
   border-color: #ccc;
   color: #191919;
@@ -177,8 +173,6 @@ const listButtonCss = () => `*,
 }
 .dso-button-group > *.dso-selected + .dso-input-number {
   box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
-}
-.dso-button-group > *.dso-selected + .dso-input-number {
   background-color: #fff;
   border-color: #39870c;
   color: #191919;
@@ -194,10 +188,6 @@ const listButtonCss = () => `*,
 .dso-button-group > *[disabled] + .dso-input-number,
 .dso-button-group > *[disabled] + .dso-input-number:hover {
   opacity: 1;
-}
-.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
-.dso-button-group > *[disabled] + .dso-input-number,
-.dso-button-group > *[disabled] + .dso-input-number:hover {
   background-color: #fff;
   border-color: #ccc;
   color: #666;
@@ -227,8 +217,6 @@ const listButtonCss = () => `*,
   background-color: #fff;
   border-color: #ccc;
   color: #191919;
-}
-.dso-list-button {
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;
@@ -255,8 +243,6 @@ const listButtonCss = () => `*,
   background-color: #fff;
   border-color: #ccc;
   color: #666;
-}
-.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {
   opacity: 1;
 }
 .dso-list-button dso-selectable:not(:last-child) {
@@ -377,7 +363,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'a155334345712bda3dd58924d60ccd467923f6fc', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '5f1430413821bc31c793b2ccaed2a00509a3cfc6', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '97302b35983f8659e51b7993619c5d007b9eadc5', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '6e0fe1caffbfdfa878b904f558b695def1c18f6f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '9bfec93907458641755c109304a453ebf728b4ad', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'e3feb6e6f3aa1f42efa2e632180459b61a22a7a0', class: "subcontent" }, h("slot", { key: '2971bc8037dabb734ecaf3faf1c338a3537fcac6', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '46543874c528b6db91fed7dd19249dc7547bb86b', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'cf2305047c3bf6f8384829c694ef57642bdd9bbf' }, h("dso-icon-button", { key: '6170297a6ce2a60762ba4bf96e59f49097e80d38', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'e5c419497219f628e34bfdb997fe3b357a9331bd', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '225eed4514828a7f1afa06f2c6de8af19ada8b8d', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '18524f23f0f7ee53d1d58a44bbf7a52da891a242', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'a4791c2417d2c1ef254fa461a418344001af619c', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'ba27873a3c361e208b323e25303959e003186fa0', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '18bf1b4be461a2c2d77bb27c728a783a61ac0a45', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'ab2069ddc2706ccf1c1b7c19e786d882282ddac8', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'dd68b887c2d357747c3a2e55c2a49666b1af93c0', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '224c0c30be29f1fbc6e981dcca12159ff64afc21', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '2ed6a6a284dc1cd3b2fc1bb1467814a512c6ff6b', class: "subcontent" }, h("slot", { key: '0bc0b5571e506bdc1f8373c483df5c44c870faac', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'e1ec7ea4e1fbd2f0e59bf0072615cd4561dbb2f0', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '3d56e5a0f3df0cec7de1bc8c3dcd086403d81061' }, h("dso-icon-button", { key: '177fa0949a44859cb1a041898536b2052c96bf47', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '971408d54dab124c80df07dcfe9a74d0f0a7878a', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '6e195268e820c57e707f200164c1d1445b0d53af', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     get host() { return this; }
     static get style() { return listButtonCss(); }