npm - @dso-toolkit/core - Versions diffs - 62.23.0 → 62.24.0 - Mend

@dso-toolkit/core 62.23.0 → 62.24.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 (315) hide show

package/dist/esm/dso-annotation-output_2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-annotation-output.dso-document-component.entry.js","mappings":"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","names":[],"sources":["src/components/annotation-output/annotation-output.scss?tag=dso-annotation-output","src/components/annotation-output/annotation-output.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\ndso-annotation-output {\r\n display: block;\r\n}\r\n\r\n.dso-annotation-header {\r\n align-items: center;\r\n background-color: colors.$grijs-5;\r\n clear: both;\r\n display: flex;\r\n margin-bottom: 2px;\r\n margin-top: units.$u1;\r\n padding-left: units.$u2;\r\n padding-right: units.$u1;\r\n padding-top: units.$u1;\r\n padding-bottom: units.$u1;\r\n\r\n > [slot=\"title\"] {\r\n color: colors.$zwart;\r\n font-size: 1.25rem;\r\n margin-bottom: 0;\r\n margin-top: 0;\r\n }\r\n\r\n > :nth-child(2) {\r\n margin-left: auto;\r\n }\r\n}\r\n\r\ndso-responsive-element[small],\r\ndso-responsive-element[medium] {\r\n .dso-annotation-header {\r\n display: grid;\r\n row-gap: units.$u1;\r\n\r\n *[slot=\"title\"] {\r\n grid-row: 1;\r\n grid-column: 1;\r\n }\r\n\r\n *[slot=\"addons\"] {\r\n grid-row: 2;\r\n grid-column: 1;\r\n margin-left: initial;\r\n }\r\n\r\n .dso-annotation-close-button {\r\n grid-row: 1;\r\n grid-column: 2;\r\n margin-left: units.$u1;\r\n text-align: end;\r\n }\r\n }\r\n}\r\n\r\n.dso-annotation-content {\r\n @include set-colors.apply(colors.$grijs-5);\r\n\r\n padding-left: units.$u2;\r\n padding-right: units.$u1;\r\n padding-top: units.$u1;\r\n padding-bottom: units.$u1;\r\n}\r\n\r\n.dso-annotation-close-button {\r\n margin-left: units.$u4;\r\n}\r\n\r\n.dso-annotation-prefix {\r\n font-style: italic;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\nexport interface AnnotationOutputCloseEvent {\r\n originalEvent: Event;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-annotation-output\",\r\n styleUrl: \"annotation-output.scss\",\r\n // No shadowdom for a11y reasons (aria-controls being set inside another component)\r\n})\r\nexport class AnnotationOutput implements ComponentInterface {\r\n /**\r\n * The annotation-button that toggles this component should have the same identifier.\r\n */\r\n @Prop({ reflect: true })\r\n identifier!: string;\r\n\r\n /**\r\n * This text will be displayed above the annotation-output when opened\r\n */\r\n @Prop({ reflect: true })\r\n annotationPrefix?: string;\r\n\r\n /**\r\n * Set to `true` to show content.\r\n */\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /**\r\n * This event is emitted when the user activates the Annotation Button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClose!: EventEmitter<AnnotationOutputCloseEvent>;\r\n\r\n private toggleHandler = (e: MouseEvent) => {\r\n this.dsoClose.emit({ originalEvent: e });\r\n };\r\n\r\n render() {\r\n return (\r\n <dso-responsive-element>\r\n <dso-expandable id={this.identifier} open={this.open}>\r\n {this.annotationPrefix && <span class=\"dso-annotation-prefix\">{this.annotationPrefix}</span>}\r\n <div class=\"dso-annotation-header\">\r\n <slot name=\"title\" />\r\n <slot name=\"addons\" />\r\n <button type=\"button\" class=\"dso-tertiary dso-annotation-close-button\" onClick={this.toggleHandler}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Toelichting sluiten</span>\r\n </button>\r\n </div>\r\n <div class=\"dso-annotation-content\">\r\n <slot />\r\n </div>\r\n </dso-expandable>\r\n </dso-responsive-element>\r\n );\r\n }\r\n}\r\n","import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, ...props }, children) => {\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n return <h2 {...props}>{children}</h2>;\r\n case \"h3\":\r\n return <h3 {...props}>{children}</h3>;\r\n case \"h4\":\r\n return <h4 {...props}>{children}</h4>;\r\n case \"h5\":\r\n return <h5 {...props}>{children}</h5>;\r\n case \"h6\":\r\n return <h6 {...props}>{children}</h6>;\r\n }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n display: block;\r\n\r\n --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n padding-left: units.$u1;\r\n margin-right: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n padding-top: units.$u1 * 0.5;\r\n padding-bottom: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n @include delete.root();\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n position: relative;\r\n\r\n &::before {\r\n content: \"\";\r\n left: -3px;\r\n position: absolute;\r\n display: block;\r\n width: 3px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: colors.$lichtblauw;\r\n }\r\n}\r\n\r\n:host([open]) {\r\n .heading-container {\r\n margin-bottom: units.$u1;\r\n }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n border: 0;\r\n padding: 0;\r\n background: 0;\r\n color: colors.$bosgroen;\r\n}\r\n\r\n.heading-element {\r\n align-items: start;\r\n display: flex;\r\n font-size: 1rem;\r\n color: colors.$bosgroen;\r\n margin: 0;\r\n\r\n > * {\r\n vertical-align: middle;\r\n }\r\n}\r\n\r\n:host([not-collapsible]) {\r\n .heading-container {\r\n margin-bottom: 0;\r\n }\r\n\r\n .editaction-label {\r\n margin-left: 0;\r\n }\r\n\r\n .heading-element {\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n:host(:not([not-collapsible])) {\r\n .heading-element {\r\n cursor: pointer;\r\n\r\n @include anchor.pseudo();\r\n }\r\n\r\n .editaction-label {\r\n margin-left: document-component.$indent;\r\n }\r\n}\r\n\r\n.addons {\r\n margin-inline-start: auto;\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n display: flex;\r\n align-items: start;\r\n gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]) {\r\n .heading-element,\r\n .toggle-button {\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-left: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n padding-right: units.$u1;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\nimport {\r\n DocumentComponentOpenToggleEvent,\r\n DocumentComponentToggleAnnotationEvent,\r\n DocumentComponentOzonContentAnchorClickEvent,\r\n DocumentComponentWijzigactie,\r\n DocumentComponentInputType,\r\n DocumentComponentMarkFunction,\r\n DocumentComponentMarkItemHighlightEvent,\r\n DocumentComponentRecursiveToggleEvent,\r\n DocumentComponentRecursiveToggleState,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigActieLabels: { [wijzigActie in DocumentComponentWijzigactie]: string } = {\r\n nieuweContainer: \"Toegevoegd\",\r\n verwijder: \"Verwijderd\",\r\n verwijderContainer: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n tag: \"dso-document-component\",\r\n styleUrl: \"document-component.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n /**\r\n * The heading element to use.\r\n */\r\n @Prop()\r\n heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n /**\r\n * The Label XML.\r\n */\r\n @Prop()\r\n label?: DocumentComponentInputType;\r\n\r\n /**\r\n * The Nummer XML.\r\n */\r\n @Prop()\r\n nummer?: DocumentComponentInputType;\r\n\r\n /**\r\n * The Opschrift XML.\r\n */\r\n @Prop()\r\n opschrift?: DocumentComponentInputType;\r\n\r\n /**\r\n * The Inhoud XML.\r\n */\r\n @Prop()\r\n inhoud?: DocumentComponentInputType;\r\n\r\n /**\r\n * This boolean attribute indicates whether the children are visible.\r\n */\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /**\r\n * Marks this Document Component as belonging to an active filter.\r\n */\r\n @Prop({ reflect: true })\r\n filtered = false;\r\n\r\n /**\r\n * Marks this Document Component as not-applicable.\r\n */\r\n @Prop({ reflect: true })\r\n notApplicable = false;\r\n\r\n /**\r\n * When a child Document Component has a status \"Draft\".\r\n */\r\n @Prop({ reflect: true })\r\n genesteOntwerpInformatie = false;\r\n\r\n /**\r\n * Marks as draft.\r\n */\r\n @Prop({ reflect: true })\r\n bevatOntwerpInformatie = false;\r\n\r\n /**\r\n * Enables annotations.\r\n */\r\n @Prop({ reflect: true })\r\n annotated = false;\r\n\r\n /**\r\n * Marks Document Component as reserved.\r\n */\r\n @Prop()\r\n gereserveerd = false;\r\n\r\n /**\r\n * Marks the Document Component as expired.\r\n */\r\n @Prop()\r\n vervallen = false;\r\n\r\n /**\r\n * When the Annotation Output is opened, set this to true.\r\n */\r\n @Prop()\r\n openAnnotation = false;\r\n\r\n /**\r\n * An alternative title to show when there is nothing to create a title.\r\n */\r\n @Prop()\r\n alternativeTitle?: string;\r\n\r\n /**\r\n * Type of Document Component.\r\n */\r\n @Prop({ reflect: true })\r\n type?: string;\r\n\r\n /**\r\n * The wijzigactie as in STOP.\r\n */\r\n @Prop({ reflect: true })\r\n wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n /**\r\n * To mark text.\r\n */\r\n @Prop()\r\n mark?: DocumentComponentMarkFunction;\r\n\r\n /**\r\n * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n */\r\n @Prop()\r\n recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n /**\r\n * Emitted when the user activates the recursive toggle.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the toggle.\r\n */\r\n @Event({ bubbles: false })\r\n dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n /**\r\n * Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n */\r\n @Event({ bubbles: false })\r\n dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the annotation button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n /**\r\n * Emitted each time a marked item gets highlighted.\r\n */\r\n @Event({ bubbles: false })\r\n dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n private get wijzigactieLabel(): string | undefined {\r\n return this.wijzigactie && wijzigActieLabels[this.wijzigactie];\r\n }\r\n\r\n private handleHeadingClick = (e: MouseEvent) => {\r\n if (this.type !== \"LID\") {\r\n this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n }\r\n };\r\n\r\n private suffix(): string | undefined {\r\n if (this.vervallen) {\r\n return \"vervallen\";\r\n }\r\n\r\n if (this.gereserveerd) {\r\n return \"gereserveerd\";\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n };\r\n\r\n private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n this.dsoRecursiveToggle.emit({\r\n originalEvent: e,\r\n current: this.recursiveToggle,\r\n next: this.recursiveToggle !== true,\r\n });\r\n };\r\n\r\n render() {\r\n const suffix = this.suffix();\r\n const collapsible = !!(\r\n (this.label || this.nummer || this.opschrift || this.alternativeTitle) &&\r\n this.type !== \"LID\"\r\n );\r\n const showHeading = !!(\r\n this.wijzigactie ||\r\n collapsible ||\r\n this.label ||\r\n this.nummer ||\r\n this.opschrift ||\r\n this.alternativeTitle ||\r\n this.bevatOntwerpInformatie ||\r\n this.annotated\r\n );\r\n\r\n return (\r\n <Host not-collapsible={!collapsible}>\r\n {showHeading && (\r\n <div class=\"heading-container\" part=\"_heading-container\">\r\n {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n <div class=\"heading\">\r\n <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n {collapsible && (\r\n <button\r\n type=\"button\"\r\n class=\"toggle-button\"\r\n aria-describedby=\"heading-title\"\r\n aria-expanded={this.open.toString()}\r\n >\r\n <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n </button>\r\n )}\r\n <div id=\"heading-title\">\r\n {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n {this.label || this.nummer || this.opschrift ? (\r\n <>\r\n {this.label && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.label}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n {this.nummer && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.nummer}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n {this.opschrift && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content\r\n content={this.opschrift}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n }\r\n inline\r\n ></dso-ozon-content>\r\n </>\r\n )}\r\n </>\r\n ) : (\r\n this.alternativeTitle\r\n )}\r\n {suffix && <span> - [{suffix}]</span>}\r\n </div>\r\n </Heading>\r\n {this.recursiveToggle !== undefined && this.open && (\r\n <button\r\n type=\"button\"\r\n class=\"recursive-toggle\"\r\n title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n onClick={this.handleRecursiveToggleClick}\r\n >\r\n <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n </button>\r\n )}\r\n {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n <>\r\n <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n !\r\n </dso-badge>\r\n <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n </>\r\n )}\r\n {(this.bevatOntwerpInformatie || this.annotated) && (\r\n <div class=\"addons\">\r\n {this.bevatOntwerpInformatie && (\r\n <dso-label status=\"warning\" compact>\r\n Ontwerp\r\n </dso-label>\r\n )}\r\n {this.annotated && (\r\n <dso-annotation-button\r\n identifier=\"expandable\"\r\n open={this.openAnnotation}\r\n onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n ></dso-annotation-button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n <div class=\"annotation-container\" part=\"_annotation-container\">\r\n <slot name=\"annotation\" />\r\n </div>\r\n {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (\r\n <div class=\"content\" part=\"_content\">\r\n {this.gereserveerd && (\r\n <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n )}\r\n {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n {this.inhoud && (\r\n <dso-ozon-content\r\n content={this.inhoud}\r\n onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n }\r\n />\r\n )}\r\n </div>\r\n )}\r\n <div class=\"children-container\" part=\"_children-container\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/esm/dso-annotation-werkingsgebied.entry.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-c92edd88.js';
+import { A as AnnotationDiffRenderer, a as AnnotationGewijzigdeLocatie, b as AnnotationBody } from './annotation-gewijzigde-locatie-3d8aa3ad.js';
+const annotationCss = "ins{text-decoration:none;--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)}ins a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919;text-decoration:line-through}del a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host{display:block}: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}";
+const DsoAnnotationWerkingsgebiedStyle0 = annotationCss;
+const AnnotationWerkingsgebied = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoActiveChange = createEvent(this, "dsoActiveChange", 7);
+        this.wijzigactie = undefined;
+        this.active = undefined;
+        this.gewijzigdeLocatie = undefined;
+        this.locatieNoemer = undefined;
+    }
+    render() {
+        return (h(AnnotationBody, { key: '5ff15871ff44f3ce0120bbd38e01745db2bcddf8', active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h(AnnotationDiffRenderer, { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+    }
+};
+AnnotationWerkingsgebied.style = DsoAnnotationWerkingsgebiedStyle0;
+export { AnnotationWerkingsgebied as dso_annotation_werkingsgebied };
+//# sourceMappingURL=dso-annotation-werkingsgebied.entry.js.map

package/dist/esm/dso-annotation-werkingsgebied.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-annotation-werkingsgebied.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,i9GAAi9G,CAAC;AACx+G,0CAAe,aAAa;;MCcf,wBAAwB;;;;;;;;;IA+BnC,MAAM;QACJ,QACE,EAAC,cAAc,qDACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,kBACE,YAAM,KAAK,EAAC,SAAS,IACnB,EAAC,sBAAsB,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CAChD,EACN,IAAI,CAAC,iBAAiB,IAAI,EAAC,2BAA2B,OAAG,CACzD,GAEL,EACF;KACH;;;;;;","names":[],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-werkingsgebied&encapsulation=shadow","src/components/annotation/annotation-werkingsgebied/annotation-werkingsgebied.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/insert/insert\" as *;\r\n@use \"~dso-toolkit/src/components/delete/delete\" as *;\r\n\r\n:host {\r\n display: block;\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","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationDiff, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationDiffRenderer } from \"../annotation-diff-renderer\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n tag: \"dso-annotation-werkingsgebied\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationWerkingsgebied 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 noemer van de locatie.\r\n */\r\n @Prop()\r\n locatieNoemer?: AnnotationDiff | string;\r\n\r\n render() {\r\n return (\r\n <AnnotationBody\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <span class=\"content\">\r\n <AnnotationDiffRenderer value={this.locatieNoemer} />\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/esm/dso-attachments-counter.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const AttachmentsCounter = class {
         this.count = undefined;
     }
     render() {
-        return (h("span", { key: 'cd8239d516bd4ea96cdb3d6273d092e1441aa5bb', class: "dso-attachments" }, this.count, " ", h("span", { key: 'b050b4ad32bbab6403b7cff89fe7f2f5c1aa5786', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '2ad49e0eb4a1f41bee68b5348a25ab1a5fce7b0e', icon: "paperclip" })));
+        return (h("span", { key: '54b3a9b513d57c2ee0aa40d654e365445affd021', class: "dso-attachments" }, this.count, " ", h("span", { key: 'ca1ae3ac9b052e1e4aba77487aa82c91c1d8577c', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '234da788bfb62fce6fa08f6d99fd0fc7a863b5f8', icon: "paperclip" })));
     }
 };
 AttachmentsCounter.style = DsoAttachmentsCounterStyle0;

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

@@ -278,7 +278,7 @@ const Autosuggest = class {
     render() {
         var _a, _b;
         const terms = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value.split(" ").filter((t) => t)) !== null && _b !== void 0 ? _b : [];
-        return (h(Fragment, null, h("slot", { key: '09b8007a9093730c9198eb3298b7c653138c2647' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (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 &&
+        return (h(Fragment, null, h("slot", { key: '0f00f7ea891f7614aeef586b69a4bcd9b75d33f8' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (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 &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (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 }, h("div", { class: "suggestion-row" }, h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type ? h("span", { class: "type" }, this.markTerms(suggestion.type, terms)) : undefined), suggestion.extras &&
                 this.getChunkedExtras(suggestion.extras).map((chunk) => (h("div", { class: "suggestion-row" }, chunk.map((c) => (h("span", { class: "extra" }, this.markTerms(c, terms))))))))))) ||

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

@@ -12,9 +12,9 @@ const Banner = class {
         this.noIcon = true;
     }
     render() {
-        return (h("section", { key: 'a5cb823753eda49087b357498f5b92e3a042d46d', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: 'b8ca330b6db6505cf178f85cf8f970012b13585d', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("slot", { key: '9c76ee38f37a2f5d1c246d21bcfb40f801882de4' })));
+            }), role: "alert" }, h("slot", { key: 'f759d4207e830eb6a420d660b2a40775df7a0573' })));
     }
 };
 Banner.style = DsoBannerStyle0;

package/dist/esm/dso-card-container.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const CardContainer = class {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '54a6e926c22a118a77119add63558c55a7ef2cf9', class: "dso-card-list" }, h("slot", { key: '63777d504620cbc54a94a95bbada8b7028ef5d92' }))), this.mode === "grid" && (h("div", { key: '3b0feb3331f54fb7f084ad4c1e3bb18ddca6ee9d', class: "dso-card-grid" }, h("slot", { key: '0bc1a70a40326d61cfa9af7b8cdf8e73bb8d39cf' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '4628edd1ea9ebde12abc69482a3586df6824e897', class: "dso-card-list" }, h("slot", { key: '28f8c7af2cb269d034aead2d8f8b24ff36a9707a' }))), this.mode === "grid" && (h("div", { key: '53a740a4c52d3844ea02570259805ae7c98424a2', class: "dso-card-grid" }, h("slot", { key: '300b540b919ea82d20cb9d4fa57ad88cd342e734' })))));
     }
 };
 CardContainer.style = DsoCardContainerStyle0;

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

