npm - @dso-toolkit/core - Versions diffs - 67.0.0 → 67.1.0 - Mend

@dso-toolkit/core 67.0.0 → 67.1.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 (81) hide show

package/dist/collection/components/document-component/document-component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-component.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.tsx"],"names":[],"mappings":"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","sourcesContent":["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 is opened, set this to true.\r\n /\r\n @Prop({ reflect: true })\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 <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n aria-expanded={this.openAnnotation.toString()}\r\n onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n >\r\n <dso-icon icon=\"label\"></dso-icon>\r\n <span class=\"sr-only\">Toelichting bekijken</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.openAnnotation && (\r\n <div class=\"annotation-container\" part=\"_annotation-container\">\r\n <dso-panel id=\"annotations\" onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}>\r\n <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n <slot name=\"annotations\" />\r\n </dso-panel>\r\n </div>\r\n )}\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"]}
1	+ {"version":3,"file":"document-component.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n DocumentComponentOpenToggleEvent,\r\n DocumentComponentToggleAnnotationEvent,\r\n DocumentComponentOzonContentAnchorClickEvent,\r\n DocumentComponentWijzigactie,\r\n DocumentComponentAnnotationsWijzigactie,\r\n DocumentComponentInputType,\r\n DocumentComponentMarkFunction,\r\n DocumentComponentMarkItemHighlightEvent,\r\n DocumentComponentRecursiveToggleEvent,\r\n DocumentComponentRecursiveToggleState,\r\n DocumentComponentMode,\r\n DocumentComponentTableOfContentsClickEvent,\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 is opened, set this to true.\r\n /\r\n @Prop({ reflect: true })\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 The wijzigactie for all annotations.\r\n /\r\n @Prop({ reflect: true })\r\n annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;\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 The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n /\r\n @Prop({ reflect: true })\r\n mode: DocumentComponentMode = \"document\";\r\n\r\n /\r\n The URL to which the Heading links (only in mode=\"table-of-contents\").\r\n /\r\n @Prop({ reflect: true })\r\n href?: string;\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 clicks the heading in mode=\"table-of-contents\".\r\n /\r\n @Event({ bubbles: false })\r\n dsoTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\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.mode === \"table-of-contents\") {\r\n this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n } else 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 private showOntwerpBadge(): boolean {\r\n return (\r\n this.genesteOntwerpInformatie &&\r\n !this.bevatOntwerpInformatie &&\r\n ((!this.open && this.mode === \"document\") \|\| this.mode === \"table-of-contents\")\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\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\r\n heading={this.heading}\r\n class=\"heading-element\"\r\n onClick={this.handleHeadingClick}\r\n mode={this.mode}\r\n href={this.href}\r\n >\r\n {collapsible && this.mode === \"document\" && (\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 <span 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 </span>\r\n </Heading>\r\n {this.recursiveToggle !== undefined && this.open && this.mode === \"document\" && (\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.showOntwerpBadge() && (\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 && this.mode === \"document\" && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n aria-expanded={this.openAnnotation.toString()}\r\n onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n >\r\n <dso-icon icon=\"label\"></dso-icon>\r\n <span class=\"sr-only\">\r\n Kenmerken en kaartgegevens {this.openAnnotation ? \"verbergen\" : \"tonen\"}\r\n </span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.openAnnotation && (\r\n <div class=\"annotation-container\" part=\"_annotation-container\">\r\n <dso-panel\r\n id=\"annotations\"\r\n onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n closeButtonLabel=\"Kenmerken en kaartgegevens verbergen\"\r\n >\r\n <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n <slot name=\"annotations\" />\r\n </dso-panel>\r\n </div>\r\n )}\r\n {this.open && (this.inhoud \|\| this.gereserveerd \|\| this.vervallen) && this.mode === \"document\" && (\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"]}

package/dist/collection/components/document-component/document-component.models.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-component.models.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.models.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent, OzonContentText } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n originalEvent: Event;\r\n open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" \| \"verwijder\" \| \"nieuweContainer\" \| \"verwijderContainer\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument \| string;\r\n\r\nexport type DocumentComponentSource = \"label\" \| \"nummer\" \| \"opschrift\" \| \"inhoud\";\r\n\r\nexport type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => OzonContentText[];\r\n\r\nexport interface DocumentComponentMarkItemHighlightEvent {\r\n source: DocumentComponentSource;\r\n text: string;\r\n elementRef: HTMLElement;\r\n}\r\n\r\nexport type DocumentComponentRecursiveToggleState = undefined \| boolean \| \"indeterminate\";\r\n\r\nexport interface DocumentComponentRecursiveToggleEvent {\r\n originalEvent: MouseEvent;\r\n current: DocumentComponentRecursiveToggleState;\r\n next: boolean;\r\n}\r\n"]}
1	+ {"version":3,"file":"document-component.models.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.models.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent, OzonContentText } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n originalEvent: Event;\r\n open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" \| \"verwijder\" \| \"nieuweContainer\" \| \"verwijderContainer\";\r\n\r\nexport type DocumentComponentAnnotationsWijzigactie = \"voegtoe\" \| \"verwijder\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument \| string;\r\n\r\nexport type DocumentComponentSource = \"label\" \| \"nummer\" \| \"opschrift\" \| \"inhoud\";\r\n\r\nexport type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => OzonContentText[];\r\n\r\nexport interface DocumentComponentMarkItemHighlightEvent {\r\n source: DocumentComponentSource;\r\n text: string;\r\n elementRef: HTMLElement;\r\n}\r\n\r\nexport type DocumentComponentRecursiveToggleState = undefined \| boolean \| \"indeterminate\";\r\n\r\nexport interface DocumentComponentRecursiveToggleEvent {\r\n originalEvent: MouseEvent;\r\n current: DocumentComponentRecursiveToggleState;\r\n next: boolean;\r\n}\r\n\r\nexport type DocumentComponentMode = \"document\" \| \"table-of-contents\";\r\n\r\nexport interface DocumentComponentTableOfContentsClickEvent {\r\n originalEvent: MouseEvent;\r\n /** True when user clicked the document component heading while holding Ctrl, Alt or other modifiers, or when the document component heading is right-clicked. Can be used to determine navigation. */\r\n isModifiedEvent: boolean;\r\n}\r\n"]}

