npm - @dso-toolkit/core - Versions diffs - 64.0.0 → 65.0.0 - Mend

@dso-toolkit/core 64.0.0 → 65.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 (316) hide show

package/dist/cjs/dso-annotation-omgevingsnormwaarde.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-848434f1.js');
 const annotationBody = require('./annotation-body-b062e93f.js');
 const annotationSymbolSlot = require('./annotation-symbol-slot-e9741f0b.js');
-const annotationCss = "a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}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:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-email-scampi\")}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919;text-decoration:line-through}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}*,*::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}.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}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}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:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-email-scampi\")}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([wijzigactie=verwijder]){text-decoration:line-through}*,*::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}.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 DsoAnnotationOmgevingsnormwaardeStyle0 = annotationCss;
 const AnnotationOmgevingsnormwaarde = class {

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

	@@ -1 +1 @@
1	- {"file":"dso-annotation-omgevingsnormwaarde.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,~~gpIAAgpI~~,CAAC;~~AACvqI~~,+CAAe,aAAa;;MCkBf,6BAA6B;;;;QAoDhC,YAAO,GAAGA,4BAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;;;;;IAErC,iBAAiB;QACf,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;IAED,oBAAoB;QAClB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAE7C,QACEC,QAACC,6BAAc,qDACb,MAAM,EAAE,UAAU,GAAGD,QAACE,yCAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,KAAK,EAC5B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACHF,8BACEA,yBAAa,KAAK,EAAE,IAAI,CAAC,IAAI,GAAI,EAChC,IAAI,CAAC,OAAO,KACXA,8BACG,GAAG,UACAA,yBAAa,KAAK,EAAE,IAAI,CAAC,OAAO,GAAI,MACvC,CACJ,CACA,EAEL,IAAI,EACFA,8BACEA,kBAAM,KAAK,EAAC,SAAS,IAClB,IAAI,CAAC,WAAW,IAAIA,8BAAG,IAAI,CAAC,WAAW,OAAM,EAC9CA,yBAAa,KAAK,EAAE,IAAI,CAAC,OAAO,GAAI,CAC/B,EACN,IAAI,CAAC,iBAAiB,IAAIA,QAACG,gDAA2B,OAAG,CACzD,GAEL,EACF;KACH;;;;;;;","names":["watcher","h","AnnotationBody","AnnotationSymbolSlot","AnnotationGewijzigdeLocatie"],"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/anchor/anchor\";\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}\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, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\n\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.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 <dso-renvooi value={this.waardes} />\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.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,m+IAAm+I,CAAC;AAC1/I,+CAAe,aAAa;;MCkBf,6BAA6B;;;;QAoDhC,YAAO,GAAGA,4BAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;;;;;IAErC,iBAAiB;QACf,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;IAED,oBAAoB;QAClB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAE7C,QACEC,QAACC,6BAAc,qDACb,MAAM,EAAE,UAAU,GAAGD,QAACE,yCAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,KAAK,EAC5B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACHF,8BACEA,yBAAa,KAAK,EAAE,IAAI,CAAC,IAAI,GAAI,EAChC,IAAI,CAAC,OAAO,KACXA,8BACG,GAAG,UACAA,yBAAa,KAAK,EAAE,IAAI,CAAC,OAAO,GAAI,MACvC,CACJ,CACA,EAEL,IAAI,EACFA,8BACEA,kBAAM,KAAK,EAAC,SAAS,IAClB,IAAI,CAAC,WAAW,IAAIA,8BAAG,IAAI,CAAC,WAAW,OAAM,EAC9CA,yBAAa,KAAK,EAAE,IAAI,CAAC,OAAO,GAAI,CAC/B,EACN,IAAI,CAAC,iBAAiB,IAAIA,QAACG,gDAA2B,OAAG,CACzD,GAEL,EACF;KACH;;;;;;;","names":["watcher","h","AnnotationBody","AnnotationSymbolSlot","AnnotationGewijzigdeLocatie"],"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/anchor/anchor\";\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}\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, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\n\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.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 <dso-renvooi value={this.waardes} />\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/cjs/dso-autosuggest.cjs.entry.js CHANGED Viewed

@@ -158,7 +158,6 @@ const Autosuggest = class {
             }
             this.input.setAttribute("role", "combobox");
             this.input.setAttribute("aria-haspopup", "listbox");
-            this.input.setAttribute("aria-controls", this.listboxId);
             this.input.setAttribute("aria-expanded", "false");
             this.input.setAttribute("autocomplete", "off");
             this.input.setAttribute("aria-autocomplete", "list");
@@ -343,11 +342,18 @@ const Autosuggest = class {
     }
     render() {
         this.listboxItems = [];
-        return (index.h(index.Fragment, null, index.h("slot", { key: 'ed0429b1e8ccd17ed46b4fb742cbcb1e4287d056' }), this.loading && this.showLoading ? (index.h("div", { class: "autosuggest-progress-box" }, index.h("dso-progress-indicator", { label: this.loadingLabel }))) : (index.h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element), style: { "--max-block-size": `${this.listboxContainerMaxBlockSize}px` } }, index.h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
+        const showListbox = this.showSuggestions || this.notFound;
+        if (showListbox && this.input) {
+            this.input.setAttribute("aria-controls", this.listboxId);
+        }
+        else if (this.input) {
+            this.input.removeAttribute("aria-controls");
+        }
+        return (index.h(index.Fragment, null, index.h("slot", { key: '1585cf97f00dd15bb651fb51745f156bbbd75891' }), this.loading && this.showLoading ? (index.h("div", { class: "autosuggest-progress-box" }, index.h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (index.h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element), style: { "--max-block-size": `${this.listboxContainerMaxBlockSize}px` } }, index.h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element) }, (this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (index.h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value, ref: (li) => li && this.listboxItems.push(li) }, index.h("div", { class: "suggestion-row" }, index.h("span", { class: "value" }, this.handleMark(suggestion, suggestion.value, "value")), suggestion.type ? (index.h("span", { class: "type" }, this.handleMark(suggestion, suggestion.type, "type"))) : undefined), suggestion.extras &&
                 this.getChunkedExtras(suggestion.extras).map((chunk, index$1) => (index.h("div", { class: "suggestion-row" }, chunk.map((c, i) => (index.h("span", { class: "extra" }, this.handleMark(suggestion, c, "extra", index$1 * 2 + i))))))))))) ||
-            (this.notFound && (index.h("li", null, index.h("span", { class: "value" }, !this.notFoundLabel ? (this.showInputValueNotFound(`${this.inputValue} is niet gevonden.`)) : (index.h("span", null, this.notFoundLabel)))))))))));
+            (this.notFound && (index.h("li", null, index.h("span", { class: "value" }, !this.notFoundLabel ? (this.showInputValueNotFound(`${this.inputValue} is niet gevonden.`)) : (index.h("span", null, this.notFoundLabel))))))))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/dso-autosuggest.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-autosuggest.entry.cjs.js","mappings":"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","names":["v4","debounce","h","index"],"sources":["../../node_modules/escape-string-regexp/index.js","src/components/autosuggest/autosuggest.scss?tag=dso-autosuggest&encapsulation=scoped","src/components/autosuggest/autosuggest.tsx"],"sourcesContent":["export default function escapeStringRegexp(string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string');\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it’s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.\n\treturn string\n\t\t.replace(/[\|\\\\{}()[\\]^$+?.]/g, '\\\\$&')\n\t\t.replace(/-/g, '\\\\x2d');\n}\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"autosuggest.variables\" as core-autosuggest-variables;\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n}\r\n\r\n.listbox-container {\r\n inset-inline: 0;\r\n inset-block-start: 100%;\r\n block-size: auto;\r\n max-block-size: var(--max-block-size);\r\n min-block-size: core-autosuggest-variables.$listbox-min-block-size;\r\n overflow-y: auto;\r\n position: absolute;\r\n z-index: zindex.$autosuggest;\r\n}\r\n\r\nul,\r\n.autosuggest-progress-box {\r\n background-clip: padding-box;\r\n background-color: core-autosuggest-variables.$background-color;\r\n border: core-autosuggest-variables.$listbox-border-width solid core-autosuggest-variables.$border-color;\r\n border-radius: scaffolding.$border-radius-base;\r\n box-shadow: core-autosuggest-variables.$box-shadow;\r\n list-style-type: none;\r\n margin-block: 0;\r\n}\r\n\r\n.autosuggest-progress-box {\r\n padding-block: units.$u1 1.5;\r\n padding-inline: units.$u1;\r\n}\r\n\r\nul {\r\n padding-block: core-autosuggest-variables.$listbox-padding-block;\r\n padding-inline: 0;\r\n\r\n li {\r\n padding-block: core-autosuggest-variables.$list-item-padding-block;\r\n padding-inline: units.$u2;\r\n\r\n .suggestion-row {\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n }\r\n}\r\n\r\nli[aria-selected=\"true\"] {\r\n cursor: pointer;\r\n background-color: colors.$grasgroen;\r\n\r\n &,\r\n .type,\r\n .extra {\r\n color: colors.$wit;\r\n }\r\n}\r\n\r\nmark {\r\n font-weight: 700;\r\n background-color: inherit;\r\n color: inherit;\r\n padding: 0;\r\n}\r\n\r\n.type,\r\n.extra {\r\n color: colors.$grijs-60;\r\n}\r\n\r\n.type {\r\n text-align: end;\r\n}\r\n\r\n.extra {\r\n font-size: typography.$root-font-size-small;\r\n line-height: typography.$root-font-size-small * typography.$line-height-base;\r\n\r\n &:not(:first-child) {\r\n text-align: end;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Listen, Prop, State, VNode, Watch } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { v4 } from \"uuid\";\r\nimport escapeStringRegexp from \"escape-string-regexp\";\r\n\r\nimport { AutosuggestMarkFunction, AutosuggestMarkItem, Suggestion } from \"./autosuggest.interfaces\";\r\n\r\nconst maxSuggestionsViewable = 10;\r\nconst listboxPaddingBlock = 8;\r\nconst listboxBorderWidth = 1;\r\n\r\n@Component({\r\n tag: \"dso-autosuggest\",\r\n styleUrl: \"autosuggest.scss\",\r\n scoped: true,\r\n})\r\nexport class Autosuggest {\r\n /*\r\n The suggestions for the value of the slotted input element. Optionally a\r\n * Suggestion can have a `type` and `item`.\r\n \r\n The `type` is used to style the suggestion. `item` can be use to reference\r\n * the original object that was used to create the suggestion.\r\n \r\n The value should be null when no suggestions have been fetched.\r\n /\r\n @Prop()\r\n readonly suggestions: Suggestion[] \| null = null;\r\n\r\n /\r\n Shows progress indicator when fetching results.\r\n /\r\n @Prop()\r\n loading = false;\r\n\r\n /\r\n To override progress indicator's default loading label.\r\n /\r\n @Prop()\r\n loadingLabel?: string = \"Een moment geduld.\";\r\n\r\n /\r\n To delay progress indicator showing (in ms).\r\n /\r\n @Prop()\r\n loadingDelayed?: number;\r\n\r\n /\r\n To show text when no results are found.\r\n /\r\n @Prop()\r\n notFoundLabel?: string;\r\n\r\n /\r\n Whether the previous suggestions will be presented when the input gets focus again.\r\n /\r\n @Prop()\r\n suggestOnFocus = false;\r\n\r\n /\r\n A function provided by the consumer of the autosuggest component, that returns an array of `AutosuggestMarkItem`s\r\n /\r\n @Prop()\r\n mark?: AutosuggestMarkFunction;\r\n\r\n /\r\n Emitted when a suggestion is selected.\r\n * The `detail` property of the `CustomEvent` will contain the selected suggestion.\r\n /\r\n @Event()\r\n dsoSelect!: EventEmitter<Suggestion>;\r\n\r\n /\r\n This is emitted debounced for every change for the slotted input type=text element.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<string>;\r\n\r\n /\r\n Emitted when enter is pressed.\r\n * The `detail` property of the `CustomEvent` will contain the input text.\r\n /\r\n @Event()\r\n dsoSearch!: EventEmitter<string>;\r\n\r\n @Element()\r\n host!: HTMLDsoAutosuggestElement;\r\n\r\n @State()\r\n showSuggestions = false;\r\n\r\n @State()\r\n selectedSuggestion: Suggestion \| undefined;\r\n\r\n @State()\r\n notFound = false;\r\n\r\n @State()\r\n showLoading = false;\r\n\r\n @State()\r\n listItemBlockSize = 0;\r\n\r\n @State()\r\n listboxContainerMaxBlockSize = 0;\r\n\r\n @Watch(\"suggestions\")\r\n suggestionsWatcher() {\r\n this.resetSelectedSuggestion();\r\n\r\n if ((!this.showSuggestions \|\| !this.notFound) && this.inputValue) {\r\n this.openSuggestions();\r\n } else if ((this.showSuggestions \|\| this.notFound) && !this.inputValue) {\r\n this.closeSuggestions();\r\n }\r\n }\r\n\r\n private input?: HTMLInputElement;\r\n\r\n private listboxContainer: HTMLDsoScrollableElement \| undefined;\r\n\r\n private listbox: HTMLUListElement \| undefined;\r\n\r\n private listboxItems: HTMLLIElement[] = [];\r\n\r\n private listboxId: string = v4();\r\n\r\n private inputId: string = v4();\r\n\r\n private labelId: string = v4();\r\n\r\n private resizeObserver = new ResizeObserver(debounce(() => this.setListboxContainerMaxBlockSize(), 150));\r\n\r\n private debouncedEmitValue = debounce((value: string) => {\r\n this.dsoChange.emit(value);\r\n this.debouncedShowLoading();\r\n }, 200);\r\n\r\n private debouncedShowLoading = debounce(() => {\r\n if (this.inputValue) {\r\n this.showLoading = true;\r\n }\r\n }, this.loadingDelayed);\r\n\r\n private inputValue = \"\";\r\n\r\n private onInput = (event: Event) => {\r\n if (!(event.target instanceof HTMLInputElement)) {\r\n return;\r\n // throw new Error(\"event.target is not instanceof HTMLInputElement\"); #2293\r\n }\r\n\r\n this.showLoading = !this.loadingDelayed;\r\n this.inputValue = event.target.value;\r\n this.debouncedEmitValue(event.target.value.match(/(\\S+)/g) ? event.target.value : \"\");\r\n };\r\n\r\n private onFocusIn = () => {\r\n if (this.suggestOnFocus) {\r\n this.openSuggestions();\r\n }\r\n };\r\n\r\n @Listen(\"click\", { target: \"document\" })\r\n onDocumentClick(event: MouseEvent) {\r\n if (\r\n (this.showSuggestions \|\| this.notFound) &&\r\n this.listbox &&\r\n event.target instanceof Node &&\r\n !this.listbox.contains(event.target) &&\r\n this.input !== event.target\r\n ) {\r\n this.closeSuggestions();\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n this.setListboxContainerMaxBlockSize();\r\n }\r\n\r\n connectedCallback() {\r\n setTimeout(() => {\r\n const input = this.host.querySelector('input[type=\"text\"]');\r\n if (!(input instanceof HTMLInputElement)) {\r\n return;\r\n // throw new ReferenceError(\"Mandatory text input not found\"); #2293\r\n }\r\n\r\n this.input = input;\r\n if (input.id) {\r\n this.inputId = input.id;\r\n } else {\r\n input.id = this.inputId;\r\n }\r\n\r\n if (!this.input.labels \|\| this.input.labels.length < 1) {\r\n return;\r\n // throw new ReferenceError(\"Mandatory label for text input not found\"); #2293\r\n }\r\n\r\n const label = this.input.labels[0];\r\n if (label?.id) {\r\n this.labelId = label.id;\r\n } else if (label) {\r\n label.id = this.labelId;\r\n }\r\n\r\n this.input.setAttribute(\"role\", \"combobox\");\r\n this.input.setAttribute(\"aria-haspopup\", \"listbox\");\r\n this.input.setAttribute(\"aria-controls\", this.listboxId);\r\n this.input.setAttribute(\"aria-expanded\", \"false\");\r\n this.input.setAttribute(\"autocomplete\", \"off\");\r\n this.input.setAttribute(\"aria-autocomplete\", \"list\");\r\n this.input.setAttribute(\"aria-activedescendant\", \"\");\r\n this.input.addEventListener(\"input\", this.onInput);\r\n this.input.addEventListener(\"keydown\", this.onKeyDown);\r\n this.input.addEventListener(\"focusin\", this.onFocusIn);\r\n\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n\r\n document.addEventListener(\"scrollend\", this.onScrollend);\r\n\r\n this.resizeObserver.observe(this.host);\r\n\r\n this.setListboxContainerMaxBlockSize();\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.input?.removeEventListener(\"input\", this.onInput);\r\n this.input?.removeEventListener(\"keydown\", this.onKeyDown);\r\n this.input?.removeEventListener(\"focusin\", this.onFocusIn);\r\n\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n\r\n document.removeEventListener(\"scrollend\", this.onScrollend);\r\n\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n private onWindowResize = debounce(() => this.setListboxContainerMaxBlockSize(), 150);\r\n\r\n private onScrollend = () => this.setListboxContainerMaxBlockSize();\r\n\r\n private setListboxContainerMaxBlockSize(): void {\r\n if (!this.listboxContainer \|\| !this.showSuggestions) {\r\n return;\r\n }\r\n\r\n if (this.listboxItems[0] && this.showSuggestions) {\r\n this.listItemBlockSize = this.listboxItems[0].getBoundingClientRect().height;\r\n }\r\n\r\n const availableBlockSize = window.innerHeight - this.host.getBoundingClientRect().bottom;\r\n const listboxMaxBlockSize =\r\n this.listItemBlockSize maxSuggestionsViewable + 2 * listboxPaddingBlock + 2 * listboxBorderWidth;\r\n\r\n if (availableBlockSize > this.listItemBlockSize) {\r\n if (availableBlockSize < listboxMaxBlockSize) {\r\n this.listboxContainerMaxBlockSize = availableBlockSize - 2 * listboxPaddingBlock;\r\n } else {\r\n this.listboxContainerMaxBlockSize = listboxMaxBlockSize;\r\n }\r\n }\r\n }\r\n\r\n private showInputValueNotFound(text: string) {\r\n return this.processAutosuggestMarkItems(this.markTerms(text, this.input?.value.split(\" \").filter((t) => t) ?? []));\r\n }\r\n\r\n private handleMark(\r\n suggestion: Suggestion,\r\n text: string,\r\n type?: \"value\" \| \"type\" \| \"extra\",\r\n extraIndex?: number,\r\n ): (VNode \| string)[] {\r\n if (this.mark && type) {\r\n return this.processAutosuggestMarkItems(this.mark(suggestion, text, type, extraIndex));\r\n }\r\n return this.processAutosuggestMarkItems(this.markTerms(text, this.input?.value.split(\" \").filter((t) => t) ?? []));\r\n }\r\n\r\n private markTerms(suggestionValue: string, terms: string[]): AutosuggestMarkItem[] {\r\n if (!suggestionValue \|\| !terms \|\| terms.length === 0 \|\| terms[0] === undefined) {\r\n return [\"\"];\r\n }\r\n\r\n const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, \"gi\");\r\n\r\n return suggestionValue.split(termRegex).reduce((total: AutosuggestMarkItem[], valuePart: string) => {\r\n if (!valuePart) {\r\n total.push(valuePart);\r\n } else if (termRegex.test(valuePart)) {\r\n total.push({ mark: valuePart });\r\n } else if (terms.length === 1) {\r\n total.push(valuePart);\r\n } else {\r\n total.push(...this.markTerms(valuePart, terms.slice(1)));\r\n }\r\n\r\n return total;\r\n }, []);\r\n }\r\n\r\n private processAutosuggestMarkItems(items: AutosuggestMarkItem[]): (VNode \| string)[] {\r\n if (items.length === 0) {\r\n return [\"\"];\r\n }\r\n\r\n return items.map((item) => {\r\n if (typeof item === \"object\") {\r\n return <mark>{item.mark}</mark>;\r\n }\r\n return item;\r\n });\r\n }\r\n\r\n private selectSuggestion(suggestion: Suggestion) {\r\n this.selectedSuggestion = suggestion;\r\n\r\n this.setAriaActiveDescendant();\r\n }\r\n\r\n private selectFirstSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n this.selectedSuggestion = this.suggestions[0];\r\n\r\n this.setAriaActiveDescendant(true);\r\n }\r\n\r\n private selectLastSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];\r\n\r\n this.setAriaActiveDescendant(true);\r\n }\r\n\r\n private selectNextSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;\r\n\r\n this.selectedSuggestion = this.suggestions[index + 1] ?? this.suggestions[0];\r\n\r\n this.setAriaActiveDescendant(true);\r\n }\r\n\r\n private selectPreviousSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;\r\n\r\n this.selectedSuggestion = this.suggestions[index - 1] ?? this.suggestions[this.suggestions.length - 1];\r\n\r\n this.setAriaActiveDescendant(true);\r\n }\r\n\r\n private setAriaActiveDescendant(scroll = false): void {\r\n if (this.selectedSuggestion) {\r\n const id = this.listboxItemId(this.selectedSuggestion);\r\n this.input?.setAttribute(\"aria-activedescendant\", id);\r\n if (scroll) {\r\n document.getElementById(id)?.scrollIntoView({ block: \"nearest\" });\r\n }\r\n }\r\n }\r\n\r\n private resetSelectedSuggestion() {\r\n this.showLoading = !this.loadingDelayed;\r\n this.notFound = false;\r\n this.selectedSuggestion = undefined;\r\n this.input?.setAttribute(\"aria-activedescendant\", \"\");\r\n }\r\n\r\n private openSuggestions(selectSuggestion?: \"first\" \| \"last\") {\r\n this.showSuggestions = (this.suggestions && this.suggestions.length > 0) ?? false;\r\n this.notFound = (this.suggestions && this.suggestions?.length === 0) ?? false;\r\n this.input?.setAttribute(\"aria-expanded\", (this.showSuggestions \|\| this.notFound).toString());\r\n\r\n if (this.showSuggestions && selectSuggestion === \"first\") {\r\n this.selectFirstSuggestion();\r\n } else if (this.showSuggestions && selectSuggestion === \"last\") {\r\n this.selectLastSuggestion();\r\n }\r\n }\r\n\r\n private closeSuggestions() {\r\n this.showSuggestions = false;\r\n this.notFound = false;\r\n this.input?.setAttribute(\"aria-expanded\", \"false\");\r\n this.selectFirstSuggestion();\r\n }\r\n\r\n private pickSelectedValue() {\r\n if (this.selectedSuggestion && this.showSuggestions) {\r\n this.dsoSelect.emit(this.selectedSuggestion);\r\n } else {\r\n this.dsoSearch.emit(this.input?.value);\r\n }\r\n\r\n this.closeSuggestions();\r\n }\r\n\r\n private onKeyDown = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented \|\| this.loading) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n if (!this.showSuggestions) {\r\n this.openSuggestions(\"first\");\r\n } else {\r\n this.selectNextSuggestion();\r\n }\r\n\r\n break;\r\n\r\n case \"ArrowUp\":\r\n if (!this.showSuggestions) {\r\n this.openSuggestions(\"last\");\r\n } else {\r\n this.selectPreviousSuggestion();\r\n }\r\n\r\n break;\r\n\r\n case \"Tab\":\r\n this.closeSuggestions();\r\n return;\r\n\r\n case \"Escape\":\r\n this.closeSuggestions();\r\n break;\r\n\r\n case \"Enter\":\r\n this.pickSelectedValue();\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private listboxItemId(suggestion: Suggestion): string {\r\n if (!this.suggestions) {\r\n return \"\";\r\n }\r\n return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;\r\n }\r\n\r\n private getChunkedExtras(extras: string[]): string[][] {\r\n return extras.reduce((resultArray: string[][], extra, index) => {\r\n const chunkIndex = Math.floor(index / 2);\r\n\r\n if (!resultArray[chunkIndex]) {\r\n resultArray[chunkIndex] = [];\r\n }\r\n resultArray[chunkIndex]?.push(extra);\r\n return resultArray;\r\n }, []);\r\n }\r\n\r\n render() {\r\n this.listboxItems = [];\r\n\r\n return (\r\n <>\r\n <slot />\r\n {this.loading && this.showLoading ? (\r\n <div class=\"autosuggest-progress-box\">\r\n <dso-progress-indicator label={this.loadingLabel}></dso-progress-indicator>\r\n </div>\r\n ) : (\r\n <dso-scrollable\r\n class=\"listbox-container\"\r\n ref={(element) => (this.listboxContainer = element)}\r\n style={{ \"--max-block-size\": `${this.listboxContainerMaxBlockSize}px` }}\r\n >\r\n <ul\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n id={this.listboxId}\r\n aria-labelledby={this.labelId}\r\n ref={(element) => (this.listbox = element)}\r\n hidden={!this.showSuggestions && !this.notFound}\r\n >\r\n {(this.showSuggestions &&\r\n this.suggestions &&\r\n this.suggestions.map((suggestion) => (\r\n <li\r\n role=\"option\"\r\n id={this.listboxItemId(suggestion)}\r\n key={suggestion.value}\r\n onMouseEnter={() => this.selectSuggestion(suggestion)}\r\n onMouseLeave={() => this.resetSelectedSuggestion()}\r\n onClick={() => this.pickSelectedValue()}\r\n aria-selected={(suggestion === this.selectedSuggestion).toString()}\r\n aria-label={suggestion.value}\r\n ref={(li) => li && this.listboxItems.push(li)}\r\n >\r\n <div class=\"suggestion-row\">\r\n <span class=\"value\">{this.handleMark(suggestion, suggestion.value, \"value\")}</span>\r\n {suggestion.type ? (\r\n <span class=\"type\">{this.handleMark(suggestion, suggestion.type, \"type\")}</span>\r\n ) : undefined}\r\n </div>\r\n {suggestion.extras &&\r\n this.getChunkedExtras(suggestion.extras).map((chunk, index) => (\r\n <div class=\"suggestion-row\">\r\n {chunk.map((c, i) => (\r\n <span class=\"extra\">{this.handleMark(suggestion, c, \"extra\", index * 2 + i)}</span>\r\n ))}\r\n </div>\r\n ))}\r\n </li>\r\n ))) \|\|\r\n (this.notFound && (\r\n <li>\r\n <span class=\"value\">\r\n {!this.notFoundLabel ? (\r\n this.showInputValueNotFound(`${this.inputValue} is niet gevonden.`)\r\n ) : (\r\n <span>{this.notFoundLabel}</span>\r\n )}\r\n </span>\r\n </li>\r\n ))}\r\n </ul>\r\n </dso-scrollable>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-autosuggest.entry.cjs.js","mappings":"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","names":["v4","debounce","h","index"],"sources":["../../node_modules/escape-string-regexp/index.js","src/components/autosuggest/autosuggest.scss?tag=dso-autosuggest&encapsulation=scoped","src/components/autosuggest/autosuggest.tsx"],"sourcesContent":["export default function escapeStringRegexp(string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string');\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it’s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.\n\treturn string\n\t\t.replace(/[\|\\\\{}()[\\]^$+?.]/g, '\\\\$&')\n\t\t.replace(/-/g, '\\\\x2d');\n}\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"autosuggest.variables\" as core-autosuggest-variables;\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n}\r\n\r\n.listbox-container {\r\n inset-inline: 0;\r\n inset-block-start: 100%;\r\n block-size: auto;\r\n max-block-size: var(--max-block-size);\r\n min-block-size: core-autosuggest-variables.$listbox-min-block-size;\r\n overflow-y: auto;\r\n position: absolute;\r\n z-index: zindex.$autosuggest;\r\n}\r\n\r\nul,\r\n.autosuggest-progress-box {\r\n background-clip: padding-box;\r\n background-color: core-autosuggest-variables.$background-color;\r\n border: core-autosuggest-variables.$listbox-border-width solid core-autosuggest-variables.$border-color;\r\n border-radius: scaffolding.$border-radius-base;\r\n box-shadow: core-autosuggest-variables.$box-shadow;\r\n list-style-type: none;\r\n margin-block: 0;\r\n}\r\n\r\n.autosuggest-progress-box {\r\n padding-block: units.$u1 1.5;\r\n padding-inline: units.$u1;\r\n}\r\n\r\nul {\r\n padding-block: core-autosuggest-variables.$listbox-padding-block;\r\n padding-inline: 0;\r\n\r\n li {\r\n padding-block: core-autosuggest-variables.$list-item-padding-block;\r\n padding-inline: units.$u2;\r\n\r\n .suggestion-row {\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n }\r\n}\r\n\r\nli[aria-selected=\"true\"] {\r\n cursor: pointer;\r\n background-color: colors.$grasgroen;\r\n\r\n &,\r\n .type,\r\n .extra {\r\n color: colors.$wit;\r\n }\r\n}\r\n\r\nmark {\r\n font-weight: 700;\r\n background-color: inherit;\r\n color: inherit;\r\n padding: 0;\r\n}\r\n\r\n.type,\r\n.extra {\r\n color: colors.$grijs-60;\r\n}\r\n\r\n.type {\r\n text-align: end;\r\n}\r\n\r\n.extra {\r\n font-size: typography.$root-font-size-small;\r\n line-height: typography.$root-font-size-small * typography.$line-height-base;\r\n\r\n &:not(:first-child) {\r\n text-align: end;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Listen, Prop, State, VNode, Watch } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { v4 } from \"uuid\";\r\nimport escapeStringRegexp from \"escape-string-regexp\";\r\n\r\nimport { AutosuggestMarkFunction, AutosuggestMarkItem, Suggestion } from \"./autosuggest.interfaces\";\r\n\r\nconst maxSuggestionsViewable = 10;\r\nconst listboxPaddingBlock = 8;\r\nconst listboxBorderWidth = 1;\r\n\r\n@Component({\r\n tag: \"dso-autosuggest\",\r\n styleUrl: \"autosuggest.scss\",\r\n scoped: true,\r\n})\r\nexport class Autosuggest {\r\n /*\r\n The suggestions for the value of the slotted input element. Optionally a\r\n * Suggestion can have a `type` and `item`.\r\n \r\n The `type` is used to style the suggestion. `item` can be use to reference\r\n * the original object that was used to create the suggestion.\r\n \r\n The value should be null when no suggestions have been fetched.\r\n /\r\n @Prop()\r\n readonly suggestions: Suggestion[] \| null = null;\r\n\r\n /\r\n Shows progress indicator when fetching results.\r\n /\r\n @Prop()\r\n loading = false;\r\n\r\n /\r\n To override progress indicator's default loading label.\r\n /\r\n @Prop()\r\n loadingLabel?: string = \"Een moment geduld.\";\r\n\r\n /\r\n To delay progress indicator showing (in ms).\r\n /\r\n @Prop()\r\n loadingDelayed?: number;\r\n\r\n /\r\n To show text when no results are found.\r\n /\r\n @Prop()\r\n notFoundLabel?: string;\r\n\r\n /\r\n Whether the previous suggestions will be presented when the input gets focus again.\r\n /\r\n @Prop()\r\n suggestOnFocus = false;\r\n\r\n /\r\n A function provided by the consumer of the autosuggest component, that returns an array of `AutosuggestMarkItem`s\r\n /\r\n @Prop()\r\n mark?: AutosuggestMarkFunction;\r\n\r\n /\r\n Emitted when a suggestion is selected.\r\n * The `detail` property of the `CustomEvent` will contain the selected suggestion.\r\n /\r\n @Event()\r\n dsoSelect!: EventEmitter<Suggestion>;\r\n\r\n /\r\n This is emitted debounced for every change for the slotted input type=text element.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<string>;\r\n\r\n /\r\n Emitted when enter is pressed.\r\n * The `detail` property of the `CustomEvent` will contain the input text.\r\n /\r\n @Event()\r\n dsoSearch!: EventEmitter<string>;\r\n\r\n @Element()\r\n host!: HTMLDsoAutosuggestElement;\r\n\r\n @State()\r\n showSuggestions = false;\r\n\r\n @State()\r\n selectedSuggestion: Suggestion \| undefined;\r\n\r\n @State()\r\n notFound = false;\r\n\r\n @State()\r\n showLoading = false;\r\n\r\n @State()\r\n listItemBlockSize = 0;\r\n\r\n @State()\r\n listboxContainerMaxBlockSize = 0;\r\n\r\n @Watch(\"suggestions\")\r\n suggestionsWatcher() {\r\n this.resetSelectedSuggestion();\r\n\r\n if ((!this.showSuggestions \|\| !this.notFound) && this.inputValue) {\r\n this.openSuggestions();\r\n } else if ((this.showSuggestions \|\| this.notFound) && !this.inputValue) {\r\n this.closeSuggestions();\r\n }\r\n }\r\n\r\n private input?: HTMLInputElement;\r\n\r\n private listboxContainer: HTMLDsoScrollableElement \| undefined;\r\n\r\n private listbox: HTMLUListElement \| undefined;\r\n\r\n private listboxItems: HTMLLIElement[] = [];\r\n\r\n private listboxId: string = v4();\r\n\r\n private inputId: string = v4();\r\n\r\n private labelId: string = v4();\r\n\r\n private resizeObserver = new ResizeObserver(debounce(() => this.setListboxContainerMaxBlockSize(), 150));\r\n\r\n private debouncedEmitValue = debounce((value: string) => {\r\n this.dsoChange.emit(value);\r\n this.debouncedShowLoading();\r\n }, 200);\r\n\r\n private debouncedShowLoading = debounce(() => {\r\n if (this.inputValue) {\r\n this.showLoading = true;\r\n }\r\n }, this.loadingDelayed);\r\n\r\n private inputValue = \"\";\r\n\r\n private onInput = (event: Event) => {\r\n if (!(event.target instanceof HTMLInputElement)) {\r\n return;\r\n // throw new Error(\"event.target is not instanceof HTMLInputElement\"); #2293\r\n }\r\n\r\n this.showLoading = !this.loadingDelayed;\r\n this.inputValue = event.target.value;\r\n this.debouncedEmitValue(event.target.value.match(/(\\S+)/g) ? event.target.value : \"\");\r\n };\r\n\r\n private onFocusIn = () => {\r\n if (this.suggestOnFocus) {\r\n this.openSuggestions();\r\n }\r\n };\r\n\r\n @Listen(\"click\", { target: \"document\" })\r\n onDocumentClick(event: MouseEvent) {\r\n if (\r\n (this.showSuggestions \|\| this.notFound) &&\r\n this.listbox &&\r\n event.target instanceof Node &&\r\n !this.listbox.contains(event.target) &&\r\n this.input !== event.target\r\n ) {\r\n this.closeSuggestions();\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n this.setListboxContainerMaxBlockSize();\r\n }\r\n\r\n connectedCallback() {\r\n setTimeout(() => {\r\n const input = this.host.querySelector('input[type=\"text\"]');\r\n if (!(input instanceof HTMLInputElement)) {\r\n return;\r\n // throw new ReferenceError(\"Mandatory text input not found\"); #2293\r\n }\r\n\r\n this.input = input;\r\n if (input.id) {\r\n this.inputId = input.id;\r\n } else {\r\n input.id = this.inputId;\r\n }\r\n\r\n if (!this.input.labels \|\| this.input.labels.length < 1) {\r\n return;\r\n // throw new ReferenceError(\"Mandatory label for text input not found\"); #2293\r\n }\r\n\r\n const label = this.input.labels[0];\r\n if (label?.id) {\r\n this.labelId = label.id;\r\n } else if (label) {\r\n label.id = this.labelId;\r\n }\r\n\r\n this.input.setAttribute(\"role\", \"combobox\");\r\n this.input.setAttribute(\"aria-haspopup\", \"listbox\");\r\n this.input.setAttribute(\"aria-expanded\", \"false\");\r\n this.input.setAttribute(\"autocomplete\", \"off\");\r\n this.input.setAttribute(\"aria-autocomplete\", \"list\");\r\n this.input.setAttribute(\"aria-activedescendant\", \"\");\r\n this.input.addEventListener(\"input\", this.onInput);\r\n this.input.addEventListener(\"keydown\", this.onKeyDown);\r\n this.input.addEventListener(\"focusin\", this.onFocusIn);\r\n\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n\r\n document.addEventListener(\"scrollend\", this.onScrollend);\r\n\r\n this.resizeObserver.observe(this.host);\r\n\r\n this.setListboxContainerMaxBlockSize();\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.input?.removeEventListener(\"input\", this.onInput);\r\n this.input?.removeEventListener(\"keydown\", this.onKeyDown);\r\n this.input?.removeEventListener(\"focusin\", this.onFocusIn);\r\n\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n\r\n document.removeEventListener(\"scrollend\", this.onScrollend);\r\n\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n private onWindowResize = debounce(() => this.setListboxContainerMaxBlockSize(), 150);\r\n\r\n private onScrollend = () => this.setListboxContainerMaxBlockSize();\r\n\r\n private setListboxContainerMaxBlockSize(): void {\r\n if (!this.listboxContainer \|\| !this.showSuggestions) {\r\n return;\r\n }\r\n\r\n if (this.listboxItems[0] && this.showSuggestions) {\r\n this.listItemBlockSize = this.listboxItems[0].getBoundingClientRect().height;\r\n }\r\n\r\n const availableBlockSize = window.innerHeight - this.host.getBoundingClientRect().bottom;\r\n const listboxMaxBlockSize =\r\n this.listItemBlockSize maxSuggestionsViewable + 2 * listboxPaddingBlock + 2 * listboxBorderWidth;\r\n\r\n if (availableBlockSize > this.listItemBlockSize) {\r\n if (availableBlockSize < listboxMaxBlockSize) {\r\n this.listboxContainerMaxBlockSize = availableBlockSize - 2 * listboxPaddingBlock;\r\n } else {\r\n this.listboxContainerMaxBlockSize = listboxMaxBlockSize;\r\n }\r\n }\r\n }\r\n\r\n private showInputValueNotFound(text: string) {\r\n return this.processAutosuggestMarkItems(this.markTerms(text, this.input?.value.split(\" \").filter((t) => t) ?? []));\r\n }\r\n\r\n private handleMark(\r\n suggestion: Suggestion,\r\n text: string,\r\n type?: \"value\" \| \"type\" \| \"extra\",\r\n extraIndex?: number,\r\n ): (VNode \| string)[] {\r\n if (this.mark && type) {\r\n return this.processAutosuggestMarkItems(this.mark(suggestion, text, type, extraIndex));\r\n }\r\n return this.processAutosuggestMarkItems(this.markTerms(text, this.input?.value.split(\" \").filter((t) => t) ?? []));\r\n }\r\n\r\n private markTerms(suggestionValue: string, terms: string[]): AutosuggestMarkItem[] {\r\n if (!suggestionValue \|\| !terms \|\| terms.length === 0 \|\| terms[0] === undefined) {\r\n return [\"\"];\r\n }\r\n\r\n const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, \"gi\");\r\n\r\n return suggestionValue.split(termRegex).reduce((total: AutosuggestMarkItem[], valuePart: string) => {\r\n if (!valuePart) {\r\n total.push(valuePart);\r\n } else if (termRegex.test(valuePart)) {\r\n total.push({ mark: valuePart });\r\n } else if (terms.length === 1) {\r\n total.push(valuePart);\r\n } else {\r\n total.push(...this.markTerms(valuePart, terms.slice(1)));\r\n }\r\n\r\n return total;\r\n }, []);\r\n }\r\n\r\n private processAutosuggestMarkItems(items: AutosuggestMarkItem[]): (VNode \| string)[] {\r\n if (items.length === 0) {\r\n return [\"\"];\r\n }\r\n\r\n return items.map((item) => {\r\n if (typeof item === \"object\") {\r\n return <mark>{item.mark}</mark>;\r\n }\r\n return item;\r\n });\r\n }\r\n\r\n private selectSuggestion(suggestion: Suggestion) {\r\n this.selectedSuggestion = suggestion;\r\n\r\n this.setAriaActiveDescendant();\r\n }\r\n\r\n private selectFirstSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n this.selectedSuggestion = this.suggestions[0];\r\n\r\n this.setAriaActiveDescendant(true);\r\n }\r\n\r\n private selectLastSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];\r\n\r\n this.setAriaActiveDescendant(true);\r\n }\r\n\r\n private selectNextSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;\r\n\r\n this.selectedSuggestion = this.suggestions[index + 1] ?? this.suggestions[0];\r\n\r\n this.setAriaActiveDescendant(true);\r\n }\r\n\r\n private selectPreviousSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;\r\n\r\n this.selectedSuggestion = this.suggestions[index - 1] ?? this.suggestions[this.suggestions.length - 1];\r\n\r\n this.setAriaActiveDescendant(true);\r\n }\r\n\r\n private setAriaActiveDescendant(scroll = false): void {\r\n if (this.selectedSuggestion) {\r\n const id = this.listboxItemId(this.selectedSuggestion);\r\n this.input?.setAttribute(\"aria-activedescendant\", id);\r\n if (scroll) {\r\n document.getElementById(id)?.scrollIntoView({ block: \"nearest\" });\r\n }\r\n }\r\n }\r\n\r\n private resetSelectedSuggestion() {\r\n this.showLoading = !this.loadingDelayed;\r\n this.notFound = false;\r\n this.selectedSuggestion = undefined;\r\n this.input?.setAttribute(\"aria-activedescendant\", \"\");\r\n }\r\n\r\n private openSuggestions(selectSuggestion?: \"first\" \| \"last\") {\r\n this.showSuggestions = (this.suggestions && this.suggestions.length > 0) ?? false;\r\n this.notFound = (this.suggestions && this.suggestions?.length === 0) ?? false;\r\n this.input?.setAttribute(\"aria-expanded\", (this.showSuggestions \|\| this.notFound).toString());\r\n\r\n if (this.showSuggestions && selectSuggestion === \"first\") {\r\n this.selectFirstSuggestion();\r\n } else if (this.showSuggestions && selectSuggestion === \"last\") {\r\n this.selectLastSuggestion();\r\n }\r\n }\r\n\r\n private closeSuggestions() {\r\n this.showSuggestions = false;\r\n this.notFound = false;\r\n this.input?.setAttribute(\"aria-expanded\", \"false\");\r\n this.selectFirstSuggestion();\r\n }\r\n\r\n private pickSelectedValue() {\r\n if (this.selectedSuggestion && this.showSuggestions) {\r\n this.dsoSelect.emit(this.selectedSuggestion);\r\n } else {\r\n this.dsoSearch.emit(this.input?.value);\r\n }\r\n\r\n this.closeSuggestions();\r\n }\r\n\r\n private onKeyDown = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented \|\| this.loading) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n if (!this.showSuggestions) {\r\n this.openSuggestions(\"first\");\r\n } else {\r\n this.selectNextSuggestion();\r\n }\r\n\r\n break;\r\n\r\n case \"ArrowUp\":\r\n if (!this.showSuggestions) {\r\n this.openSuggestions(\"last\");\r\n } else {\r\n this.selectPreviousSuggestion();\r\n }\r\n\r\n break;\r\n\r\n case \"Tab\":\r\n this.closeSuggestions();\r\n return;\r\n\r\n case \"Escape\":\r\n this.closeSuggestions();\r\n break;\r\n\r\n case \"Enter\":\r\n this.pickSelectedValue();\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private listboxItemId(suggestion: Suggestion): string {\r\n if (!this.suggestions) {\r\n return \"\";\r\n }\r\n return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;\r\n }\r\n\r\n private getChunkedExtras(extras: string[]): string[][] {\r\n return extras.reduce((resultArray: string[][], extra, index) => {\r\n const chunkIndex = Math.floor(index / 2);\r\n\r\n if (!resultArray[chunkIndex]) {\r\n resultArray[chunkIndex] = [];\r\n }\r\n resultArray[chunkIndex]?.push(extra);\r\n return resultArray;\r\n }, []);\r\n }\r\n\r\n render() {\r\n this.listboxItems = [];\r\n\r\n const showListbox = this.showSuggestions \|\| this.notFound;\r\n\r\n if (showListbox && this.input) {\r\n this.input.setAttribute(\"aria-controls\", this.listboxId);\r\n } else if (this.input) {\r\n this.input.removeAttribute(\"aria-controls\");\r\n }\r\n\r\n return (\r\n <>\r\n <slot />\r\n {this.loading && this.showLoading ? (\r\n <div class=\"autosuggest-progress-box\">\r\n <dso-progress-indicator label={this.loadingLabel}></dso-progress-indicator>\r\n </div>\r\n ) : (\r\n showListbox && (\r\n <dso-scrollable\r\n class=\"listbox-container\"\r\n ref={(element) => (this.listboxContainer = element)}\r\n style={{ \"--max-block-size\": `${this.listboxContainerMaxBlockSize}px` }}\r\n >\r\n <ul\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n id={this.listboxId}\r\n aria-labelledby={this.labelId}\r\n ref={(element) => (this.listbox = element)}\r\n >\r\n {(this.showSuggestions &&\r\n this.suggestions &&\r\n this.suggestions.map((suggestion) => (\r\n <li\r\n role=\"option\"\r\n id={this.listboxItemId(suggestion)}\r\n key={suggestion.value}\r\n onMouseEnter={() => this.selectSuggestion(suggestion)}\r\n onMouseLeave={() => this.resetSelectedSuggestion()}\r\n onClick={() => this.pickSelectedValue()}\r\n aria-selected={(suggestion === this.selectedSuggestion).toString()}\r\n aria-label={suggestion.value}\r\n ref={(li) => li && this.listboxItems.push(li)}\r\n >\r\n <div class=\"suggestion-row\">\r\n <span class=\"value\">{this.handleMark(suggestion, suggestion.value, \"value\")}</span>\r\n {suggestion.type ? (\r\n <span class=\"type\">{this.handleMark(suggestion, suggestion.type, \"type\")}</span>\r\n ) : undefined}\r\n </div>\r\n {suggestion.extras &&\r\n this.getChunkedExtras(suggestion.extras).map((chunk, index) => (\r\n <div class=\"suggestion-row\">\r\n {chunk.map((c, i) => (\r\n <span class=\"extra\">{this.handleMark(suggestion, c, \"extra\", index * 2 + i)}</span>\r\n ))}\r\n </div>\r\n ))}\r\n </li>\r\n ))) \|\|\r\n (this.notFound && (\r\n <li>\r\n <span class=\"value\">\r\n {!this.notFoundLabel ? (\r\n this.showInputValueNotFound(`${this.inputValue} is niet gevonden.`)\r\n ) : (\r\n <span>{this.notFoundLabel}</span>\r\n )}\r\n </span>\r\n </li>\r\n ))}\r\n </ul>\r\n </dso-scrollable>\r\n )\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-card.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const isInteractiveElement = (element) => {
         element.tagName.startsWith("DSO-TOGGLETIP"));
 };
