npm - @dso-toolkit/core - Versions diffs - 62.16.0 → 62.18.0 - Mend

@dso-toolkit/core 62.16.0 → 62.18.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 (157) hide show

package/dist/collection/components/advanced-select/advanced-select.js CHANGED Viewed

@@ -76,8 +76,9 @@ export class AdvancedSelect {
       .filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
       .map((group) => {
       var _a;
-      return h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length);
-    }))), h("dso-icon", { icon: "caret-down" }))), this.open && (h("div", { class: "groups-container" }, h("ul", { class: "groups" }, this.options.map((optionOrGroup) => "options" in optionOrGroup ? (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, optionOrGroup.label && h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h(OptionElement, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))), optionOrGroup.redirect && (h("a", { class: "group-link", href: optionOrGroup.redirect.href, onClick: (e) => optionOrGroup.redirect && this.handleRedirectClick(e, optionOrGroup.redirect) }, optionOrGroup.redirect.label, h("dso-icon", { icon: "chevron-right" }))))) : (h(OptionElement, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))))));
+      return (h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
+    }))), h("dso-icon", { icon: "caret-down" }))), this.open && (h("div", { class: "groups-container" }, h("ul", { class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionElement, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectElement, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+      ("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h(PlaceholderElement, { placeholder: optionOrGroup.placeholder }), optionOrGroup.redirect && (h(RedirectElement, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionElement, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
   }
   static get is() { return "dso-advanced-select"; }
   static get encapsulation() { return "shadow"; }
@@ -216,5 +217,7 @@ export class AdvancedSelect {
       }];
   }
 }
-const OptionElement = ({ option, active, activeHint, callback }) => (h("li", null, h("button", { class: clsx(["option", { "option-active": active === option }]), type: "button", onClick: (e) => callback(e, option) }, h("span", { class: "option-label" }, option.label), !!activeHint && active === option && h("span", { class: "option-hint" }, "(", activeHint, ")"))));
+const PlaceholderElement = ({ placeholder }) => h("p", { class: "placeholder" }, placeholder);
+const OptionElement = ({ option, active, activeHint, callback }) => (h("button", { class: clsx(["option", { "option-active": active === option }]), type: "button", onClick: (e) => callback(e, option) }, h("span", { class: "option-label" }, option.label), !!activeHint && active === option && h("span", { class: "option-hint" }, "(", activeHint, ")")));
+const RedirectElement = ({ redirect, callback }) => (h("a", { class: "group-link", href: redirect.href, onClick: (e) => callback(e, redirect) }, redirect.label, h("dso-icon", { icon: "chevron-right" })));
 //# sourceMappingURL=advanced-select.js.map

package/dist/collection/components/advanced-select/advanced-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"advanced-select.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Prop,\r\n h,\r\n FunctionalComponent,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Fragment,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n AdvancedSelectGroup,\r\n AdvancedSelectGroupRedirect,\r\n AdvancedSelectOption,\r\n AdvancedSelectChangeEvent,\r\n AdvancedSelectOptionOrGroup,\r\n AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.models\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n tag: \"dso-advanced-select\",\r\n styleUrl: \"advanced-select.scss\",\r\n shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @Element()\r\n host!: HTMLDsoAdvancedSelectElement;\r\n\r\n /*\r\n The options to display in the select.\r\n /\r\n @Prop()\r\n options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n /\r\n The active option. By object reference.\r\n /\r\n @Prop()\r\n active?: AdvancedSelectOption<never>;\r\n\r\n /\r\n An extra text for the active option. Only visible in the list of options.\r\n /\r\n @Prop()\r\n activeHint?: string;\r\n\r\n /\r\n The open state of the options list.\r\n /\r\n @State()\r\n open: boolean = false;\r\n\r\n /\r\n Emitted when user selects an option\r\n /\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n /\r\n Emitted when user activates a group redirect link.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n private toggleButtonElementRef: HTMLButtonElement \| undefined;\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (this.open && event.key === \"ArrowUp\") {\r\n event.preventDefault();\r\n this.handleTab(-1);\r\n } else if (this.open && event.key === \"ArrowDown\") {\r\n event.preventDefault();\r\n this.handleTab(1);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n if (this.open && !this.trap) {\r\n this.createTrap();\r\n } else if (!this.open && this.trap) {\r\n this.removeTrap();\r\n }\r\n }\r\n\r\n private toggleOpen = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: true,\r\n escapeDeactivates: true,\r\n setReturnFocus: this.toggleButtonElementRef,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n onDeactivate: () => {\r\n this.open = false;\r\n },\r\n }).activate();\r\n }\r\n\r\n private removeTrap() {\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n private handleTab(direction: number) {\r\n const elements = tabbable(this.host, { getShadowRoot: true });\r\n const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= elements.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = elements.length - 1;\r\n }\r\n\r\n elements[nextIndex]?.focus();\r\n }\r\n\r\n private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n this.dsoChange.emit({ originalEvent: event, option });\r\n this.open = false;\r\n };\r\n\r\n private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n aria-expanded={this.open.toString()}\r\n class={clsx([\"active-option\", { open: this.open }])}\r\n type=\"button\"\r\n onClick={this.toggleOpen}\r\n ref={(element) => (this.toggleButtonElementRef = element)}\r\n >\r\n <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n <span class=\"active-option-aside\">\r\n {this.options.some(\r\n (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n ) && (\r\n <span class=\"badges\">\r\n {this.options\r\n .filter(\r\n (option): option is AdvancedSelectGroup<never> =>\r\n \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n )\r\n .map((group) => {\r\n return <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>;\r\n })}\r\n </span>\r\n )}\r\n <dso-icon icon=\"caret-down\"></dso-icon>\r\n </span>\r\n </button>\r\n {this.open && (\r\n <div class=\"groups-container\">\r\n <ul class=\"groups\">\r\n {this.options.map((optionOrGroup) =>\r\n \"options\" in optionOrGroup ? (\r\n <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n {optionOrGroup.label && <p class=\"group-label\">{optionOrGroup.label}</p>}\r\n <ul class=\"options\">\r\n {optionOrGroup.options.map((option) => (\r\n <OptionElement\r\n option={option}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n ))}\r\n </ul>\r\n {optionOrGroup.redirect && (\r\n <a\r\n class=\"group-link\"\r\n href={optionOrGroup.redirect.href}\r\n onClick={(e) => optionOrGroup.redirect && this.handleRedirectClick(e, optionOrGroup.redirect)}\r\n >\r\n {optionOrGroup.redirect.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )}\r\n </li>\r\n ) : (\r\n <OptionElement\r\n option={optionOrGroup}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n ),\r\n )}\r\n </ul>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n\r\nconst OptionElement: FunctionalComponent<{\r\n option: AdvancedSelectOption<never>;\r\n active: AdvancedSelectOption<never> \| undefined;\r\n activeHint: string \| undefined;\r\n callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}> = ({ option, active, activeHint, callback }) => (\r\n <li>\r\n <button\r\n class={clsx([\"option\", { \"option-active\": active === option }])}\r\n type=\"button\"\r\n onClick={(e) => callback(e, option)}\r\n >\r\n <span class=\"option-label\">{option.label}</span>\r\n {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n </button>\r\n </li>\r\n);\r\n"]}
1	+ {"version":3,"file":"advanced-select.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Prop,\r\n h,\r\n FunctionalComponent,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Fragment,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n AdvancedSelectGroup,\r\n AdvancedSelectGroupRedirect,\r\n AdvancedSelectOption,\r\n AdvancedSelectChangeEvent,\r\n AdvancedSelectOptionOrGroup,\r\n AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.models\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n tag: \"dso-advanced-select\",\r\n styleUrl: \"advanced-select.scss\",\r\n shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @Element()\r\n host!: HTMLDsoAdvancedSelectElement;\r\n\r\n /*\r\n The options to display in the select.\r\n /\r\n @Prop()\r\n options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n /\r\n The active option. By object reference.\r\n /\r\n @Prop()\r\n active?: AdvancedSelectOption<never>;\r\n\r\n /\r\n An extra text for the active option. Only visible in the list of options.\r\n /\r\n @Prop()\r\n activeHint?: string;\r\n\r\n /\r\n The open state of the options list.\r\n /\r\n @State()\r\n open: boolean = false;\r\n\r\n /\r\n Emitted when user selects an option\r\n /\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n /\r\n Emitted when user activates a group redirect link.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n private toggleButtonElementRef: HTMLButtonElement \| undefined;\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (this.open && event.key === \"ArrowUp\") {\r\n event.preventDefault();\r\n this.handleTab(-1);\r\n } else if (this.open && event.key === \"ArrowDown\") {\r\n event.preventDefault();\r\n this.handleTab(1);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n if (this.open && !this.trap) {\r\n this.createTrap();\r\n } else if (!this.open && this.trap) {\r\n this.removeTrap();\r\n }\r\n }\r\n\r\n private toggleOpen = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: true,\r\n escapeDeactivates: true,\r\n setReturnFocus: this.toggleButtonElementRef,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n onDeactivate: () => {\r\n this.open = false;\r\n },\r\n }).activate();\r\n }\r\n\r\n private removeTrap() {\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n private handleTab(direction: number) {\r\n const elements = tabbable(this.host, { getShadowRoot: true });\r\n const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= elements.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = elements.length - 1;\r\n }\r\n\r\n elements[nextIndex]?.focus();\r\n }\r\n\r\n private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n this.dsoChange.emit({ originalEvent: event, option });\r\n this.open = false;\r\n };\r\n\r\n private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n aria-expanded={this.open.toString()}\r\n class={clsx([\"active-option\", { open: this.open }])}\r\n type=\"button\"\r\n onClick={this.toggleOpen}\r\n ref={(element) => (this.toggleButtonElementRef = element)}\r\n >\r\n <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n <span class=\"active-option-aside\">\r\n {this.options.some(\r\n (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n ) && (\r\n <span class=\"badges\">\r\n {this.options\r\n .filter(\r\n (option): option is AdvancedSelectGroup<never> =>\r\n \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n )\r\n .map((group) => (\r\n <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n ))}\r\n </span>\r\n )}\r\n <dso-icon icon=\"caret-down\"></dso-icon>\r\n </span>\r\n </button>\r\n {this.open && (\r\n <div class=\"groups-container\">\r\n <ul class=\"groups\">\r\n {this.options.map(\r\n (optionOrGroup) =>\r\n (\"options\" in optionOrGroup && (\r\n <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n <p class=\"group-label\">{optionOrGroup.label}</p>\r\n <ul class=\"options\">\r\n {optionOrGroup.options.map((option) => (\r\n <li>\r\n <OptionElement\r\n option={option}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n </li>\r\n ))}\r\n </ul>\r\n {optionOrGroup.redirect && (\r\n <RedirectElement\r\n redirect={optionOrGroup.redirect}\r\n callback={this.handleRedirectClick}\r\n ></RedirectElement>\r\n )}\r\n </li>\r\n )) \|\|\r\n (\"placeholder\" in optionOrGroup && (\r\n <li class=\"group\">\r\n <p class=\"group-label\">{optionOrGroup.label}</p>\r\n <PlaceholderElement placeholder={optionOrGroup.placeholder}></PlaceholderElement>\r\n {optionOrGroup.redirect && (\r\n <RedirectElement\r\n redirect={optionOrGroup.redirect}\r\n callback={this.handleRedirectClick}\r\n ></RedirectElement>\r\n )}\r\n </li>\r\n )) \|\| (\r\n <li>\r\n <OptionElement\r\n option={optionOrGroup}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n </li>\r\n ),\r\n )}\r\n </ul>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n\r\nconst PlaceholderElement: FunctionalComponent<{\r\n placeholder: string;\r\n}> = ({ placeholder }) => <p class=\"placeholder\">{placeholder}</p>;\r\n\r\nconst OptionElement: FunctionalComponent<{\r\n option: AdvancedSelectOption<never>;\r\n active: AdvancedSelectOption<never> \| undefined;\r\n activeHint: string \| undefined;\r\n callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}> = ({ option, active, activeHint, callback }) => (\r\n <button\r\n class={clsx([\"option\", { \"option-active\": active === option }])}\r\n type=\"button\"\r\n onClick={(e) => callback(e, option)}\r\n >\r\n <span class=\"option-label\">{option.label}</span>\r\n {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n </button>\r\n);\r\n\r\nconst RedirectElement: FunctionalComponent<{\r\n redirect: AdvancedSelectGroupRedirect;\r\n callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}> = ({ redirect, callback }) => (\r\n <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n {redirect.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n);\r\n"]}