package/dist/collection/components/document-component-demo/document-component.demo.js CHANGED Viewed

@@ -14,14 +14,14 @@ export class DocumentComponentDemo {
         };
         this.DocumentComponent = ({ path }) => {
             const documentComponent = path.at(-1);
-            if (!documentComponent) {
+            if (!documentComponent || (this.mode === "table-of-contents" && documentComponent.type === "LID")) {
                 return h(Fragment, null);
             }
             const { DocumentComponent } = this;
             const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);
             return (h("dso-document-component", { annotated: this.isAnnotated(documentComponent), bevatOntwerpInformatie: !!documentComponent.bevatOntwerpInformatie, filtered: this.isOpen(documentComponent)
                     ? this.isFiltered(documentComponent)
-                    : this.hasFilteredChildren(documentComponent), genesteOntwerpInformatie: this.hasNestedDraft(documentComponent), gereserveerd: documentComponent.gereserveerd, heading: "h2", inhoud: documentComponent.inhoud, label: documentComponent.labelXml, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), nummer: documentComponent.nummerXml, onDsoAnnotationToggle: () => this.handleAnnotationToggle(documentComponent), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), onDsoOzonContentAnchorClick: (e) => this.handleOzonContentAnchorClick(e), open: this.isOpen(documentComponent), opschrift: documentComponent.opschrift, type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail) }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && (embeddedDocuments === null || embeddedDocuments === void 0 ? void 0 : embeddedDocuments.documentComponents.length) && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
+                    : this.hasFilteredChildren(documentComponent), genesteOntwerpInformatie: this.hasNestedDraft(documentComponent), gereserveerd: documentComponent.gereserveerd, heading: "h2", inhoud: documentComponent.inhoud, label: documentComponent.labelXml, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), nummer: documentComponent.nummerXml, onDsoAnnotationToggle: () => this.handleAnnotationToggle(documentComponent), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), onDsoOzonContentAnchorClick: (e) => this.handleOzonContentAnchorClick(e), open: this.isOpen(documentComponent), opschrift: documentComponent.opschrift, type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e) }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && (embeddedDocuments === null || embeddedDocuments === void 0 ? void 0 : embeddedDocuments.documentComponents.length) && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
         };
         this.MenuButton = ({ documentComponent }) => {
             const { labelXml, nummerXml, type } = documentComponent;
@@ -30,6 +30,7 @@ export class DocumentComponentDemo {
         this.showCanvas = false;
         this.jsonFile = undefined;
         this.openDefault = false;
+        this.mode = "document";
         this.response = undefined;
         this.document = undefined;
         this.openOrClosed = [];
@@ -121,6 +122,9 @@ export class DocumentComponentDemo {
     handleOzonContentAnchorClick(e) {
         this.dsotOzonContentAnchorClick.emit(e.detail);
     }
+    handleTableOfContentsClick(e) {
+        this.dsotTableOfContentsClick.emit(e.detail);
+    }
     isCheckedSlideToggle(documentComponent) {
         return this.activeAnnotationSelectables.includes(documentComponent);
     }
@@ -170,7 +174,7 @@ export class DocumentComponentDemo {
     render() {
         var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: 'de29c193eb351b09de8553bc48817f04cb969fb2', class: "dso-document-components" }, h("div", { key: '1fec20412411d0dc815f3e9624ecb66db3b5194f', class: "dso-navbar" }, h("ul", { key: 'efb0857515e2b029561fec6b5e8d20f020b3edc9', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'c264f48d2a3cff5ea464ac694a2bd5df63f7ea21', path: [this.document] })));
+        return (h("dso-responsive-element", { key: 'e8d87d6fb258291450ee5b9ccc781b3bc7ae0d48', class: "dso-document-components" }, h("div", { key: '5338abe33e005cbea80c416c518ebae99b793531', class: "dso-navbar" }, h("ul", { key: 'c5de257adb65448d9ed791571308c5ab27ccc0d0', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '625663d2be822cea4d3b2d8ab32ec365daa53430', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }
@@ -238,6 +242,30 @@ export class DocumentComponentDemo {
                 "attribute": "open-default",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DocumentComponentMode",
+                    "resolved": "\"document\" | \"table-of-contents\"",
+                    "references": {
+                        "DocumentComponentMode": {
+                            "location": "import",
+                            "path": "../document-component/document-component.models",
+                            "id": "src/components/document-component/document-component.models.ts::DocumentComponentMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\""
+                },
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "\"document\""
             }
         };
     }
@@ -274,6 +302,27 @@ export class DocumentComponentDemo {
                         }
                     }
                 }
+            }, {
+                "method": "dsotTableOfContentsClick",
+                "name": "dsotTableOfContentsClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To demo user interacting the heading in mode=\"table-of-contents\"."
+                },
+                "complexType": {
+                    "original": "DocumentComponentTableOfContentsClickEvent",
+                    "resolved": "DocumentComponentTableOfContentsClickEvent",
+                    "references": {
+                        "DocumentComponentTableOfContentsClickEvent": {
+                            "location": "import",
+                            "path": "../document-component/document-component.models",
+                            "id": "src/components/document-component/document-component.models.ts::DocumentComponentTableOfContentsClickEvent"
+                        }
+                    }
+                }
             }];
     }
     static get watchers() {

package/dist/collection/components/document-component-demo/document-component.demo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document-component.demo.js","sourceRoot":"","sources":["../../../../src/components/document-component-demo/document-component.demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, State, Prop, Watch, Event, EventEmitter, Fragment } from \"@stencil/core\";\r\nimport sampleSize from \"lodash.samplesize\";\r\nimport random from \"lodash.random\";\r\n\r\nimport {\r\n DocumentComponentOzonContentAnchorClickEvent,\r\n DocumentComponentRecursiveToggleEvent,\r\n DocumentComponentWijzigactie,\r\n} from \"../document-component/document-component.models\";\r\nimport { DsoDocumentComponentCustomEvent } from \"../../components\";\r\n\r\ninterface DocumentEmbedded {\r\n _embedded?: {\r\n ontwerpTekststructuurDocumentComponenten?: DocumentComponent[];\r\n tekststructuurDocumentComponenten?: DocumentComponent[];\r\n };\r\n}\r\n\r\ninterface DocumentComponent extends DocumentEmbedded {\r\n documentTechnischId: string;\r\n type?: string;\r\n labelXml?: string;\r\n nummerXml?: string;\r\n volgordeNummer: number;\r\n opschrift?: string;\r\n inhoud?: string;\r\n gereserveerd?: boolean;\r\n vervallen?: boolean;\r\n bevatOntwerpInformatie?: boolean;\r\n wijzigactie?: DocumentComponentWijzigactie;\r\n}\r\n\r\n@Component({\r\n tag: \"dsot-document-component-demo\",\r\n scoped: true, // scoped because we are immitating the usage of <dso-document-component> in a page\r\n styleUrl: \"document-component.demo.scss\",\r\n})\r\nexport class DocumentComponentDemo implements ComponentInterface {\r\n /*\r\n Show canvas to where Document Component extends.\r\n /\r\n @Prop({ reflect: true })\r\n showCanvas = false;\r\n\r\n /\r\n Name of the file to load.\r\n /\r\n @Prop()\r\n jsonFile?: string;\r\n\r\n /\r\n The default state for all Document Components.\r\n /\r\n @Prop()\r\n openDefault = false;\r\n\r\n /\r\n To demo user interacting with IntRef or IntIoRef elements.\r\n */\r\n @Event()\r\n dsotOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n @State()\r\n response?: DocumentEmbedded;\r\n\r\n @State()\r\n document?: DocumentComponent;\r\n\r\n @State()\r\n openOrClosed: DocumentComponent[] = [];\r\n\r\n @State()\r\n openedAnnotation: DocumentComponent[] = [];\r\n\r\n @State()\r\n filtered: DocumentComponent[] = [];\r\n\r\n @State()\r\n notApplicable: DocumentComponent[] = [];\r\n\r\n @State()\r\n activeAnnotationSelectables: DocumentComponent[] = [];\r\n\r\n @Watch(\"jsonFile\")\r\n async jsonFileWatcher() {\r\n this.openOrClosed = [];\r\n\r\n await this.loadData();\r\n }\r\n\r\n @Watch(\"openDefault\")\r\n async openDefaultWatcher() {\r\n this.openOrClosed = [];\r\n\r\n await this.loadData();\r\n }\r\n\r\n async componentDidLoad(): Promise<void> {\r\n await this.loadData();\r\n }\r\n\r\n private getEmbeddedDocumentComponents(documentEmbedded: DocumentEmbedded \| undefined) {\r\n if (documentEmbedded?._embedded?.ontwerpTekststructuurDocumentComponenten) {\r\n return {\r\n documentComponents: documentEmbedded._embedded.ontwerpTekststructuurDocumentComponenten,\r\n ontwerp: true,\r\n };\r\n }\r\n\r\n if (documentEmbedded?._embedded?.tekststructuurDocumentComponenten) {\r\n return {\r\n documentComponents: documentEmbedded._embedded.tekststructuurDocumentComponenten,\r\n ontwerp: false,\r\n };\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n private concatEmbeddedDocumentComponents(documentComponent: DocumentComponent): DocumentComponent[] {\r\n const embeddedDocuments = [...(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents ?? [])];\r\n\r\n for (const d of embeddedDocuments) {\r\n embeddedDocuments.push(...this.concatEmbeddedDocumentComponents(d));\r\n }\r\n\r\n return embeddedDocuments;\r\n }\r\n\r\n private selectRandomDocumentComponents(\r\n documentComponent: DocumentComponent,\r\n exclude: DocumentComponent[] = [],\r\n ): DocumentComponent[] {\r\n const documentComponents = this.concatEmbeddedDocumentComponents(documentComponent).filter(\r\n (d) => !exclude.includes(d),\r\n );\r\n const size = random(0, Math.floor(documentComponents.length / 10));\r\n\r\n return sampleSize(documentComponents, size);\r\n }\r\n\r\n private async loadData() {\r\n if (!this.jsonFile) {\r\n this.response = undefined;\r\n this.document = undefined;\r\n\r\n return;\r\n }\r\n\r\n this.response = await fetch(this.jsonFile).then((r) => r.json());\r\n this.document = this.getEmbeddedDocumentComponents(this.response)?.documentComponents[0];\r\n\r\n if (this.document?.type === \"LICHAAM\") {\r\n this.notApplicable = this.selectRandomDocumentComponents(this.document);\r\n this.filtered = this.selectRandomDocumentComponents(this.document, this.notApplicable);\r\n } else {\r\n this.notApplicable = [];\r\n this.filtered = [];\r\n }\r\n }\r\n\r\n private handleOpenToggle(documentComponent: DocumentComponent, force?: boolean) {\r\n const isOpenOrClosed = typeof force === \"boolean\" ? force : this.openOrClosed.includes(documentComponent);\r\n\r\n if (isOpenOrClosed && this.openOrClosed.includes(documentComponent)) {\r\n this.openOrClosed = this.openOrClosed.filter((d) => d !== documentComponent);\r\n } else if (!isOpenOrClosed && !this.openOrClosed.includes(documentComponent)) {\r\n this.openOrClosed = [...this.openOrClosed, documentComponent];\r\n }\r\n }\r\n\r\n private handleAnnotationToggle(documentComponent: DocumentComponent) {\r\n this.openedAnnotation = this.isOpenedAnnotation(documentComponent)\r\n ? this.openedAnnotation.filter((d) => d !== documentComponent)\r\n : [...this.openedAnnotation, documentComponent];\r\n\r\n if (!this.isOpen(documentComponent)) {\r\n this.openOrClosed = [...this.openOrClosed, documentComponent];\r\n }\r\n }\r\n\r\n private handleSelectableChange(documentComponent: DocumentComponent) {\r\n this.activeAnnotationSelectables = this.isCheckedSlideToggle(documentComponent)\r\n ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)\r\n : [...this.activeAnnotationSelectables, documentComponent];\r\n }\r\n\r\n private handleOzonContentAnchorClick(\r\n e: DsoDocumentComponentCustomEvent<DocumentComponentOzonContentAnchorClickEvent>,\r\n ) {\r\n this.dsotOzonContentAnchorClick.emit(e.detail);\r\n }\r\n\r\n private isCheckedSlideToggle(documentComponent: DocumentComponent) {\r\n return this.activeAnnotationSelectables.includes(documentComponent);\r\n }\r\n\r\n private hasFilteredChildren(documentComponent: DocumentComponent): boolean {\r\n return (\r\n this.filtered.includes(documentComponent) \|\|\r\n (this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.some((d) =>\r\n this.hasFilteredChildren(d),\r\n ) ??\r\n false)\r\n );\r\n }\r\n\r\n private isOpen(documentComponent: DocumentComponent): boolean {\r\n return documentComponent.type === \"LID\" \|\| this.openDefault\r\n ? !this.openOrClosed.includes(documentComponent)\r\n : this.openOrClosed.includes(documentComponent);\r\n }\r\n\r\n private isOpenedAnnotation(documentComponent: DocumentComponent): boolean {\r\n return this.openedAnnotation.includes(documentComponent);\r\n }\r\n\r\n private isFiltered(documentComponent: DocumentComponent): boolean {\r\n return this.filtered.includes(documentComponent);\r\n }\r\n\r\n private isNotApplicable(documentComponent: DocumentComponent): boolean {\r\n return this.notApplicable.includes(documentComponent);\r\n }\r\n\r\n private hasNestedDraft(documentComponent: DocumentComponent): boolean {\r\n return (\r\n this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.some(\r\n (d) => !!d.bevatOntwerpInformatie \|\| this.hasNestedDraft(d),\r\n ) ?? false\r\n );\r\n }\r\n\r\n private showContent(documentComponent: DocumentComponent): boolean {\r\n return (\r\n this.isOpen(documentComponent) &&\r\n !!(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.length \|\| documentComponent.inhoud)\r\n );\r\n }\r\n\r\n private recursiveToggleState(documentComponent: DocumentComponent): undefined \| boolean \| \"indeterminate\" {\r\n const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n\r\n if (\r\n !embeddedDocuments \|\|\r\n embeddedDocuments.documentComponents.length <= 1 \|\|\r\n !embeddedDocuments.documentComponents.some((d) => d.type === \"ARTIKEL\")\r\n ) {\r\n return undefined;\r\n }\r\n\r\n return embeddedDocuments.documentComponents.every((d) => this.isOpen(d));\r\n }\r\n\r\n private handleRecursiveToggle = (\r\n documentComponent: DocumentComponent,\r\n detail: DocumentComponentRecursiveToggleEvent,\r\n ) => {\r\n const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n if (!embeddedDocuments) {\r\n return;\r\n }\r\n\r\n for (const d of embeddedDocuments.documentComponents) {\r\n this.handleOpenToggle(d, detail.next);\r\n }\r\n };\r\n\r\n private isAnnotated(documentComponent: DocumentComponent): boolean {\r\n return (\r\n documentComponent.type === \"DIVISIE\" \|\|\r\n documentComponent.type === \"DIVISIETEKST\" \|\|\r\n documentComponent.type === \"ARTIKEL\" \|\|\r\n documentComponent.type === \"LID\"\r\n );\r\n }\r\n\r\n private DocumentComponent = ({ path }: DocumentComponentProps) => {\r\n const documentComponent = path.at(-1);\r\n if (!documentComponent) {\r\n return <Fragment />;\r\n }\r\n\r\n const { DocumentComponent } = this;\r\n\r\n const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n\r\n return (\r\n <dso-document-component\r\n annotated={this.isAnnotated(documentComponent)}\r\n bevatOntwerpInformatie={!!documentComponent.bevatOntwerpInformatie}\r\n filtered={\r\n this.isOpen(documentComponent)\r\n ? this.isFiltered(documentComponent)\r\n : this.hasFilteredChildren(documentComponent)\r\n }\r\n genesteOntwerpInformatie={this.hasNestedDraft(documentComponent)}\r\n gereserveerd={documentComponent.gereserveerd}\r\n heading=\"h2\"\r\n inhoud={documentComponent.inhoud}\r\n label={documentComponent.labelXml}\r\n openAnnotation={this.isOpenedAnnotation(documentComponent)}\r\n notApplicable={this.isNotApplicable(documentComponent) \|\| path.some((p) => this.isNotApplicable(p))}\r\n nummer={documentComponent.nummerXml}\r\n onDsoAnnotationToggle={() => this.handleAnnotationToggle(documentComponent)}\r\n onDsoOpenToggle={() => this.handleOpenToggle(documentComponent)}\r\n onDsoOzonContentAnchorClick={(e) => this.handleOzonContentAnchorClick(e)}\r\n open={this.isOpen(documentComponent)}\r\n opschrift={documentComponent.opschrift}\r\n type={documentComponent.type}\r\n vervallen={documentComponent.vervallen}\r\n wijzigactie={documentComponent.wijzigactie}\r\n recursiveToggle={this.recursiveToggleState(documentComponent)}\r\n onDsoRecursiveToggle={(e) => this.handleRecursiveToggle(documentComponent, e.detail)}\r\n >\r\n {this.isOpenedAnnotation(documentComponent) && (\r\n <div slot=\"annotations\">\r\n <dso-annotation-locatie\r\n active={this.isCheckedSlideToggle(documentComponent)}\r\n gewijzigde-locatie\r\n locatieNoemer={\"Winkelgebied\"}\r\n onDsoActiveChange={() => this.handleSelectableChange(documentComponent)}\r\n >\r\n <span class=\"symboolcode\" slot=\"symbool\" data-symboolcode=\"vszt030\"></span>\r\n </dso-annotation-locatie>\r\n </div>\r\n )}\r\n {this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (\r\n <ul class=\"dso-document-component-list\">\r\n {embeddedDocuments.documentComponents.map((d) => (\r\n <li key={d.documentTechnischId}>\r\n <DocumentComponent path={[...path, d]} />\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n </dso-document-component>\r\n );\r\n };\r\n\r\n render() {\r\n const { DocumentComponent, MenuButton } = this;\r\n\r\n return (\r\n <dso-responsive-element class=\"dso-document-components\">\r\n <div class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (\r\n <li class={this.document === d ? \"dso-active\" : undefined}>\r\n <MenuButton documentComponent={d} />\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n {this.document && <DocumentComponent path={[this.document]} />}\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private MenuButton = ({ documentComponent }: MenuItemProps) => {\r\n const { labelXml, nummerXml, type } = documentComponent;\r\n\r\n return (\r\n <button type=\"button\" onClick={() => (this.document = documentComponent)}>\r\n {!labelXml && !nummerXml ? (\r\n <span>\r\n <i>{type}</i>\r\n </span>\r\n ) : (\r\n <>\r\n {labelXml && (\r\n <>\r\n <dso-ozon-content content={labelXml} inline></dso-ozon-content>\r\n </>\r\n )}\r\n {nummerXml && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content content={nummerXml} inline></dso-ozon-content>\r\n </>\r\n )}\r\n </>\r\n )}\r\n </button>\r\n );\r\n };\r\n}\r\n\r\ninterface MenuItemProps {\r\n documentComponent: DocumentComponent;\r\n}\r\n\r\ninterface DocumentComponentProps {\r\n path: DocumentComponent[];\r\n}\r\n"]}
1	+ {"version":3,"file":"document-component.demo.js","sourceRoot":"","sources":["../../../../src/components/document-component-demo/document-component.demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, State, Prop, Watch, Event, EventEmitter, Fragment } from \"@stencil/core\";\r\nimport sampleSize from \"lodash.samplesize\";\r\nimport random from \"lodash.random\";\r\n\r\nimport {\r\n DocumentComponentMode,\r\n DocumentComponentOzonContentAnchorClickEvent,\r\n DocumentComponentRecursiveToggleEvent,\r\n DocumentComponentTableOfContentsClickEvent,\r\n DocumentComponentWijzigactie,\r\n} from \"../document-component/document-component.models\";\r\nimport { DsoDocumentComponentCustomEvent } from \"../../components\";\r\n\r\ninterface DocumentEmbedded {\r\n _embedded?: {\r\n ontwerpTekststructuurDocumentComponenten?: DocumentComponent[];\r\n tekststructuurDocumentComponenten?: DocumentComponent[];\r\n };\r\n}\r\n\r\ninterface DocumentComponent extends DocumentEmbedded {\r\n documentTechnischId: string;\r\n type?: string;\r\n labelXml?: string;\r\n nummerXml?: string;\r\n volgordeNummer: number;\r\n opschrift?: string;\r\n inhoud?: string;\r\n gereserveerd?: boolean;\r\n vervallen?: boolean;\r\n bevatOntwerpInformatie?: boolean;\r\n wijzigactie?: DocumentComponentWijzigactie;\r\n mode: DocumentComponentMode;\r\n}\r\n\r\n@Component({\r\n tag: \"dsot-document-component-demo\",\r\n scoped: true, // scoped because we are immitating the usage of <dso-document-component> in a page\r\n styleUrl: \"document-component.demo.scss\",\r\n})\r\nexport class DocumentComponentDemo implements ComponentInterface {\r\n /*\r\n Show canvas to where Document Component extends.\r\n /\r\n @Prop({ reflect: true })\r\n showCanvas = false;\r\n\r\n /\r\n Name of the file to load.\r\n /\r\n @Prop()\r\n jsonFile?: string;\r\n\r\n /\r\n The default state for all Document Components.\r\n /\r\n @Prop()\r\n openDefault = false;\r\n\r\n /\r\n The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n /\r\n @Prop({ reflect: true })\r\n mode: DocumentComponentMode = \"document\";\r\n\r\n /\r\n To demo user interacting with IntRef or IntIoRef elements.\r\n /\r\n @Event()\r\n dsotOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n /\r\n To demo user interacting the heading in mode=\"table-of-contents\".\r\n */\r\n @Event({ bubbles: false })\r\n dsotTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\r\n\r\n @State()\r\n response?: DocumentEmbedded;\r\n\r\n @State()\r\n document?: DocumentComponent;\r\n\r\n @State()\r\n openOrClosed: DocumentComponent[] = [];\r\n\r\n @State()\r\n openedAnnotation: DocumentComponent[] = [];\r\n\r\n @State()\r\n filtered: DocumentComponent[] = [];\r\n\r\n @State()\r\n notApplicable: DocumentComponent[] = [];\r\n\r\n @State()\r\n activeAnnotationSelectables: DocumentComponent[] = [];\r\n\r\n @Watch(\"jsonFile\")\r\n async jsonFileWatcher() {\r\n this.openOrClosed = [];\r\n\r\n await this.loadData();\r\n }\r\n\r\n @Watch(\"openDefault\")\r\n async openDefaultWatcher() {\r\n this.openOrClosed = [];\r\n\r\n await this.loadData();\r\n }\r\n\r\n async componentDidLoad(): Promise<void> {\r\n await this.loadData();\r\n }\r\n\r\n private getEmbeddedDocumentComponents(documentEmbedded: DocumentEmbedded \| undefined) {\r\n if (documentEmbedded?._embedded?.ontwerpTekststructuurDocumentComponenten) {\r\n return {\r\n documentComponents: documentEmbedded._embedded.ontwerpTekststructuurDocumentComponenten,\r\n ontwerp: true,\r\n };\r\n }\r\n\r\n if (documentEmbedded?._embedded?.tekststructuurDocumentComponenten) {\r\n return {\r\n documentComponents: documentEmbedded._embedded.tekststructuurDocumentComponenten,\r\n ontwerp: false,\r\n };\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n private concatEmbeddedDocumentComponents(documentComponent: DocumentComponent): DocumentComponent[] {\r\n const embeddedDocuments = [...(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents ?? [])];\r\n\r\n for (const d of embeddedDocuments) {\r\n embeddedDocuments.push(...this.concatEmbeddedDocumentComponents(d));\r\n }\r\n\r\n return embeddedDocuments;\r\n }\r\n\r\n private selectRandomDocumentComponents(\r\n documentComponent: DocumentComponent,\r\n exclude: DocumentComponent[] = [],\r\n ): DocumentComponent[] {\r\n const documentComponents = this.concatEmbeddedDocumentComponents(documentComponent).filter(\r\n (d) => !exclude.includes(d),\r\n );\r\n const size = random(0, Math.floor(documentComponents.length / 10));\r\n\r\n return sampleSize(documentComponents, size);\r\n }\r\n\r\n private async loadData() {\r\n if (!this.jsonFile) {\r\n this.response = undefined;\r\n this.document = undefined;\r\n\r\n return;\r\n }\r\n\r\n this.response = await fetch(this.jsonFile).then((r) => r.json());\r\n this.document = this.getEmbeddedDocumentComponents(this.response)?.documentComponents[0];\r\n\r\n if (this.document?.type === \"LICHAAM\") {\r\n this.notApplicable = this.selectRandomDocumentComponents(this.document);\r\n this.filtered = this.selectRandomDocumentComponents(this.document, this.notApplicable);\r\n } else {\r\n this.notApplicable = [];\r\n this.filtered = [];\r\n }\r\n }\r\n\r\n private handleOpenToggle(documentComponent: DocumentComponent, force?: boolean) {\r\n const isOpenOrClosed = typeof force === \"boolean\" ? force : this.openOrClosed.includes(documentComponent);\r\n\r\n if (isOpenOrClosed && this.openOrClosed.includes(documentComponent)) {\r\n this.openOrClosed = this.openOrClosed.filter((d) => d !== documentComponent);\r\n } else if (!isOpenOrClosed && !this.openOrClosed.includes(documentComponent)) {\r\n this.openOrClosed = [...this.openOrClosed, documentComponent];\r\n }\r\n }\r\n\r\n private handleAnnotationToggle(documentComponent: DocumentComponent) {\r\n this.openedAnnotation = this.isOpenedAnnotation(documentComponent)\r\n ? this.openedAnnotation.filter((d) => d !== documentComponent)\r\n : [...this.openedAnnotation, documentComponent];\r\n\r\n if (!this.isOpen(documentComponent)) {\r\n this.openOrClosed = [...this.openOrClosed, documentComponent];\r\n }\r\n }\r\n\r\n private handleSelectableChange(documentComponent: DocumentComponent) {\r\n this.activeAnnotationSelectables = this.isCheckedSlideToggle(documentComponent)\r\n ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)\r\n : [...this.activeAnnotationSelectables, documentComponent];\r\n }\r\n\r\n private handleOzonContentAnchorClick(\r\n e: DsoDocumentComponentCustomEvent<DocumentComponentOzonContentAnchorClickEvent>,\r\n ) {\r\n this.dsotOzonContentAnchorClick.emit(e.detail);\r\n }\r\n\r\n private handleTableOfContentsClick(e: DsoDocumentComponentCustomEvent<DocumentComponentTableOfContentsClickEvent>) {\r\n this.dsotTableOfContentsClick.emit(e.detail);\r\n }\r\n\r\n private isCheckedSlideToggle(documentComponent: DocumentComponent) {\r\n return this.activeAnnotationSelectables.includes(documentComponent);\r\n }\r\n\r\n private hasFilteredChildren(documentComponent: DocumentComponent): boolean {\r\n return (\r\n this.filtered.includes(documentComponent) \|\|\r\n (this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.some((d) =>\r\n this.hasFilteredChildren(d),\r\n ) ??\r\n false)\r\n );\r\n }\r\n\r\n private isOpen(documentComponent: DocumentComponent): boolean {\r\n return documentComponent.type === \"LID\" \|\| this.openDefault\r\n ? !this.openOrClosed.includes(documentComponent)\r\n : this.openOrClosed.includes(documentComponent);\r\n }\r\n\r\n private isOpenedAnnotation(documentComponent: DocumentComponent): boolean {\r\n return this.openedAnnotation.includes(documentComponent);\r\n }\r\n\r\n private isFiltered(documentComponent: DocumentComponent): boolean {\r\n return this.filtered.includes(documentComponent);\r\n }\r\n\r\n private isNotApplicable(documentComponent: DocumentComponent): boolean {\r\n return this.notApplicable.includes(documentComponent);\r\n }\r\n\r\n private hasNestedDraft(documentComponent: DocumentComponent): boolean {\r\n return (\r\n this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.some(\r\n (d) => !!d.bevatOntwerpInformatie \|\| this.hasNestedDraft(d),\r\n ) ?? false\r\n );\r\n }\r\n\r\n private showContent(documentComponent: DocumentComponent): boolean {\r\n return (\r\n this.isOpen(documentComponent) &&\r\n !!(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.length \|\| documentComponent.inhoud)\r\n );\r\n }\r\n\r\n private recursiveToggleState(documentComponent: DocumentComponent): undefined \| boolean \| \"indeterminate\" {\r\n const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n\r\n if (\r\n !embeddedDocuments \|\|\r\n embeddedDocuments.documentComponents.length <= 1 \|\|\r\n !embeddedDocuments.documentComponents.some((d) => d.type === \"ARTIKEL\")\r\n ) {\r\n return undefined;\r\n }\r\n\r\n return embeddedDocuments.documentComponents.every((d) => this.isOpen(d));\r\n }\r\n\r\n private handleRecursiveToggle = (\r\n documentComponent: DocumentComponent,\r\n detail: DocumentComponentRecursiveToggleEvent,\r\n ) => {\r\n const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n if (!embeddedDocuments) {\r\n return;\r\n }\r\n\r\n for (const d of embeddedDocuments.documentComponents) {\r\n this.handleOpenToggle(d, detail.next);\r\n }\r\n };\r\n\r\n private isAnnotated(documentComponent: DocumentComponent): boolean {\r\n return (\r\n documentComponent.type === \"DIVISIE\" \|\|\r\n documentComponent.type === \"DIVISIETEKST\" \|\|\r\n documentComponent.type === \"ARTIKEL\" \|\|\r\n documentComponent.type === \"LID\"\r\n );\r\n }\r\n\r\n private DocumentComponent = ({ path }: DocumentComponentProps) => {\r\n const documentComponent = path.at(-1);\r\n if (!documentComponent \|\| (this.mode === \"table-of-contents\" && documentComponent.type === \"LID\")) {\r\n return <Fragment />;\r\n }\r\n\r\n const { DocumentComponent } = this;\r\n\r\n const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);\r\n\r\n return (\r\n <dso-document-component\r\n annotated={this.isAnnotated(documentComponent)}\r\n bevatOntwerpInformatie={!!documentComponent.bevatOntwerpInformatie}\r\n filtered={\r\n this.isOpen(documentComponent)\r\n ? this.isFiltered(documentComponent)\r\n : this.hasFilteredChildren(documentComponent)\r\n }\r\n genesteOntwerpInformatie={this.hasNestedDraft(documentComponent)}\r\n gereserveerd={documentComponent.gereserveerd}\r\n heading=\"h2\"\r\n inhoud={documentComponent.inhoud}\r\n label={documentComponent.labelXml}\r\n openAnnotation={this.isOpenedAnnotation(documentComponent)}\r\n notApplicable={this.isNotApplicable(documentComponent) \|\| path.some((p) => this.isNotApplicable(p))}\r\n nummer={documentComponent.nummerXml}\r\n onDsoAnnotationToggle={() => this.handleAnnotationToggle(documentComponent)}\r\n onDsoOpenToggle={() => this.handleOpenToggle(documentComponent)}\r\n onDsoOzonContentAnchorClick={(e) => this.handleOzonContentAnchorClick(e)}\r\n open={this.isOpen(documentComponent)}\r\n opschrift={documentComponent.opschrift}\r\n type={documentComponent.type}\r\n vervallen={documentComponent.vervallen}\r\n wijzigactie={documentComponent.wijzigactie}\r\n recursiveToggle={this.recursiveToggleState(documentComponent)}\r\n onDsoRecursiveToggle={(e) => this.handleRecursiveToggle(documentComponent, e.detail)}\r\n mode={this.mode}\r\n href={this.mode === \"table-of-contents\" ? \"/document/\" + documentComponent.documentTechnischId : undefined}\r\n onDsoTableOfContentsClick={(e) => this.handleTableOfContentsClick(e)}\r\n >\r\n {this.isOpenedAnnotation(documentComponent) && (\r\n <div slot=\"annotations\">\r\n <dso-annotation-locatie\r\n active={this.isCheckedSlideToggle(documentComponent)}\r\n gewijzigde-locatie\r\n locatieNoemer={\"Winkelgebied\"}\r\n onDsoActiveChange={() => this.handleSelectableChange(documentComponent)}\r\n >\r\n <span class=\"symboolcode\" slot=\"symbool\" data-symboolcode=\"vszt030\"></span>\r\n </dso-annotation-locatie>\r\n </div>\r\n )}\r\n {this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (\r\n <ul class=\"dso-document-component-list\">\r\n {embeddedDocuments.documentComponents.map((d) => (\r\n <li key={d.documentTechnischId}>\r\n <DocumentComponent path={[...path, d]} />\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n </dso-document-component>\r\n );\r\n };\r\n\r\n render() {\r\n const { DocumentComponent, MenuButton } = this;\r\n\r\n return (\r\n <dso-responsive-element class=\"dso-document-components\">\r\n <div class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (\r\n <li class={this.document === d ? \"dso-active\" : undefined}>\r\n <MenuButton documentComponent={d} />\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n {this.document && <DocumentComponent path={[this.document]} />}\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private MenuButton = ({ documentComponent }: MenuItemProps) => {\r\n const { labelXml, nummerXml, type } = documentComponent;\r\n\r\n return (\r\n <button type=\"button\" onClick={() => (this.document = documentComponent)}>\r\n {!labelXml && !nummerXml ? (\r\n <span>\r\n <i>{type}</i>\r\n </span>\r\n ) : (\r\n <>\r\n {labelXml && (\r\n <>\r\n <dso-ozon-content content={labelXml} inline></dso-ozon-content>\r\n </>\r\n )}\r\n {nummerXml && (\r\n <>\r\n {\" \"}\r\n <dso-ozon-content content={nummerXml} inline></dso-ozon-content>\r\n </>\r\n )}\r\n </>\r\n )}\r\n </button>\r\n );\r\n };\r\n}\r\n\r\ninterface MenuItemProps {\r\n documentComponent: DocumentComponent;\r\n}\r\n\r\ninterface DocumentComponentProps {\r\n path: DocumentComponent[];\r\n}\r\n"]}