-const cardCss = ":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}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:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-email-scampi\")}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-block-end:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-inline-end:8px}:host(:hover) .dso-card-heading a{color:#275937;text-decoration:underline}.dso-card-heading a{text-decoration:none}.heading-anchor{color:#275937;display:flex}.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;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const cardCss = ":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}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:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-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:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:url(\"./dso-icons.svg#img-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:url(\"./dso-icons.svg#img-email-scampi\")}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-block-end:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-inline-end:8px}:host(:hover) .dso-card-heading a{color:#275937;text-decoration:underline}.dso-card-heading a{text-decoration:none}.heading-anchor{color:#275937;display:flex}.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;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 const DsoCardStyle0 = cardCss;
 const Card = class {

package/dist/cjs/dso-card.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-card.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,oBAAoB,GAAG,CAAC,OAAoB;IACvD,QACE,OAAO,YAAY,iBAAiB;QACpC,OAAO,YAAY,iBAAiB;QACpC,OAAO,YAAY,gBAAgB;QACnC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,eAAe,CAAC,EAC3C;AACJ,CAAC;;ACPD,MAAM,OAAO,GAAG,~~swFAAswF~~,CAAC;~~AACvxF~~,sBAAe,OAAO;;MCWT,IAAI;;;;yBAUH,IAAI;0BAQS,QAAQ;;;;IAwBjC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAMA,iBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;KAC9B;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACzE,OAAO;SACR;QAED,IAAI,OAAO,GAAuB,CAAC,CAAC,MAAM,CAAC;QAE3C,OAAO,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,OAAO,KAAK,IAAI,EAAE;YAChD,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,OAAO,KAAK,IAAI,EAAE;gBACrD,OAAO;aACR;YAED,IAAI,OAAO,CAAC,UAAU,YAAY,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,YAAY,WAAW,EAAE;gBAC9F,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC;aACnC;iBAAM;gBACL,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;aACjC;SACF;QAED,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAEC,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAC5F;IAED,IAAI,wBAAwB;QAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;KACvD;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;KAClD;IAED,IAAI,qBAAqB;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;KACpD;IAED,IAAI,0BAA0B;QAC5B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,wBAAwB,KAAK,IAAI,CAAC;QAC5D,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,KAAK,IAAI,CAAC;QAEnD,QACEC,QAACC,UAAI,qDAAC,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAiB,YAAY,eAAa,QAAQ,IAC3GD,kEAAK,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,CAAC,YAAY,IACpDA,mEAAM,IAAI,EAAC,YAAY,GAAG,CACtB,EACNA,kEAAK,KAAK,EAAC,gBAAgB,EAAC,MAAM,EAAE,CAAC,QAAQ,IAC3CA,mEAAM,IAAI,EAAC,OAAO,GAAG,CACjB,EACNA,kEAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,qBAAqB,YAAY,iBAAiB,IAAI,CAAC,IAAI,CAAC,IAAI,IACpEA,kBAAM,IAAI,EAAC,SAAS,GAAG,KAEvB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MACzDA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,IACxCA,kBAAM,IAAI,EAAC,SAAS,GAAG,EACvBA,sBAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL;aACA,IAAI,CAAC,IAAI,KAAK,QAAQ,KACrBA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,IAClFA,kBAAM,IAAI,EAAC,SAAS,GAAG,EACvBA,sBAAU,IAAI,EAAC,eAAe,GAAY,EAC1CA,kBAAM,KAAK,EAAC,SAAS,8CAA+C,CAClE,CACL,CAAC;aACD,IAAI,CAAC,IAAI,KAAK,UAAU,KACvBA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,IACxCA,kBAAM,IAAI,EAAC,SAAS,GAAG,EACvBA,sBAAU,IAAI,EAAC,UAAU,GAAY,CACnC,CACL,CAAC,CACH,EACA,IAAI,CAAC,0BAA0B,KAAK,IAAI,IAAIA,mEAAM,IAAI,EAAC,cAAc,GAAG,CACrE,EACNA,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,mEAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACD,EACP;KACH;;;;;;;","names":["forceUpdate","isModifiedEvent","h","Host"],"sources":["src/utils/is-interactive-element.ts","src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n return (\r\n element instanceof HTMLButtonElement \|\|\r\n element instanceof HTMLAnchorElement \|\|\r\n element instanceof HTMLInputElement \|\|\r\n element.tagName.startsWith(\"DSO-TOGGLETIP\")\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/card\";\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n @include card.root();\r\n\r\n display: block;\r\n}\r\n\r\n:host(:hover) {\r\n .dso-card-heading a {\r\n color: card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n}\r\n\r\n.dso-card-heading a {\r\n text-decoration: none;\r\n}\r\n\r\n.heading-anchor {\r\n color: card.$heading-anchor-color;\r\n display: flex;\r\n\r\n &:visited {\r\n color: card.$heading-anchor-color;\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","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\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 Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable.\r\n \r\n @deprecated Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor).\r\n /\r\n @Prop({ reflect: true })\r\n clickable = true;\r\n\r\n /\r\n Presentation of image in header.\r\n * - \"normal\" (\"24 x 24\").\r\n * - \"wide\" (\"30 x 26\")\r\n /\r\n @Prop({ reflect: true })\r\n imageShape: ImageShape = \"normal\";\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;\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 Emitted when the Card is clickable and the user clicked the Card.\r\n */\r\n @Event()\r\n dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\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.clickable && !this.href)) {\r\n return;\r\n }\r\n\r\n let element: HTMLElement \| null = e.target;\r\n\r\n while (element !== this.host && element !== null) {\r\n if (isInteractiveElement(element) \|\| element === null) {\r\n return;\r\n }\r\n\r\n if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n element = element.parentNode.host;\r\n } else {\r\n element = element.parentElement;\r\n }\r\n }\r\n\r\n return this.dsoCardClicked.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 imageSlottedElement() {\r\n return this.host.querySelector(\"[slot='image']\");\r\n }\r\n\r\n get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\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 const hasImage = this.imageSlottedElement !== null;\r\n\r\n return (\r\n <Host onClick={(e: MouseEvent) => this.clickEventHandler(e)} is-selectable={isSelectable} has-image={hasImage}>\r\n <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n <slot name=\"selectable\" />\r\n </div>\r\n <div class=\"dso-card-image\" hidden={!hasImage}>\r\n <slot name=\"image\" />\r\n </div>\r\n <div class=\"dso-card-heading\">\r\n {this.headingSlottedElement instanceof HTMLAnchorElement \|\| !this.href ? (\r\n <slot name=\"heading\" />\r\n ) : (\r\n ((!this.mode \|\| ![\"download\", \"extern\"].includes(this.mode)) && (\r\n <a href={this.href} class=\"heading-anchor\">\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )) \|\|\r\n (this.mode === \"extern\" && (\r\n <a href={this.href} class=\"heading-anchor\" target=\"_blank\" rel=\"noopener noreferrer\">\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\">\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"download\"></dso-icon>\r\n </a>\r\n ))\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 </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-card.entry.cjs.js","mappings":"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","names":["forceUpdate","isModifiedEvent","h","Host"],"sources":["src/utils/is-interactive-element.ts","src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n return (\r\n element instanceof HTMLButtonElement \|\|\r\n element instanceof HTMLAnchorElement \|\|\r\n element instanceof HTMLInputElement \|\|\r\n element.tagName.startsWith(\"DSO-TOGGLETIP\")\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/card\";\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n @include card.root();\r\n\r\n display: block;\r\n}\r\n\r\n:host(:hover) {\r\n .dso-card-heading a {\r\n color: card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n}\r\n\r\n.dso-card-heading a {\r\n text-decoration: none;\r\n}\r\n\r\n.heading-anchor {\r\n color: card.$heading-anchor-color;\r\n display: flex;\r\n\r\n &:visited {\r\n color: card.$heading-anchor-color;\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","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\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 Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable.\r\n \r\n @deprecated Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor).\r\n /\r\n @Prop({ reflect: true })\r\n clickable = true;\r\n\r\n /\r\n Presentation of image in header.\r\n * - \"normal\" (\"24 x 24\").\r\n * - \"wide\" (\"30 x 26\")\r\n /\r\n @Prop({ reflect: true })\r\n imageShape: ImageShape = \"normal\";\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;\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 Emitted when the Card is clickable and the user clicked the Card.\r\n */\r\n @Event()\r\n dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\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.clickable && !this.href)) {\r\n return;\r\n }\r\n\r\n let element: HTMLElement \| null = e.target;\r\n\r\n while (element !== this.host && element !== null) {\r\n if (isInteractiveElement(element) \|\| element === null) {\r\n return;\r\n }\r\n\r\n if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n element = element.parentNode.host;\r\n } else {\r\n element = element.parentElement;\r\n }\r\n }\r\n\r\n return this.dsoCardClicked.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 imageSlottedElement() {\r\n return this.host.querySelector(\"[slot='image']\");\r\n }\r\n\r\n get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\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 const hasImage = this.imageSlottedElement !== null;\r\n\r\n return (\r\n <Host onClick={(e: MouseEvent) => this.clickEventHandler(e)} is-selectable={isSelectable} has-image={hasImage}>\r\n <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n <slot name=\"selectable\" />\r\n </div>\r\n <div class=\"dso-card-image\" hidden={!hasImage}>\r\n <slot name=\"image\" />\r\n </div>\r\n <div class=\"dso-card-heading\">\r\n {this.headingSlottedElement instanceof HTMLAnchorElement \|\| !this.href ? (\r\n <slot name=\"heading\" />\r\n ) : (\r\n ((!this.mode \|\| ![\"download\", \"extern\"].includes(this.mode)) && (\r\n <a href={this.href} class=\"heading-anchor\">\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )) \|\|\r\n (this.mode === \"extern\" && (\r\n <a href={this.href} class=\"heading-anchor\" target=\"_blank\" rel=\"noopener noreferrer\">\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\">\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"download\"></dso-icon>\r\n </a>\r\n ))\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 </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-helpcenter-panel.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-848434f1.js');
 const focusTrap_esm = require('./focus-trap.esm-6cff35a7.js');
 require('./index.esm-970bc106.js');
-const helpcenterPanelCss = ":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  block-size: 100%;\n  inset-inline-start: 0;\n  position: fixed;\n  inset-block-start: 0;\n  visibility: hidden;\n  inline-size: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  block-size: 100%;\n  opacity: 0.4;\n  inline-size: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n  border: 0;\n  inset-block-end: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  inset-inline-end: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n  border-inline-end: 0;\n  border-block-start: 0;\n  border-radius: 0 0 0 8px;\n  block-size: 40px;\n  min-inline-size: 40px;\n  padding: 0;\n  position: fixed;\n  inset-inline-end: 0;\n  inline-size: 40px;\n  inset-block-start: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  position: absolute;\n  inset-inline-start: 50%;\n  inset-block-start: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-inline-start: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  block-size: 100%;\n  position: absolute;\n  inset-block-start: 0;\n  transition: inset-inline-end 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    inset-inline-end: -320px;\n    inline-size: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    inset-inline-end: -480px;\n    inline-size: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    inset-inline-end: -640px;\n    inline-size: 640px;\n  }\n}\n.iframe-container.open {\n  inset-inline-end: 0;\n}\n\niframe {\n  border: 0;\n  block-size: 100%;\n  inline-size: 100%;\n}";
+const helpcenterPanelCss = ":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  block-size: 100%;\n  inset-inline-start: 0;\n  position: fixed;\n  inset-block-start: 0;\n  visibility: hidden;\n  inline-size: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  block-size: 100%;\n  opacity: 0.4;\n  inline-size: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  inset-block-end: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  inset-inline-end: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border-inline-end: 0;\n  border-block-start: 0;\n  border-radius: 0 0 0 8px;\n  block-size: 40px;\n  min-inline-size: 40px;\n  padding: 0;\n  position: fixed;\n  inset-inline-end: 0;\n  inline-size: 40px;\n  inset-block-start: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.close-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  position: absolute;\n  inset-inline-start: 50%;\n  inset-block-start: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-inline-start: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  block-size: 100%;\n  position: absolute;\n  inset-block-start: 0;\n  transition: inset-inline-end 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    inset-inline-end: -320px;\n    inline-size: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    inset-inline-end: -480px;\n    inline-size: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    inset-inline-end: -640px;\n    inline-size: 640px;\n  }\n}\n.iframe-container.open {\n  inset-inline-end: 0;\n}\n\niframe {\n  border: 0;\n  block-size: 100%;\n  inline-size: 100%;\n}";
 const DsoHelpcenterPanelStyle0 = helpcenterPanelCss;
 const maxCssTransitionMilliseconds = 500;

package/dist/cjs/dso-helpcenter-panel.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-helpcenter-panel.entry.cjs.js","mappings":"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","names":["createFocusTrap","h"],"sources":["src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","src/components/helpcenter-panel/helpcenter-panel.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/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n position: fixed;\r\n inset-block-start: 0;\r\n visibility: hidden;\r\n inline-size: 100%;\r\n\r\n &.visible {\r\n visibility: visible;\r\n }\r\n}\r\n\r\n.dimscreen {\r\n background-color: colors.$zwart;\r\n block-size: 100%;\r\n opacity: 0.4;\r\n inline-size: 100%;\r\n}\r\n\r\n.open-button {\r\n @include button.primary($modifiers: false);\r\n\r\n border: 0;\r\n inset-block-end: units.$u2;\r\n font-family: typography.$font-family-base;\r\n position: fixed;\r\n inset-inline-end: units.$u2;\r\n box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n\r\n &.open {\r\n display: none;\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.secondary($modifiers: false);\r\n\r\n border-inline-end: 0;\r\n border-block-start: 0;\r\n border-radius: 0 0 0 units.$u1;\r\n block-size: units.$u5;\r\n min-inline-size: units.$u5;\r\n padding: 0;\r\n position: fixed;\r\n inset-inline-end: 0;\r\n inline-size: units.$u5;\r\n inset-block-start: 0;\r\n\r\n dso-icon {\r\n margin-inline-start: 0;\r\n margin-inline-end: 0;\r\n position: absolute;\r\n inset-inline-start: 50%;\r\n inset-block-start: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n &:hover,\r\n &:active,\r\n &:focus {\r\n cursor: pointer;\r\n }\r\n\r\n &.close {\r\n display: none;\r\n }\r\n}\r\n\r\n.iframe-container {\r\n background-color: colors.$wit;\r\n border: 0;\r\n border-inline-start: 1px solid colors.$grijs-20;\r\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n block-size: 100%;\r\n position: absolute;\r\n inset-block-start: 0;\r\n transition: inset-inline-end 0.5s;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inset-inline-end: -320px;\r\n inline-size: 320px;\r\n }\r\n\r\n @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n inset-inline-end: -480px;\r\n inline-size: 480px;\r\n }\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n inset-inline-end: -640px;\r\n inline-size: 640px;\r\n }\r\n\r\n &.open {\r\n inset-inline-end: 0;\r\n }\r\n}\r\n\r\niframe {\r\n border: 0;\r\n block-size: 100%;\r\n inline-size: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n tag: \"dso-helpcenter-panel\",\r\n styleUrl: \"helpcenter-panel.scss\",\r\n shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n private iframeUrl?: string;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private panelWrapperElement?: HTMLDivElement;\r\n\r\n private openButtonElement?: HTMLButtonElement;\r\n\r\n private closeButtonElement?: HTMLButtonElement;\r\n\r\n private iframeLoaded = false;\r\n\r\n /*\r\n The label on the help button that activates the Helpcenter.\r\n /\r\n @Prop()\r\n label = \"Hulp nodig\";\r\n\r\n /\r\n The URL that's loaded when the Helpcenter opens.\r\n */\r\n @Prop()\r\n url!: string;\r\n\r\n @State()\r\n visibility: \"visible\" \| \"hidden\" = \"hidden\";\r\n\r\n @State()\r\n isOpen: \"open\" \| \"close\" = \"close\";\r\n\r\n @State()\r\n slideState: \"open\" \| \"close\" = \"close\";\r\n\r\n @State()\r\n loadIframe = false;\r\n\r\n @Watch(\"url\")\r\n watchUrl(url: string) {\r\n if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n this.iframeUrl = url;\r\n }\r\n }\r\n\r\n @Watch(\"isOpen\")\r\n watchIsOpen(isOpen: \"open\" \| \"close\") {\r\n const body = document.querySelector(\"body\");\r\n\r\n if (isOpen === \"open\") {\r\n body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n if (this.iframeUrl !== this.url) {\r\n this.iframeUrl = this.url;\r\n }\r\n } else {\r\n body?.style.removeProperty(\"overflow\");\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n this.closeClick();\r\n }\r\n }\r\n\r\n private createTrap() {\r\n if (!this.panelWrapperElement) {\r\n return;\r\n }\r\n\r\n this.trap = createFocusTrap(this.panelWrapperElement, {\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n setReturnFocus: this.openButtonElement ?? false,\r\n initialFocus: this.closeButtonElement ?? false,\r\n }).activate();\r\n }\r\n\r\n private openClick = () => {\r\n this.visibility = \"visible\";\r\n this.slideState = \"open\";\r\n setTimeout(() => {\r\n this.isOpen = \"open\";\r\n });\r\n if (!this.loadIframe) {\r\n setTimeout(() => {\r\n this.loadIframe = true;\r\n }, maxCssTransitionMilliseconds);\r\n }\r\n };\r\n\r\n private closeClick = () => {\r\n this.isOpen = \"close\";\r\n this.slideState = \"close\";\r\n setTimeout(() => {\r\n this.visibility = \"hidden\";\r\n }, maxCssTransitionMilliseconds);\r\n };\r\n\r\n componentDidRender() {\r\n if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n this.createTrap();\r\n } else if (this.isOpen === \"close\" && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n type=\"button\"\r\n onClick={this.openClick}\r\n class={`open-button ${this.isOpen}`}\r\n aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n aria-haspopup=\"dialog\"\r\n aria-controls=\"dso-panel-wrapper\"\r\n ref={(element) => (this.openButtonElement = element)}\r\n >\r\n <dso-icon icon=\"help\"></dso-icon>\r\n <span>{this.label}</span>\r\n </button>\r\n <div\r\n id=\"dso-panel-wrapper\"\r\n class={`wrapper ${this.visibility}`}\r\n aria-label=\"helpcentrum\"\r\n role=\"dialog\"\r\n ref={(element) => (this.panelWrapperElement = element)}\r\n >\r\n <div class=\"dimscreen\" onClick={this.closeClick} />\r\n <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n {this.loadIframe ? (\r\n <iframe\r\n src={this.iframeUrl}\r\n tabindex=\"0\"\r\n onLoad={() => {\r\n this.createTrap();\r\n this.iframeLoaded = true;\r\n }}\r\n />\r\n ) : (\r\n <div />\r\n )}\r\n </div>\r\n <button\r\n type=\"button\"\r\n class={`close-button ${this.isOpen}`}\r\n onClick={this.closeClick}\r\n aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n aria-controls=\"dso-panel-wrapper\"\r\n ref={(element) => (this.closeButtonElement = element)}\r\n >\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-helpcenter-panel.entry.cjs.js","mappings":"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","names":["createFocusTrap","h"],"sources":["src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","src/components/helpcenter-panel/helpcenter-panel.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/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n position: fixed;\r\n inset-block-start: 0;\r\n visibility: hidden;\r\n inline-size: 100%;\r\n\r\n &.visible {\r\n visibility: visible;\r\n }\r\n}\r\n\r\n.dimscreen {\r\n background-color: colors.$zwart;\r\n block-size: 100%;\r\n opacity: 0.4;\r\n inline-size: 100%;\r\n}\r\n\r\n.open-button {\r\n @include button.primary($modifiers: false);\r\n\r\n border: 0;\r\n inset-block-end: units.$u2;\r\n font-family: typography.$font-family-base;\r\n position: fixed;\r\n inset-inline-end: units.$u2;\r\n box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n\r\n &.open {\r\n display: none;\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.secondary($modifiers: false);\r\n\r\n border-inline-end: 0;\r\n border-block-start: 0;\r\n border-radius: 0 0 0 units.$u1;\r\n block-size: units.$u5;\r\n min-inline-size: units.$u5;\r\n padding: 0;\r\n position: fixed;\r\n inset-inline-end: 0;\r\n inline-size: units.$u5;\r\n inset-block-start: 0;\r\n\r\n dso-icon {\r\n margin-inline-start: 0;\r\n margin-inline-end: 0;\r\n position: absolute;\r\n inset-inline-start: 50%;\r\n inset-block-start: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n &:hover,\r\n &:active,\r\n &:focus {\r\n cursor: pointer;\r\n }\r\n\r\n &.close {\r\n display: none;\r\n }\r\n}\r\n\r\n.iframe-container {\r\n background-color: colors.$wit;\r\n border: 0;\r\n border-inline-start: 1px solid colors.$grijs-20;\r\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n block-size: 100%;\r\n position: absolute;\r\n inset-block-start: 0;\r\n transition: inset-inline-end 0.5s;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inset-inline-end: -320px;\r\n inline-size: 320px;\r\n }\r\n\r\n @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n inset-inline-end: -480px;\r\n inline-size: 480px;\r\n }\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n inset-inline-end: -640px;\r\n inline-size: 640px;\r\n }\r\n\r\n &.open {\r\n inset-inline-end: 0;\r\n }\r\n}\r\n\r\niframe {\r\n border: 0;\r\n block-size: 100%;\r\n inline-size: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n tag: \"dso-helpcenter-panel\",\r\n styleUrl: \"helpcenter-panel.scss\",\r\n shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n private iframeUrl?: string;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private panelWrapperElement?: HTMLDivElement;\r\n\r\n private openButtonElement?: HTMLButtonElement;\r\n\r\n private closeButtonElement?: HTMLButtonElement;\r\n\r\n private iframeLoaded = false;\r\n\r\n /*\r\n The label on the help button that activates the Helpcenter.\r\n /\r\n @Prop()\r\n label = \"Hulp nodig\";\r\n\r\n /\r\n The URL that's loaded when the Helpcenter opens.\r\n */\r\n @Prop()\r\n url!: string;\r\n\r\n @State()\r\n visibility: \"visible\" \| \"hidden\" = \"hidden\";\r\n\r\n @State()\r\n isOpen: \"open\" \| \"close\" = \"close\";\r\n\r\n @State()\r\n slideState: \"open\" \| \"close\" = \"close\";\r\n\r\n @State()\r\n loadIframe = false;\r\n\r\n @Watch(\"url\")\r\n watchUrl(url: string) {\r\n if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n this.iframeUrl = url;\r\n }\r\n }\r\n\r\n @Watch(\"isOpen\")\r\n watchIsOpen(isOpen: \"open\" \| \"close\") {\r\n const body = document.querySelector(\"body\");\r\n\r\n if (isOpen === \"open\") {\r\n body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n if (this.iframeUrl !== this.url) {\r\n this.iframeUrl = this.url;\r\n }\r\n } else {\r\n body?.style.removeProperty(\"overflow\");\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n this.closeClick();\r\n }\r\n }\r\n\r\n private createTrap() {\r\n if (!this.panelWrapperElement) {\r\n return;\r\n }\r\n\r\n this.trap = createFocusTrap(this.panelWrapperElement, {\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n setReturnFocus: this.openButtonElement ?? false,\r\n initialFocus: this.closeButtonElement ?? false,\r\n }).activate();\r\n }\r\n\r\n private openClick = () => {\r\n this.visibility = \"visible\";\r\n this.slideState = \"open\";\r\n setTimeout(() => {\r\n this.isOpen = \"open\";\r\n });\r\n if (!this.loadIframe) {\r\n setTimeout(() => {\r\n this.loadIframe = true;\r\n }, maxCssTransitionMilliseconds);\r\n }\r\n };\r\n\r\n private closeClick = () => {\r\n this.isOpen = \"close\";\r\n this.slideState = \"close\";\r\n setTimeout(() => {\r\n this.visibility = \"hidden\";\r\n }, maxCssTransitionMilliseconds);\r\n };\r\n\r\n componentDidRender() {\r\n if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n this.createTrap();\r\n } else if (this.isOpen === \"close\" && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n type=\"button\"\r\n onClick={this.openClick}\r\n class={`open-button ${this.isOpen}`}\r\n aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n aria-haspopup=\"dialog\"\r\n aria-controls=\"dso-panel-wrapper\"\r\n ref={(element) => (this.openButtonElement = element)}\r\n >\r\n <dso-icon icon=\"help\"></dso-icon>\r\n <span>{this.label}</span>\r\n </button>\r\n <div\r\n id=\"dso-panel-wrapper\"\r\n class={`wrapper ${this.visibility}`}\r\n aria-label=\"helpcentrum\"\r\n role=\"dialog\"\r\n ref={(element) => (this.panelWrapperElement = element)}\r\n >\r\n <div class=\"dimscreen\" onClick={this.closeClick} />\r\n <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n {this.loadIframe ? (\r\n <iframe\r\n src={this.iframeUrl}\r\n tabindex=\"0\"\r\n onLoad={() => {\r\n this.createTrap();\r\n this.iframeLoaded = true;\r\n }}\r\n />\r\n ) : (\r\n <div />\r\n )}\r\n </div>\r\n <button\r\n type=\"button\"\r\n class={`close-button ${this.isOpen}`}\r\n onClick={this.closeClick}\r\n aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n aria-controls=\"dso-panel-wrapper\"\r\n ref={(element) => (this.closeButtonElement = element)}\r\n >\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-info-button.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-848434f1.js');
 const clsx = require('./clsx-fc789adc.js');
-const infoButtonCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:8px;padding:0;cursor:pointer;vertical-align:top}button.dso-info-secondary{color:#666}dso-icon{display:block}";
+const infoButtonCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{cursor:pointer;vertical-align:top}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:8px;padding:0}button.dso-info-secondary{color:#666}dso-icon{display:block}";
 const DsoInfoButtonStyle0 = infoButtonCss;
 const InfoButton = class {

package/dist/cjs/dso-info-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-info-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,~~kYAAkY~~,CAAC;~~AACzZ~~,4BAAe,aAAa;;MCSf,UAAU;;;;;qBAUb,KAAK;;qBAYL,uBAAuB;;;;;IAY/B,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;KACtB;IAEO,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAChE;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IACrFD,qEACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAEE,SAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,mBACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,IAEzCF,uEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,GAAa,EAC/EA,mEAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,EACP;KACH;;;;;;","names":["h","Host","clsx"],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include info-button.root();\r\n\r\n cursor: pointer;\r\n vertical-align: top;\r\n}\r\n\r\ndso-icon {\r\n display: block;\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-info-button\",\r\n shadow: true,\r\n styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n private button?: HTMLButtonElement;\r\n\r\n /*\r\n Whether the InfoButton is active.\r\n /\r\n @Prop({ mutable: true, reflect: true })\r\n active?: boolean;\r\n\r\n @State()\r\n hover = false;\r\n\r\n /\r\n For secondary Info Button.\r\n /\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n /\r\n The label.\r\n /\r\n @Prop()\r\n label = \"Toelichting bij optie\";\r\n\r\n /\r\n Emitted when the user activates the Info Button.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n /\r\n To set focus to the toggle button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.button?.focus();\r\n }\r\n\r\n private handleToggle(e: MouseEvent) {\r\n this.active = !this.active;\r\n this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n <button\r\n type=\"button\"\r\n class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n onClick={(e) => this.handleToggle(e)}\r\n ref={(element) => (this.button = element)}\r\n >\r\n <dso-icon icon={this.active \|\| this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n <span class=\"sr-only\">{this.label}</span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-info-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,yYAAyY,CAAC;AACha,4BAAe,aAAa;;MCSf,UAAU;;;;;qBAUb,KAAK;;qBAYL,uBAAuB;;;;;IAY/B,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;KACtB;IAEO,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAChE;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IACrFD,qEACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAEE,SAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,mBACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,IAEzCF,uEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,GAAa,EAC/EA,mEAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,EACP;KACH;;;;;;","names":["h","Host","clsx"],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include info-button.root();\r\n\r\n cursor: pointer;\r\n vertical-align: top;\r\n}\r\n\r\ndso-icon {\r\n display: block;\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-info-button\",\r\n shadow: true,\r\n styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n private button?: HTMLButtonElement;\r\n\r\n /*\r\n Whether the InfoButton is active.\r\n /\r\n @Prop({ mutable: true, reflect: true })\r\n active?: boolean;\r\n\r\n @State()\r\n hover = false;\r\n\r\n /\r\n For secondary Info Button.\r\n /\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n /\r\n The label.\r\n /\r\n @Prop()\r\n label = \"Toelichting bij optie\";\r\n\r\n /\r\n Emitted when the user activates the Info Button.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n /\r\n To set focus to the toggle button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.button?.focus();\r\n }\r\n\r\n private handleToggle(e: MouseEvent) {\r\n this.active = !this.active;\r\n this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n <button\r\n type=\"button\"\r\n class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n onClick={(e) => this.handleToggle(e)}\r\n ref={(element) => (this.button = element)}\r\n >\r\n <dso-icon icon={this.active \|\| this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n <span class=\"sr-only\">{this.label}</span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-info_2.cjs.entry.js CHANGED Viewed

@@ -84,7 +84,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (index.h(index.Fragment, { key: '91453618df769cca5d2b8b11d0749d27b53f59b1' }, index.h("div", { key: '517f33fff46189d305568f6e68168831a94c0c57', class: "dso-selectable-container" }, index.h("div", { key: 'ef669b7497bd52b108d4c877493dbe772d8700a4', class: clsx.clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, index.h("input", { key: 'c6f2aa35044581a2d5f7f43d870ba0ce22424c92', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: 'b5482b39b6045fcdffb4cd2284f83bd9f554f267', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'e66998b45aa63933b73d0c54eeb3ccbae8246bee', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '8b2033a0b23d356be3804632698e687310de6ed7' }, index.h("slot", { key: '411eafba867420af9d581d7af5f35cec59fff133', name: "info" })))), index.h("slot", { key: 'e1d3855d686c4bc6119f65a76d889f5c2d44dcb6', name: "options" })));
+        return (index.h(index.Fragment, { key: '7bc5f9b9e029af047da32ea329ec28ef5a1b9a6e' }, index.h("div", { key: 'e1d8151cfc4a179c574cdd22f5b8a522433f9896', class: "dso-selectable-container" }, index.h("div", { key: 'b7089b2e8b02bacaf0485351726d019b2d3faaf3', class: clsx.clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, index.h("input", { key: 'bbf2571b7578706abf523f5fc0d66435159b5ab5', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: 'c03e4642630e5a7dfd902af7389eb8eefedef6f7', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'bd49a93be3a86178bb3b3ea6df7744baeb746d3d', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: 'a34fe7983e523fcb8b07d90bcd3b48a4359abb31' }, index.h("slot", { key: 'd733610afc9465da63844b0c8430ddde7227fae5', name: "info" })))), index.h("slot", { key: '7af6229ca414ff808ea348d396f51f6674ba30e1', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/cjs/dso-label_2.cjs.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const clsx = require('./clsx-fc789adc.js');
 const index = require('./index-10c6b031.js');
 const hasOverflow = require('./has-overflow-2fb1d618.js');
-const labelCss = ":host{display:inline-block;max-inline-size:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:inline-end;font-size:1rem;margin-block-end:-4px;margin-inline-start:8px;margin-inline-end:-4px;margin-block-start:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label{background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;border-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}";
+const labelCss = ":host{display:inline-block;max-inline-size:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:inline-end;font-size:1rem;margin-block-end:-4px;margin-inline-start:8px;margin-inline-end:-4px;margin-block-start:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label{background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;border-color:#fff;color:#191919}.dso-label.dso-label-bright{outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}";
 const DsoLabelStyle0 = labelCss;
 const resizeObserver = new ResizeObserver(index.debounce((entries) => {
@@ -331,7 +331,7 @@ const Tooltip = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b8b24b9fcb5d6de63f40ac2c28aa3cae220935d1', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, index$1.h("div", { key: '837abccdba48399a6bda370059d7f59ecabf1d4d', class: clsx.clsx("tooltip", { in: this.active }) }, !this.noArrow && index$1.h("div", { key: '9c6c0250d521e51cfc635a82ddd57d49bb81dd53', "data-popper-arrow": true, class: "tooltip-arrow" }), index$1.h("div", { key: 'efd8935a506723d1a1b537896526249f7e89d559', "aria-hidden": !this.descriptive || undefined, class: clsx.clsx("tooltip-inner", { "dso-small": this.small }) }, index$1.h("slot", { key: '125db28c4ee8f322d6014013c001393267e52829' })))));
+        return (index$1.h(index$1.Host, { key: '1dd2e74dbeb0555c9ddf87f129fa0c71761a1838', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, index$1.h("div", { key: 'ee9a42aebfda6d2b72b9ca2843997c543b534ee8', class: clsx.clsx("tooltip", { in: this.active }) }, !this.noArrow && index$1.h("div", { key: '3f692092ef311ed2c23f24c4c039cd690a1456cd', "data-popper-arrow": true, class: "tooltip-arrow" }), index$1.h("div", { key: '1f47431cd04dffd0f6eec3728c140e0e2bbbd2c5', "aria-hidden": !this.descriptive || undefined, class: clsx.clsx("tooltip-inner", { "dso-small": this.small }) }, index$1.h("slot", { key: 'a1e76e41487efc675edd80608d610e4fbf0f227e' })))));
     }
     activatePopper() {
         var _a;