@@ -62,9 +62,9 @@ const Card = class {
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
         const hasImage = this.imageSlottedElement !== null;
-        return (h(Host, { key: 'b9cc1a47bc39e6e2011ba6412436ab855d9819cf', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, h("div", { key: 'b8a059c5b2cc2f29392e0311fcbb3a02b1b39580', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '304c0dad6a73ebb2ad12f7c4e0a807d53c7ca660', name: "selectable" })), h("div", { key: '3e976d9e8eb0fbc3578a8fc6f32687f97ca6fc69', class: "dso-card-image", hidden: !hasImage }, h("slot", { key: 'e10f2acff35dcd3316f0cb14575d5d2e4ab86c95', name: "image" })), h("div", { key: 'c7d437cc6d54eab8e9d6ad45411230498b243466', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" })))) ||
+        return (h(Host, { key: '0c66649451517f7964437001acc82fa555882caf', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, h("div", { key: 'f422f604c9fe91dfe284b4b01bbf3c053228b056', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '2b1401266e44bb6970849763ecd3b09c2a54ebcc', name: "selectable" })), h("div", { key: 'c2e9b599af341e366dcae1abb8435fcdb8d98074', class: "dso-card-image", hidden: !hasImage }, h("slot", { key: 'fe525fc9248bfdd7482975a6a367c28cda331c95', name: "image" })), h("div", { key: '5811c5f9891e07c486820d28391a83bfc21a5bfc', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" })))) ||
             (this.mode === "extern" && (h("a", { href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && h("slot", { key: 'f318d02fe89a6aa2a9377e2f32d72726c848c42f', name: "interactions" })), h("div", { key: '7b725b7edeee93b237352eff09ae2574647b9a3b', class: "dso-card-content" }, h("slot", { key: '9f855efe124e2a273b1ecb465b27bc7e01ac10e9', name: "content" }))));
+            (this.mode === "download" && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && h("slot", { key: '330c90621b89d1565a35474af14f5bced644dc70', name: "interactions" })), h("div", { key: '11cd1a110f6c5fbbd52611183a8dc6f87448016e', class: "dso-card-content" }, h("slot", { key: 'f7cc4cbd9fe205a75004a65ae8c62df4f62ccac9', name: "content" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-date-picker-legacy.entry.js CHANGED Viewed

@@ -683,14 +683,14 @@ const DsoDatePickerLegacy = class {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '0d44852b99b1006f832d6152ae1b87e50217ec6e' }, h("div", { key: '4e755890cac5c88b652b26502e9d6c62c3c937ee', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'ee6c9f4148c6e596e0e9048e54a9def781bdc305', class: "dso-date__input-wrapper" }, h("input", { key: 'd5b42b063f766f9da27be35ef0322e38732692a2', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'a0261139cf4d0711eedc8c9d72753d511300c3d6', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '87aaec0f14c6daa6916d6c0a9e61b04ef14ce246', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'fec0416f1f93f5092d4e836afe69481c3ad9044c', icon: "calendar" })), h("span", { key: 'dfd3fbef9642d501844678308cc6d886622a936d', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'eae56bddc49e78aa4e170a62133ec9949a40e5f3' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'a0bbde0cc7570ea2464de4984c92e64b187e8f3a', class: {
+        return (h(Host, { key: '45dc93382b869cae594c284f5a64777b6ce83e20' }, h("div", { key: '4fa976df3079d11e19701c1d4d10225030c8bff8', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'ad246de32f9a5f2ac702c3761500cc901fee74eb', class: "dso-date__input-wrapper" }, h("input", { key: '2ec69c422cc6a54d914e1f8a09832cde659a0ffd', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'f4d34fdea62b07dd8ebd23ab1cd390fb19523ed9', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '3682b7a30487d85e6c4a26d191ee27fe304b5b1d', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'f9b2452ab20fa94fdee09a106ab623f888811ea5', icon: "calendar" })), h("span", { key: '687934d98c04cfb2d9bdc5047d07578492e3b4d3', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'c1d7907d3c24d8cbf5f2833d6dd25d98eaef9630' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '152358db0119a3d29d5bb8b91d7a2ad84ee40855', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '8f9cb9231fd88b0878d270871a2598e57929043c', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'ad7001f585453658356a2e8f2c3fa59e593b91b4', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '454aaebe38060202a2872bd9c1e8893a41ec40e1', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '114bb52abf3a2daaef6488825acad2f29aaa0540', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '59d9ba2a8a55cc266efb2694193fb0efcd9afffc', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'ca7a9db774c7474693664bb7daa99d9bce47695d', icon: "times" }), h("span", { key: '060ef03cec2db78e846e0858cc7700a5bb41b70e', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '97144b176487392f8f640156b694dc859b797b45', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '5918645d15cd79776d0f3ce0dce438417c993e5e' }, h("h2", { key: '03767b55b99b31eb727e7db5f0bc9067db4271a0', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'f048f03596e454982c2769e8049cea3086a4cc76', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'b3185f05873edd915a78cce1e2e6c70780a97bd9', class: "dso-date__select" }, h("select", { key: '09655b2da5551d17eae5d70b1db4425b643165ed', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'ac00557f0f9e40c668d81863fd3c25d208f0ee4c', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '7178016b07bbd57788d44e31fded5cc8f828b3d3', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '4511337996a99964eb4fd97e1bcf612b3f9454a0', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'c20e75cab9fcdc3541f5bc0eaf5e881b94f5e315', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'e1e61f43af41624dfd07801840f5e0b081bd714b', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '84aa4dfe2e0a07bb4e596e5d0bf03fcb86c20d57', icon: "times" }), h("span", { key: '3b1ef4ac7a0ac1d24a5add77c20896bba4f46af7', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '9e4e06d30b41a3ce5aefbb808db87cdf6e883884', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '0b89be253bfd409054a52412969ae2ae6120e382' }, h("h2", { key: '94b922c24f610ce05ce907abcd6014e93f5c155f', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '3813086ca6ee3951d32ad451f1f86c5493f5c4a7', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '834c834c3e941de77ac8cf2d0ccf6bbf0581a2de', class: "dso-date__select" }, h("select", { key: 'aae80a3eaf0c5c997ec53b960f3e33f7e72bfe89', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: '5208271a489ed99f5d874baafae4fae675138a93', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '0e1e526e9fee6367546142cfda834a31375c5634' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '1a790f9dfb8d4ea4a41bb286a7a125534922c95b', icon: "chevron-down" }))), h("label", { key: 'de5f0145a3c317a6eb390d01e41e9dd73e720e7e', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '877369c7d3b8b060c0d02f1e822f725d320f14b2', class: "dso-date__select" }, h("select", { key: 'b591672b9c3f307fca7e2a6313a38d4cce391bb2', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '684aec6cba9eff6e0f9766e2196a3fe534a40a0f', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'f39c5042ef1924d1652f010ca81c2f506b9b37fe' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '04adcae74bc190c443490dfc464b2be52f221c14', icon: "chevron-down" })))), h("div", { key: 'c3900f0e93e22eda46450cf898eb4e847c81a2c2', class: "dso-date__nav" }, h("button", { key: 'da36bdc09cba1daa3b4eba282f4ee5b829c393fa', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'c8f5fb75ddb06106081f2674ecbecf0f05bf0f76', icon: "chevron-left" }), h("span", { key: 'ec76f5492eaeaac4a8f80c1de158688a70f4da65', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '6441cdaa0bbc797e56279a86cfc53741df63d517', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '927ddbfac72287e32f0b09d6347f6e46787c7e3b', icon: "chevron-right" }), h("span", { key: 'a3fed3e29cb71f53e5be193503ea275dcea61b7c', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: 'f2bfde3fa648e0f00cff22ed58d84347dcc01d56', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: 'f9ee321259103e88e5b76bb87cca77860e65b2c1', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'ca117ccf3aeaf9876d3fd627762a7696f3f4e1a4' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '244ffcb4f8a336c8deefc69c14688405e1bc23f7', icon: "chevron-down" }))), h("label", { key: 'f01dc78c49881d6c7d88ca39890e70d0e9785559', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'b3bae01d2ed53da52269a63c86fe291cfca76292', class: "dso-date__select" }, h("select", { key: '63bb09515fa036307995ce4812088e0828f50484', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'db7adc0799385cbe2d60f022acdf73e4ca33ed40', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'f3eaddb8cdc45daf9ef8574509bcc415e675dcc2' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'cb415d3468b9f163f4400d820d22e62406eda2d9', icon: "chevron-down" })))), h("div", { key: '7beead2ff31b3c6b6736c11679d12725e9634ff1', class: "dso-date__nav" }, h("button", { key: 'b21c215d623f5243c3d81e327e383bb062af3db8', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'b755c8a2aafd1676ed517dfe6e303fd69337d415', icon: "chevron-left" }), h("span", { key: '77126a760003533cad64ab8d423b9d945f33f24e', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'f17d30a36392a95ef8d8bf7096674c123231ca82', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: 'fdf88a664810c744eb9da6a6bea4343e09a0aef6', icon: "chevron-right" }), h("span", { key: 'cb017e38ad087b2ded215880fe405a915cdd3922', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: 'ae4da41ad13aa21365703e8470485cef9f8dc994', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-date-picker.entry.js CHANGED Viewed

@@ -137,7 +137,7 @@ const DsoDatePicker = class {
     }
     render() {
         var _a;
-        return (h("input", { key: 'ab327f9e162793c1abdcdd3b7e1242b6ddee1ddb', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: '05ac3c8f265e1cbea015e9cd05bf4a298a7e8e37', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-dropdown-menu.entry.js CHANGED Viewed

@@ -212,7 +212,7 @@ const DropdownMenu = class {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: 'eb56d9c3c656eb150bd5aaca3dac3b8a08c8cd72', onFocusout: this.focusOutListener }, h("slot", { key: 'de13bf1d689fe5b7923765ff34d9419e0f4504d6', name: "toggle" }), h("div", { key: 'a49e77fa7e5fd6d9f77aa05d6e14674779665af0', hidden: !this.open }, h("slot", { key: 'f6c6c8529f638e5a0ff7f76764cd5a96e975e97f' }))));
+        return (h(Host, { key: '77ac6cc50a707d48310edd4224d192d9e8e3cc1b', onFocusout: this.focusOutListener }, h("slot", { key: '3388875ba46e7f5b9711ab3ebdd08daa39e98d22', name: "toggle" }), h("div", { key: '68362bca01cb7f86c6a2e9f760aa5af7a25fcf14', hidden: !this.open }, h("slot", { key: '653ec1ca00468188bf45ef2f6bde361ff8590f56' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -83,10 +83,10 @@ const HelpcenterPanel = class {
         }
     }
     render() {
-        return (h(Fragment, null, h("button", { key: 'd8a03771c37da24b79a4037c5313d7977e9ad135', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: '9baf7a627c7f13704d8981597acdeeb5fab4ec36', icon: "help" }), h("span", { key: '7a0d3fa0b3395da9151b1df46dc64705c9da7360' }, this.label)), h("div", { key: 'b9679cb522e5292abcf19019cf98018d5759f14b', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '95d6f562523690715a468ffbcad1049f23ef1dcf', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '119aa32731566a0126a9ae4e1574f4a8d120f162', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
+        return (h(Fragment, null, h("button", { key: '7ebc1495b2933c451a256a4006cc8282e8f2325e', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: '119fcbef430ef1808b1a7890dafae7a989ac84d8', icon: "help" }), h("span", { key: '2d92f7abc9c01f217e59f3560ff6ebfb7cc1161b' }, this.label)), h("div", { key: 'f57b69556a038441adc316cce74c5e29b455ff4c', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '4ca3979f6e933c0b102d8443f494d52a51629605', class: "dimscreen", onClick: this.closeClick }), h("div", { key: 'da51b5c07f9bca49f35c0894997634ab736ab44d', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
                 this.createTrap();
                 this.iframeLoaded = true;
-            } })) : (h("div", null))), h("button", { key: '6527714c7de5c6261f76ae41d0e00fd152463e41', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: 'fce79d104ac97fb79298923b128ef8ab0c95123c', icon: "times" }), h("span", { key: '8091ac03b2091414b9786fbc9cc37b8bf8f3a311', class: "sr-only" }, "sluiten")))));
+            } })) : (h("div", null))), h("button", { key: 'bf2c1b8eee6509c14ea3710e60c83c2fbc949517', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '3ece8241d7f302a9471ce232e763955a8ffb3094', icon: "times" }), h("span", { key: '284e9eadf0404f45c34b128ff833f0e0e5e81642', class: "sr-only" }, "sluiten")))));
     }
     static get watchers() { return {
         "url": ["watchUrl"],

package/dist/esm/dso-highlight-box.entry.js CHANGED Viewed

@@ -15,7 +15,7 @@ const HighlightBox = class {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '4334f13da16a3005e01e815a0998fdcbc87f31e8', "has-counter": hasCounter }, hasCounter && h("div", { key: '553cb9e7150fb6c603c9bbbc0d2307170416ee3b', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'faf8811c78d6c918c2624f43c75d6241209be209', name: "icon" })), h("slot", { key: '2bfd070a41a5f969d5cb1d24ce1a6846e68c5ceb' })));
+        return (h(Host, { key: '94dfaf9efb9d2cb1f5910b8dd0f4cc37f8b24c17', "has-counter": hasCounter }, hasCounter && h("div", { key: '005ab4e5b5cec05e4b16e32e8fa6ee8e1da0eb06', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'e6f814e0bb7f5f791f441cd78bd25a0c14e3e60e', name: "icon" })), h("slot", { key: '2dfc8c0d8ea3222c2e8b5a59f168b3df80b70bcc' })));
     }
     get element() { return getElement(this); }
 };

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

@@ -658,7 +658,7 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: 'ce873c525c717b5effd7d4fe9691057911e3e0c3', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '118278e8190607c65d05559091539e28fd27b1f8', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };

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

@@ -25,7 +25,7 @@ const InfoButton = class {
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (h(Host, { key: 'a9cd435470f76f47e46ec94746158b8b94ba151d', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '84de4a37a8880ec1328a8d176b8a44cf53cd24fe', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '4386441800c5cdebc81fbb55a036231b3322cba3', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'f7d894eba3425b76d12265eb00cb181f41a221ff', class: "sr-only" }, this.label))));
+        return (h(Host, { key: 'f92cf2e064117a666eff6e06918d1b8bfaa0ae4b', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '9a9a095f29dff2d7ef53be6df2a5bb0de1fd9673', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: 'b2fc1665fa93d7a131833fc71b9cd17b0b29f5c6', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '9aa27a9e5ecc316e89c5ad0af463e711328d1857', class: "sr-only" }, this.label))));
     }
 };
 InfoButton.style = DsoInfoButtonStyle0;

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

@@ -13,7 +13,7 @@ const Info = class {
         this.active = undefined;
     }
     render() {
-        return (h(Fragment, { key: '09663182b8699ecc6803337c3b2a61cb939e2cf9' }, h("slot", { key: '28d4d320a7d126a4cf23e7822dece8e8594e0d9c' }), !this.fixed && (h("button", { key: '6559c0efe3070bfb14d29bc66c6b4bfdd40f23ae', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '9880632ccab83f3ef7c318c09276b2efa560b170', icon: "times" }), h("span", { key: 'f8dbd51bcb3e17ba41a00acc42a76eb8cdebd69a', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: 'e5f657a636b290b194ccbb89b8cd10c361a3addd' }, h("slot", { key: '08ff21c78926849c1b0461abfc551f96fd4a769a' }), !this.fixed && (h("button", { key: '5312aa3e0b79e3c46c28b272b1fe2161f3c625a2', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '7473fe06abfd42aa7c39eb97b4ea1b8113e9bfe4', icon: "times" }), h("span", { key: 'e5b9d4414e871ff4ec15e18adb6ab819ddcfb0f5', class: "sr-only" }, "Sluiten")))));
     }
 };
 Info.style = DsoInfoStyle0;
@@ -80,7 +80,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '9b3a5a7eded8a2c4fa778a78506cf3830eeb2158' }, h("div", { key: '77eb55ac077f2165af3eeabbc7d905aafa9ac00b', class: "dso-selectable-container" }, h("div", { key: '2a76089b151a5bda6f92fc6db37520a36a4c0c8a', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '753871d7f427daac250481c45d53f277ce0e9aaa', 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 ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '33b894964ac606b03da670d53dcd4766ed73ce9c', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '625d8c5d96d9e40cce6bbe2d06ed27cb51093d05', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '762e207474ba137a6e49c18f4f95012715867768' }, h("slot", { key: '4d7c20a761021788cd034fd0b6fc1f1fb9b73045', name: "info" })))), h("slot", { key: '95f6353ece9a423f9e1a6f300ae67f456465199b', name: "options" })));
+        return (h(Fragment, { key: '1f81229a1f1fef108068804fad7761151b9c074f' }, h("div", { key: 'fbd1cf9ab0ff933b7c0fb183c6be54c543502967', class: "dso-selectable-container" }, h("div", { key: '5d5b101e3b05e07a36b4cb1f0927bd55ccc459db', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '094554197b315b6a992a43360b229f0d898ae480', 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 ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '68d97d170c77ad983efcd6511ce23df320d3b23d', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '54eca001300dd947e79f5f5cb9c91fc9f44a6a94', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'f3d478436c5b8428b10802953423aa237fb6c4a3' }, h("slot", { key: 'c0b0a05b5997a90a11581b7be95f3443e2cbb8a7', name: "info" })))), h("slot", { key: '7c8d8bd9c10289b068d1e544995cbebfbb7ee8e7', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/esm/dso-input-range.entry.js CHANGED Viewed

@@ -19,13 +19,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '829624123680fa59c806e0132b82eadf27dea57d', id: "description", hidden: true }, this.description)), h("span", { key: '2c6d87fccc090ea43c9dcdb14c095a6b5ed991bf', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '22fd3842ea717541d8bae1d0d394ec41fb62be26', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '01c22533d0eddbb7bb513317c531bcc04ab5d12f', id: "description", hidden: true }, this.description)), h("span", { key: 'fc58429b96deef9728b7ede4707176124d5b2ca5', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'a9bee5cb4aef9a32141b12237a8cd80d453599a1', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '69bacfe004281c5aff9f269cc1b4e58fe5823673', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '883c3c66f15ae009ea147c265da96ba1b8e2167a', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-label_2.entry.js ADDED Viewed

@@ -0,0 +1,160 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-c92edd88.js';
+import { c as clsx } from './clsx-297c1ffe.js';
+import { d as debounce } from './index-baba34a8.js';
+import { v as v4 } from './v4-23648a96.js';
+const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-width:100%;padding:4px 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:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top: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:0 8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
+const DsoLabelStyle0 = labelCss;
+const resizeObserver = new ResizeObserver(debounce((entries) => {
+    entries.forEach(({ target }) => {
+        if (isDsoLabelComponent(target)) {
+            target._truncateLabel();
+        }
+    });
+}, 150));
+function isDsoLabelComponent(element) {
+    return element.tagName === "DSO-LABEL";
+}
+function hasEllipses(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+const Label = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoRemoveClick = createEvent(this, "dsoRemoveClick", 7);
+        this.compact = undefined;
+        this.removable = undefined;
+        this.status = undefined;
+        this.removeHover = undefined;
+        this.removeFocus = undefined;
+        this.truncate = undefined;
+        this.textHover = undefined;
+        this.textFocus = undefined;
+        this.isTruncated = false;
+        this.labelText = "";
+    }
+    watchRemovable(removable) {
+        if (removable) {
+            this.startMutationObserver();
+        }
+        else {
+            this.stopMutationObserver();
+        }
+    }
+    watchTruncate(truncate) {
+        if (truncate) {
+            this.startTruncate();
+        }
+        else {
+            this.stopTruncate();
+        }
+    }
+    keyDownListener(event) {
+        if (event.key === "Escape") {
+            this.textHover = false;
+            this.textFocus = false;
+        }
+    }
+    /**
+     * @internal
+     */
+    async _truncateLabel() {
+        setTimeout(() => {
+            this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);
+        });
+    }
+    syncLabelText() {
+        var _a, _b;
+        this.labelText = (_b = (_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.startTruncate();
+        }
+        if (this.removable) {
+            this.startMutationObserver();
+        }
+    }
+    disconnectedCallback() {
+        this.stopTruncate();
+        this.stopMutationObserver(true);
+    }
+    /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
+    startMutationObserver() {
+        this.mutationObserver = new MutationObserver(() => this.syncLabelText());
+        this.mutationObserver.observe(this.host, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+        this.syncLabelText();
+    }
+    stopMutationObserver(force = false) {
+        var _a;
+        if (force || !(this.truncate && this.removable)) {
+            (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            delete this.mutationObserver;
+        }
+    }
+    startTruncate() {
+        resizeObserver.observe(this.host);
+        this.startMutationObserver();
+        this._truncateLabel();
+    }
+    stopTruncate() {
+        resizeObserver.unobserve(this.host);
+        this.stopMutationObserver();
+        this.isTruncated = false;
+    }
+    render() {
+        return (h(Fragment, { key: '7d0859b14bf6b8b6bc1f1ea7f6e6428431cc1197' }, h("span", { key: 'b1c8c1302f21caaaebb0193a171a95e4330b92b8', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+                [`dso-label-${this.status}`]: this.status,
+                "dso-compact": this.compact && !this.removable,
+                "dso-hover": this.removeHover || this.removeFocus,
+            }) }, h("slot", { key: '5f3f5b65b4e4b44949b817800b505c5db1d25275', name: "symbol" }), h("span", { key: '6070e0d015cf2464121cf0dfb0088676ab00628b', class: clsx("dso-label-content", {
+                "dso-truncate": !!this.truncate,
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '04b20cade12d23246ce7b21e1aae447689e9c1c7' })), this.removable && (h("button", { key: 'bb184213b1ca01f83e2a1f265429293f3dda8f3b', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '9805c7dcd105ba5a6a59e75e822250defb107940', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '19fef3d7fbd4b017cc880bc02fb3408706536933', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'c136e39ed459e5c4680888b2a27bd0c17485406b', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "removable": ["watchRemovable"],
+        "truncate": ["watchTruncate"]
+    }; }
+};
+Label.style = DsoLabelStyle0;
+const slideToggleCss = "button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";
+const DsoSlideToggleStyle0 = slideToggleCss;
+const SlideToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoActiveChange = createEvent(this, "dsoActiveChange", 5);
+        this.checked = false;
+        this.disabled = false;
+        this.accessibleLabel = undefined;
+        this.labelledbyId = undefined;
+        this.hasVisibleLabel = undefined;
+        this.identifier = v4();
+    }
+    handleSwitch(e) {
+        this.dsoActiveChange.emit({
+            originalEvent: e,
+            checked: !this.checked,
+        });
+    }
+    componentWillLoad() {
+        this.hasVisibleLabel = this.host.querySelector("*") !== null;
+    }
+    render() {
+        return (h(Fragment, null, h("button", Object.assign({ key: 'f8675793bcdd4b88ca76fa4e3739a5e7a76ebbb0', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '3aea12f6ceb0ca2aaa708afe2345f9fc45b5f982', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '8e1d9f35b03bc2c5eae7fe28b5f0966f76eb70d4', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'bdf984ae055e5b6b994da64526b260082935b43e', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'bc009a77fdf29e0901b089d22cf73383b3172c9c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'c623527a4f867e5bb7745d97f77d5f6515e8b9fd', htmlFor: this.identifier }, h("slot", { key: 'bef77c8f156edc05a4e549d0a9aa0d5c33e6797f' })))));
+    }
+    get host() { return getElement(this); }
+};
+SlideToggle.style = DsoSlideToggleStyle0;
+export { Label as dso_label, SlideToggle as dso_slide_toggle };
+//# sourceMappingURL=dso-label_2.entry.js.map

package/dist/esm/dso-label_2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-label.dso-slide-toggle.entry.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-width: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-width: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement | undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /**\r\n * For compact Label\r\n */\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /**\r\n * Shows a button that can be used to remove the Label.\r\n */\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /**\r\n * The status of this Label.\r\n */\r\n @Prop()\r\n status?: \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n\r\n /**\r\n * Emitted when the user activates the remove button.\r\n */\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /**\r\n * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n */\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force || !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover || this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover || this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /**\r\n * Set to true if Slide Toggle is checked.\r\n */\r\n @Prop()\r\n checked = false;\r\n\r\n /**\r\n * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n */\r\n @Prop()\r\n disabled = false;\r\n\r\n /**\r\n * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n */\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /**\r\n * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n */\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /**\r\n * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n */\r\n @Prop()\r\n identifier = v4();\r\n\r\n /**\r\n * Emitted when user checks or unchecks the Slide Toggle.\r\n */\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/esm/dso-legend-item.entry.js CHANGED Viewed

@@ -28,10 +28,10 @@ const LegendItem = class {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: 'e50f1d84ed48c4fc88ebdf2d473ee0f67bec22fe', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '98ccac5c97c900a0eefe58baa4d69747847b2fbf', class: clsx("legend-item", {
+        return (h(Host, { key: '3a732bff9d1e998b7468c7e508edf41e472cdf1f', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '8b2bba6b998955c91e5d67fa6dcd4424807b7c2a', class: clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, h("div", { key: 'f73cdf97e65e6d50fd8c8e073c2abf902d148511', hidden: !hasSymbol }, h("slot", { key: 'd18b7efd00c137f3b9fe96b00eabbafe9f8c8ae1', name: "symbol" })), h("div", { key: '8a0a4212aa989367d869a949bba1984af4e3d2c1' }, h("slot", { key: '35285a0f129c3d0e64f5925b5e46e1d1246603fd' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '93727ab6ba53cd605b1a0df5a5d14b281653cef7', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: '5d72df7e74cc74cb2e5cdede86bace5129c97906', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: '6cb45e90d3e30e709f6bed348ae29e2931c34f11', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: '3ec5613fc71e021bcaca961ab4d858f7aeb408c2', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: '690784310b84fa49590680db6b7ab42aec5e34e8', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: 'df9051dcd36487f51cbfb6014e4921ce405db3e3', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '8d047e9c90f888a5b3a60c41829845bd1bcd0538', icon: this.showBody ? "times" : "more" })))), h("div", { key: '8f90acc7de95c518749e0cdbd100f38195911dbb', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: '9d743680ea76b8daec3ef131ca244603eba4a996', name: "body" }))));
+            }) }, h("div", { key: '1f3bb12d214ed0877786a195dbae6185b00b6c97', hidden: !hasSymbol }, h("slot", { key: '032e27bcad7cf0a711e7afe05f782c7d51246d1d', name: "symbol" })), h("div", { key: '7ba425d10db6401e450090b94824bb66ff709e9b' }, h("slot", { key: 'a4f911e41c0a700a4aa13a7fb4aab1fcdbeffe8a' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: 'f094a3c424c1d1fd181b57bfd51638bfb8ea0797', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: '025272a3802507a54d2e50741dd79ed8bd1ba130', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: 'a1f96e0028b2af5d115216676bb2a2f31403f53d', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: 'b2c18e31618d3ce43536c1b2d3d48f5d66c16658', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'ef084b28d39bac92df86f5e4e9f441588fa77d3f', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: '2ca66b1cadf279727750086f02e3423029b39fec', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '6fe03e75ecbc08e02956d75c10212ad3f566d6f4', icon: this.showBody ? "times" : "more" })))), h("div", { key: '061973981aa31be8a7b1ab51f94e301a1c4aa68b', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: '9817bbb5df6790ecf30c97c688aed899a7b9ef9e', name: "body" }))));
     }
     get host() { return getElement(this); }
 };