package/dist/collection/components/panel/panel.i18n.js ADDED Viewed

@@ -0,0 +1,13 @@
+export const translations = {
+    en: {
+        "dso-panel": {
+            close: "Close",
+        },
+    },
+    nl: {
+        "dso-panel": {
+            close: "Sluiten",
+        },
+    },
+};
+//# sourceMappingURL=panel.i18n.js.map

package/dist/collection/components/panel/panel.i18n.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"panel.i18n.js","sourceRoot":"","sources":["../../../../src/components/panel/panel.i18n.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,WAAW,EAAE;YACX,KAAK,EAAE,OAAO;SACf;KACF;IACD,EAAE,EAAE;QACF,WAAW,EAAE;YACX,KAAK,EAAE,SAAS;SACjB;KACF;CACF,CAAC","sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-panel\": {\r\n close: \"Close\",\r\n },\r\n },\r\n nl: {\r\n \"dso-panel\": {\r\n close: \"Sluiten\",\r\n },\r\n },\r\n};\r\n"]}

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

@@ -1,11 +1,17 @@
 import { h } from "@stencil/core";
+import { i18n } from "../../utils/i18n";
+import { translations } from "./panel.i18n";
 /**
  * @slot - The contents to be highlighted within the panel
  * @slot heading - The heading (h2 - h6) with the title of the panel
  */
 export class Panel {
+    constructor() {
+        this.text = i18n(() => this.host, translations);
+        this.closeButtonLabel = undefined;
+    }
     render() {
-        return (h("div", { key: '2aa1880aa5031f232950eb0372e5a96114c1b421', class: "dso-panel" }, h("div", { key: '0586b211ea50107d84d072e455bbc9f4ae6153e9', class: "panel-heading" }, h("slot", { key: '792dac97f4c1a5765c188755e859119cc5363bd0', name: "heading" }), h("button", { key: 'bb6d3f6858a3612c62a0830eedbb43e3def20097', type: "button", class: "panel-close", onClick: (e) => this.dsoCloseClick.emit({ originalEvent: e }) }, h("dso-icon", { key: '1534722f09889d9b4d24bac4c4648da0c36c0cb6', icon: "times" }), h("span", { key: '42175bab99b216f80cf93b8a58e8e1f7037e4fbe', class: "sr-only" }, "Sluiten"))), h("div", { key: '375d898962eefe7038f60a700a71eca6c6fddf39', class: "panel-body" }, h("slot", { key: '8ca367b60353c6f5193fca6e8923b1cf717efcbb' }))));
+        return (h("div", { key: 'd6e1849a1467f07f029308721521e6ac456bdb8a', class: "dso-panel" }, h("div", { key: 'fbeaeeb9a536c8a29c138277edf394f6749f7bb2', class: "panel-heading" }, h("slot", { key: '2e1b8be615d3fd3a7c37187386f58f4c33567fe5', name: "heading" }), h("button", { key: '43fa95daae2bf4b7d078c89e96f104022af17598', type: "button", class: "panel-close", onClick: (e) => this.dsoCloseClick.emit({ originalEvent: e }) }, h("dso-icon", { key: '90191e7f8fce6f3cc7097b1d63e4c59e0ef77b41', icon: "times" }), h("span", { key: 'bbce11b326f21bef3db28fccdc721a06d8fde9b8', class: "sr-only" }, this.closeButtonLabel || this.text("close")))), h("div", { key: '1ae14a7b2d043e6b7c4972eb4af05f1c3aefc52a', class: "panel-body" }, h("slot", { key: '0e8911d7ecbe771812e4751e91283da9ae335af6' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -19,6 +25,27 @@ export class Panel {
             "$": ["panel.css"]
         };
     }
+    static get properties() {
+        return {
+            "closeButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The accessible name for the close button."
+                },
+                "attribute": "close-button-label",
+                "reflect": false
+            }
+        };
+    }
     static get events() {
         return [{
                 "method": "dsoCloseClick",
@@ -43,5 +70,6 @@ export class Panel {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=panel.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"panel.js","sourceRoot":"","sources":["../../../../src/components/panel/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAMtF~~;;;GAGG;AAMH,MAAM,OAAO,KAAK~~;IAOhB~~,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,SAAS,GAAG;gBACvB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;oBACrG,iEAAU,IAAI,EAAC,OAAO,GAAY;oBAClC,6DAAM,KAAK,EAAC,SAAS,~~cAAe~~,~~CAC7B~~,CACL;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h } from \"@stencil/core\";\r\n\r\nexport interface PanelCloseEvent {\r\n originalEvent: Event;\r\n}\r\n\r\n/*\r\n @slot - The contents to be highlighted within the panel\r\n * @slot heading - The heading (h2 - h6) with the title of the panel\r\n /\r\n@Component({\r\n tag: \"dso-panel\",\r\n styleUrl: \"panel.scss\",\r\n shadow: true,\r\n})\r\nexport class Panel implements ComponentInterface {\r\n /\r\n Emitted when the user click the close button.\r\n */\r\n @Event()\r\n dsoCloseClick!: EventEmitter<PanelCloseEvent>;\r\n\r\n render() {\r\n return (\r\n <div class=\"dso-panel\">\r\n <div class=\"panel-heading\">\r\n <slot name=\"heading\" />\r\n <button type=\"button\" class=\"panel-close\" onClick={(e) => this.dsoCloseClick.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">~~Sluiten~~</span>\r\n </button>\r\n </div>\r\n <div class=\"panel-body\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"panel.js","sourceRoot":"","sources":["../../../../src/components/panel/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErG,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAM5C;;;GAGG;AAMH,MAAM,OAAO,KAAK;;QAgBR,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;;;IAEnD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,SAAS,GAAG;gBACvB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;oBACrG,iEAAU,IAAI,EAAC,OAAO,GAAY;oBAClC,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CACnE,CACL;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { translations } from \"./panel.i18n\";\r\n\r\nexport interface PanelCloseEvent {\r\n originalEvent: Event;\r\n}\r\n\r\n/*\r\n @slot - The contents to be highlighted within the panel\r\n * @slot heading - The heading (h2 - h6) with the title of the panel\r\n /\r\n@Component({\r\n tag: \"dso-panel\",\r\n styleUrl: \"panel.scss\",\r\n shadow: true,\r\n})\r\nexport class Panel implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoPanelElement;\r\n\r\n /\r\n The accessible name for the close button.\r\n /\r\n @Prop()\r\n closeButtonLabel?: string;\r\n\r\n /\r\n Emitted when the user click the close button.\r\n */\r\n @Event()\r\n dsoCloseClick!: EventEmitter<PanelCloseEvent>;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <div class=\"dso-panel\">\r\n <div class=\"panel-heading\">\r\n <slot name=\"heading\" />\r\n <button type=\"button\" class=\"panel-close\" onClick={(e) => this.dsoCloseClick.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">{this.closeButtonLabel \|\| this.text(\"close\")}</span>\r\n </button>\r\n </div>\r\n <div class=\"panel-body\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}