package/dist/collection/components/advanced-select/advanced-select.models.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"advanced-select.models.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.models.ts"],"names":[],"mappings":"","sourcesContent":["export type AdvancedSelectVariant = \"primary\" \| \"success\" \| \"info\" \| \"warning\" \| \"danger\" \| \"error\" \| \"attention\";\r\n\r\nexport interface AdvancedSelectOption<T> {\r\n label: string;\r\n value?: T;\r\n}\r\n\r\nexport interface AdvancedSelectGroupRedirect {\r\n label: string;\r\n href: string;\r\n}\r\n\r\nexport interface AdvancedSelectGroup<T> {\r\n label: string;\r\n summaryCounter?: boolean;\r\n redirect?: AdvancedSelectGroupRedirect;\r\n options: AdvancedSelectOption<T>[];\r\n variant?: AdvancedSelectVariant;\r\n}\r\n\r\nexport type AdvancedSelectOptionOrGroup<T> = AdvancedSelectOption<T> \| AdvancedSelectGroup<T~~>;\~~r\n\r\nexport interface AdvancedSelectChangeEvent<T> {\r\n originalEvent: MouseEvent;\r\n option: AdvancedSelectOption<T>;\r\n}\r\n\r\nexport interface AdvancedSelectRedirectEvent {\r\n originalEvent: MouseEvent;\r\n isModifiedEvent: boolean;\r\n redirect: AdvancedSelectGroupRedirect;\r\n}\r\n"]}
1	+ {"version":3,"file":"advanced-select.models.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.models.ts"],"names":[],"mappings":"","sourcesContent":["export type AdvancedSelectVariant = \"primary\" \| \"success\" \| \"info\" \| \"warning\" \| \"danger\" \| \"error\" \| \"attention\";\r\n\r\nexport interface AdvancedSelectOption<T> {\r\n label: string;\r\n value?: T;\r\n}\r\n\r\nexport interface AdvancedSelectGroupRedirect {\r\n label: string;\r\n href: string;\r\n}\r\n\r\nexport interface AdvancedSelectGroup<T> {\r\n label: string;\r\n summaryCounter?: boolean;\r\n redirect?: AdvancedSelectGroupRedirect;\r\n options: AdvancedSelectOption<T>[];\r\n variant?: AdvancedSelectVariant;\r\n}\r\n\r\nexport interface AdvancedSelectPlaceholder {\r\n label: string;\r\n redirect?: AdvancedSelectGroupRedirect;\r\n placeholder: string;\r\n}\r\n\r\nexport type AdvancedSelectOptionOrGroup<T> =\r\n \| AdvancedSelectOption<T>\r\n \| AdvancedSelectGroup<T>\r\n \| AdvancedSelectPlaceholder;\r\n\r\nexport interface AdvancedSelectChangeEvent<T> {\r\n originalEvent: MouseEvent;\r\n option: AdvancedSelectOption<T>;\r\n}\r\n\r\nexport interface AdvancedSelectRedirectEvent {\r\n originalEvent: MouseEvent;\r\n isModifiedEvent: boolean;\r\n redirect: AdvancedSelectGroupRedirect;\r\n}\r\n"]}

package/dist/collection/components/document-component/document-component.css CHANGED Viewed

@@ -787,7 +787,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host([not-collapsible]) .heading-container {
   margin-bottom: 0;
 }
-:host([not-collapsible]) .wijzigactie-label {
+:host([not-collapsible]) .editaction-label {
   margin-left: 0;
 }
 :host([not-collapsible]) .heading-element {
@@ -804,7 +804,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host(:not([not-collapsible])) .heading-element:active {
   text-decoration: none;
 }
-:host(:not([not-collapsible])) .wijzigactie-label {
+:host(:not([not-collapsible])) .editaction-label {
   margin-left: 24px;
 }
@@ -825,7 +825,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
   color: #000;
 }
-.wijzigactie-label {
+.editaction-label {
   font-style: italic;
   margin-left: 8px;
 }

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

@@ -73,7 +73,7 @@ export class DocumentComponent {
       this.alternativeTitle ||
       this.bevatOntwerpInformatie ||
       this.annotated);
-    return (h(Host, { "not-collapsible": !collapsible }, showHeading && (h("div", { class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { class: "wijzigactie-label" }, this.wijzigactieLabel, ":"), h("div", { class: "heading" }, h(Heading, { heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { type: "button", class: "toggle-button" }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }))), h("div", { class: "title" }, this.notApplicable && h("span", { class: "not-applicable" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", null, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { class: "annotation-container", part: "_annotation-container" }, h("slot", { name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { class: "children-container", part: "_children-container" }, h("slot", null))));
+    return (h(Host, { "not-collapsible": !collapsible }, showHeading && (h("div", { class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { class: "heading" }, h(Heading, { heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { type: "button", class: "toggle-button" }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }))), h("div", { class: "title" }, this.notApplicable && h("span", { class: "not-applicable" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", null, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { class: "annotation-container", part: "_annotation-container" }, h("slot", { name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { class: "children-container", part: "_children-container" }, h("slot", null))));
   }
   static get is() { return "dso-document-component"; }
   static get encapsulation() { return "shadow"; }

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":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAa5G,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAIvD,MAAM,iBAAiB,GAA8D;EACnF,eAAe,EAAE,YAAY;EAC7B,SAAS,EAAE,YAAY;EACvB,kBAAkB,EAAE,YAAY;EAChC,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF;;;;;GAKG;AAMH,MAAM,OAAO,iBAAiB;;IAqJpB,uBAAkB,GAAG,CAAC,CAAa,EAAE,EAAE;MAC7C,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;OACjE;IACH,CAAC,CAAC;IAcM,iCAA4B,GAAG,CAAC,CAAyD,EAAE,EAAE;MACnG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9F,CAAC,CAAC;IAEM,+BAA0B,GAAG,CAAC,CAAa,EAAE,EAAE;MACrD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,aAAa,EAAE,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC,eAAe;QAC7B,IAAI,EAAE,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;OACnD,CAAC,CAAC;IACL,CAAC,CAAC;mBA5K0C,IAAI;;;;;gBA8BzC,KAAK;oBAMD,KAAK;yBAMA,KAAK;oCAMM,KAAK;kCAMP,KAAK;qBAMlB,KAAK;wBAMF,KAAK;qBAMR,KAAK;0BAMA,KAAK;;;;;;;EA8DtB,IAAY,gBAAgB;IAC1B,OAAO,IAAI,CAAC,WAAW,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACjE,CAAC;EAQO,MAAM;IACZ,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO,WAAW,CAAC;KACpB;IAED,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,OAAO,cAAc,CAAC;KACvB;IAED,OAAO,SAAS,CAAC;EACnB,CAAC;EAcD,MAAM;IACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,CAAC,CAAC,CACpB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC;MACtE,IAAI,CAAC,IAAI,KAAK,KAAK,CACpB,CAAC;IACF,MAAM,WAAW,GAAG,CAAC,CAAC,CACpB,IAAI,CAAC,WAAW;MAChB,WAAW;MACX,IAAI,CAAC,KAAK;MACV,IAAI,CAAC,MAAM;MACX,IAAI,CAAC,SAAS;MACd,IAAI,CAAC,gBAAgB;MACrB,IAAI,CAAC,sBAAsB;MAC3B,IAAI,CAAC,SAAS,CACf,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,uBAAkB,CAAC,WAAW;MAChC,WAAW,IAAI,CACd,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,oBAAoB;QACrD,IAAI,CAAC,WAAW,IAAI,YAAM,KAAK,EAAC,mBAAmB;UAAE,IAAI,CAAC,gBAAgB;cAAS;QACpF,WAAK,KAAK,EAAC,SAAS;UAClB,EAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB;YACrF,WAAW,IAAI,CACd,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;cACzC,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,GAAa,CAClE,CACV;YACD,WAAK,KAAK,EAAC,OAAO;cACf,IAAI,CAAC,aAAa,IAAI,YAAM,KAAK,EAAC,gBAAgB,2BAA4B;cAC9E,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAC7C;gBACG,IAAI,CAAC,KAAK,IAAI,CACb;kBACG,GAAG;kBACJ,wBACE,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,gBAAgB,EAAE,IAAI,CAAC,4BAA4B,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,OAAO,CAAC,CAAA,EAAA,CAAC,EACzD,iCAAiC,EAAE,CAAC,CAAC,EAAE,EAAE,CACvC,IAAI,CAAC,oBAAoB,CAAC,IAAI,iCAAM,CAAC,CAAC,MAAM,KAAE,MAAM,EAAE,OAAO,IAAG,EAElE,MAAM,SACY,CACnB,CACJ;gBACA,IAAI,CAAC,MAAM,IAAI,CACd;kBACG,GAAG;kBACJ,wBACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,gBAAgB,EAAE,IAAI,CAAC,4BAA4B,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,QAAQ,CAAC,CAAA,EAAA,CAAC,EAC1D,iCAAiC,EAAE,CAAC,CAAC,EAAE,EAAE,CACvC,IAAI,CAAC,oBAAoB,CAAC,IAAI,iCAAM,CAAC,CAAC,MAAM,KAAE,MAAM,EAAE,QAAQ,IAAG,EAEnE,MAAM,SACY,CACnB,CACJ;gBACA,IAAI,CAAC,SAAS,IAAI,CACjB;kBACG,GAAG;kBACJ,wBACE,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,gBAAgB,EAAE,IAAI,CAAC,4BAA4B,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,WAAW,CAAC,CAAA,EAAA,CAAC,EAC7D,iCAAiC,EAAE,CAAC,CAAC,EAAE,EAAE,CACvC,IAAI,CAAC,oBAAoB,CAAC,IAAI,iCAAM,CAAC,CAAC,MAAM,KAAE,MAAM,EAAE,WAAW,IAAG,EAEtE,MAAM,SACY,CACnB,CACJ,CACA,CACJ,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,gBAAgB,CACtB;cACA,MAAM,IAAI;;gBAAW,MAAM;oBAAS,CACjC,CACE;UACT,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,IAAI,CAClD,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,EACrE,OAAO,EAAE,IAAI,CAAC,0BAA0B;YAExC,gBAAU,IAAI,EAAE,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,GAAI,CAChE,CACV;UACA,IAAI,CAAC,wBAAwB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,sBAAsB,IAAI,CAC9E;YACE,iBAAW,MAAM,EAAC,SAAS,sBAAkB,0BAA0B,QAE3D;YACZ,mBAAa,EAAE,EAAC,0BAA0B,qCAA6C,CACtF,CACJ;UACA,CAAC,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAClD,WAAK,KAAK,EAAC,QAAQ;YAChB,IAAI,CAAC,sBAAsB,IAAI,CAC9B,iBAAW,MAAM,EAAC,SAAS,EAAC,OAAO,oBAEvB,CACb;YACA,IAAI,CAAC,SAAS,IAAI,CACjB,6BACE,UAAU,EAAC,YAAY,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC/C,CAC1B,CACG,CACP,CACG,CACF,CACP;MACD,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,uBAAuB;QAC5D,YAAM,IAAI,EAAC,YAAY,GAAG,CACtB;MACL,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CACpE,WAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,UAAU;QACjC,IAAI,CAAC,YAAY,IAAI,CACpB,iBAAW,MAAM,EAAC,MAAM,iEAAuE,CAChG;QACA,IAAI,CAAC,SAAS,IAAI,iBAAW,MAAM,EAAC,MAAM,kCAAwC;QAClF,IAAI,CAAC,MAAM,IAAI,CACd,wBACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,gBAAgB,EAAE,IAAI,CAAC,4BAA4B,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,QAAQ,CAAC,CAAA,EAAA,CAAC,EAC1D,iCAAiC,EAAE,CAAC,CAAC,EAAE,EAAE,CACvC,IAAI,CAAC,oBAAoB,CAAC,IAAI,iCAAM,CAAC,CAAC,MAAM,KAAE,MAAM,EAAE,QAAQ,IAAG,GAEnE,CACH,CACG,CACP;MACD,WAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,qBAAqB;QACxD,eAAQ,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 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 ? false : 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=\"wijzigactie-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 type=\"button\" class=\"toggle-button\">\r\n <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n </button>\r\n )}\r\n <div class=\"title\">\r\n {this.notApplicable && <span class=\"not-applicable\">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"]}
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 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 ? false : 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 type=\"button\" class=\"toggle-button\">\r\n <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n </button>\r\n )}\r\n <div class=\"title\">\r\n {this.notApplicable && <span class=\"not-applicable\">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"]}

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} 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?: \"voegtoe\" \| \"verwijder\" \| \"nieuweContainer\" \| \"verwijderContainer\";\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 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={documentComponent.volgordeNummer % 4 === 2}\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 <dso-annotation-output\r\n slot=\"annotation\"\r\n open\r\n identifier=\"test\"\r\n onDsoClose={() => this.handleAnnotationToggle(documentComponent)}\r\n >\r\n <span slot=\"title\">Annotaties</span>\r\n <dso-slide-toggle\r\n checked={this.isCheckedSlideToggle(documentComponent)}\r\n onDsoActiveChange={() => this.handleSelectableChange(documentComponent)}\r\n >\r\n Delfzijl\r\n </dso-slide-toggle>\r\n </dso-annotation-output>\r\n )}\r\n {this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (\r\n <ul>\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 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 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={documentComponent.volgordeNummer % 4 === 2}\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 <dso-annotation-output\r\n slot=\"annotation\"\r\n open\r\n identifier=\"test\"\r\n onDsoClose={() => this.handleAnnotationToggle(documentComponent)}\r\n >\r\n <span slot=\"title\">Annotaties</span>\r\n <dso-slide-toggle\r\n checked={this.isCheckedSlideToggle(documentComponent)}\r\n onDsoActiveChange={() => this.handleSelectableChange(documentComponent)}\r\n >\r\n Delfzijl\r\n </dso-slide-toggle>\r\n </dso-annotation-output>\r\n )}\r\n {this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (\r\n <ul>\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/expandable/expandable.css CHANGED Viewed

@@ -1,23 +1,22 @@
-:host {
-  display: block;
+:host([enable-animation]) {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-:host(.dso-hide) {
-  display: none;
+:host([enable-animation]) .slot-container {
+  overflow: hidden;
 }
-:host(:not(.dso-animate-ready)) {
-  position: absolute;
-  visibility: hidden;
+:host(:not([enable-animation])) {
+  display: none;
 }
-:host([open]) {
-  position: inherit;
-  visibility: inherit;
+:host([open][enable-animation]) {
+  grid-template-rows: 1fr;
 }
-:host(:not([is-open])) {
-  overflow-y: hidden;
+:host([open]:not([enable-animation])) {
+  display: block;
 }
 *,

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

@@ -1,130 +1,42 @@
 import { h, Host, } from "@stencil/core";
-import anime from "animejs";
 import clsx from "clsx";
-import debounce from "debounce";
 export class Expandable {
   constructor() {
     this.open = undefined;
     this.enableAnimation = false;
     this.minimumHeight = undefined;
-    this.animationReady = false;
-    this.isOpen = this.open;
+    this.isClosed = true;
   }
   toggleOpen() {
-    if (this.enableAnimation) {
-      this.activateAnimation();
+    if (!this.enableAnimation) {
+      this.isClosed = !this.open;
     }
   }
-  toggleEnableAnimation(enableAnimation) {
-    var _a;
-    if (enableAnimation) {
-      this.prepareAnimationResizeObserver();
-      this.activateObserver();
-    }
-    else {
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-      delete this.animeInstance;
-      this.host.removeAttribute("style");
+  /**
+   * Listens to the transitionstart event
+   */
+  transitionstartHandler(e) {
+    if (e.propertyName === "grid-template-rows") {
+      this.dsoExpandableAnimationStart.emit({
+        currentOpen: !!this.open,
+        nextOpen: !this.open,
+      });
     }
   }
-  componentDidLoad() {
-    if (this.enableAnimation) {
-      this.prepareAnimationResizeObserver();
+  /**
+   * Listens to the transitionend event
+   */
+  transitionendHandler(e) {
+    if (e.propertyName === "grid-template-rows") {
+      this.isClosed = !this.open;
+      this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight, open: !!this.open });
     }
-    this.activateObserver();
-  }
-  activateObserver() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
     return (h(Host, { "aria-hidden": this.open ? "false" : "true", class: clsx({
-        "dso-animate-ready": this.enableAnimation && this.animationReady,
-        "dso-hide": !this.enableAnimation && !this.open,
-      }), "is-open": this.isOpen }, h("slot", null)));
-  }
-  prepareAnimationResizeObserver() {
-    this.resizeObserver = new ResizeObserver(debounce(([entry]) => {
-      if (!entry) {
-        throw new Error("No entry found");
-      }
-      // entry.contentRect does not include padding, so we use getBoundingClientRect.
-      const height = entry.target.getBoundingClientRect().height;
-      if (this.bodyHeight !== height) {
-        this.bodyHeight = height;
-      }
-      this.instantiateAnimation();
-    }, 150));
-  }
-  instantiateAnimation() {
-    var _a;
-    this.animeInstance = anime({
-      targets: this.host,
-      height: (_a = this.minimumHeight) !== null && _a !== void 0 ? _a : 0,
-      easing: "cubicBezier(0.4, 0, 0.2, 1)",
-      duration: 260,
-      autoplay: false,
-      direction: "normal",
-      changeBegin: () => {
-        this.dsoExpandableAnimationStart.emit({
-          currentOpen: !!this.open,
-          nextOpen: !this.open,
-        });
-      },
-      begin: () => {
-        if (this.open) {
-          this.host.style.visibility = "";
-          this.host.style.position = "";
-          this.host.style.bottom = "";
-        }
-        else {
-          this.isOpen = false;
-        }
-      },
-      complete: () => {
-        this.host.style.height = "";
-        if (!this.open) {
-          this.host.style.visibility = "hidden";
-          this.host.style.position = "absolute";
-          this.host.style.bottom = "100%";
-        }
-        else {
-          this.isOpen = true;
-        }
-      },
-      changeComplete: () => {
-        this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight, open: !!this.open });
-      },
-    });
-    if (!this.open) {
-      this.animeInstance.reverse();
-      this.animeInstance.play();
-    }
-    if (this.host) {
-      this.host.style.height = "";
-    }
-    this.animationReady = !!this.animeInstance;
-  }
-  activateAnimation() {
-    if (this.animeInstance) {
-      if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {
-        this.animeInstance.reverse();
-      }
-      else {
-        if (this.open) {
-          this.animeInstance.direction = "reverse";
-          this.animeInstance.play();
-        }
-        else {
-          this.animeInstance.direction = "normal";
-          this.animeInstance.play();
-        }
-      }
-    }
+        "dso-animate-ready": this.enableAnimation,
+        "dso-hide": this.isClosed,
+      }) }, h("div", { class: "slot-container" }, h("slot", null))));
   }
   static get is() { return "dso-expandable"; }
   static get encapsulation() { return "shadow"; }
@@ -196,8 +108,7 @@ export class Expandable {
   }
   static get states() {
     return {
-      "animationReady": {},
-      "isOpen": {}
+      "isClosed": {}
     };
   }
   static get events() {
@@ -250,9 +161,21 @@ export class Expandable {
     return [{
         "propName": "open",
         "methodName": "toggleOpen"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "transitionstart",
+        "method": "transitionstartHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
-        "propName": "enableAnimation",
-        "methodName": "toggleEnableAnimation"
+        "name": "transitionend",
+        "method": "transitionendHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }