@dso-toolkit/core 62.25.0 → 62.27.0

package/dist/collection/components/advanced-select/advanced-select.css

@@ -11,7 +11,7 @@
 .active-option {
   display: flex;
   inline-size: 100%;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   padding: 0;
   border: 1px solid #275937;
@@ -28,9 +28,13 @@
 .active-option dso-icon {
   color: #275937;
 }
+.active-option dso-label {
+  margin-inline-start: 8px;
+}
 
 .active-option-label {
-  padding: 4px 16px;
+  padding-block: 4px;
+  padding-inline: 16px;
   overflow: hidden;
   /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */
   white-space: nowrap;
@@ -42,7 +46,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 0 8px;
+  padding-block: 0;
+  padding-inline: 8px;
+  margin-inline-start: auto;
 }
 
 .badges {
@@ -74,13 +80,13 @@
 }
 
 .group {
-  border-bottom: 1px solid #ccc;
+  border-block-end: 1px solid #ccc;
 }
 .group:last-child {
-  border-bottom: none;
+  border-block-end: none;
 }
 .group .option {
-  padding-left: 37px;
+  padding-inline-start: 37px;
 }
 .group .option-label::before {
   content: "";
@@ -88,7 +94,8 @@
   display: block;
   block-size: 10px;
   inline-size: 10px;
-  inset: 4px auto auto -20px;
+  inset-block: 4px auto;
+  inset-inline: -20px auto;
   border-radius: 50%;
   background-color: #ccc;
   border-color: #ccc;
@@ -97,16 +104,18 @@
 
 .group-label {
   margin: 0;
-  padding: 4px 16px;
+  padding-block: 4px;
+  padding-inline: 16px;
   color: #666;
   font-size: 14px;
   font-weight: 500;
-  border-bottom: 1px solid #ccc;
+  border-block-end: 1px solid #ccc;
 }
 
 .group-link {
   display: block;
-  padding: 8px 4px;
+  padding-block: 8px;
+  padding-inline: 4px;
   text-align: end;
   color: #000;
   text-decoration: none;
@@ -168,13 +177,14 @@
 .option {
   display: block;
   inline-size: 100%;
-  padding: 8px 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
   cursor: pointer;
   line-height: inherit;
   font-family: inherit;
   font-size: inherit;
   border: none;
-  text-align: left;
+  text-align: start;
   background-color: #fff;
 }
 .option:hover {
@@ -199,7 +209,7 @@
 }
 
 .option-hint {
-  padding-left: 5px;
+  padding-inline-start: 5px;
   color: #39870c;
   font-size: Asap, sans-serif;
   font-weight: bold;
@@ -207,6 +217,7 @@
 
 .placeholder {
   margin: 0;
-  padding: 8px 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
   color: #666;
 }

package/dist/collection/components/advanced-select/advanced-select.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=advanced-select.interfaces.js.map

package/dist/collection/components/advanced-select/advanced-select.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-select.interfaces.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.interfaces.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  activeLabel?: 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/advanced-select/advanced-select.js

@@ -72,13 +72,13 @@ export class AdvancedSelect {
     }
     render() {
         var _a, _b;
-        return (h(Fragment, null, h("button", { key: 'faa2a464654b5588270e5167fd6fcbd02bcb2e4c', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h("span", { key: 'f6ac64547bde1524cb7d3b58c58bf869dc726f65', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '5aa6fbc03ef2b9452cbe9c6af20ce402bf5d0a3f', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: '44fe615ffd6638471c4d8022a654296405b9311a', class: "badges" }, this.options
+        return (h(Fragment, null, h("button", { key: '2ce96f0601a2389cb6c5b6ef2c498e47df3281bf', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: 'db69d2251bcc1ba4eb321a0dc438ef6da78e51d1', active: this.active, options: this.options }), h("span", { key: 'c409b29582ae28c06435b1b847ded96678dfb83a', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '4f6bb9f7a0a4b5b2ef5903ca9b06500c5160e3d2', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: '6318ffbdab47a2c2af54b63559afab11a455fce1', class: "badges" }, this.options
             .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", { key: 'b0a5459c6c17c7d109b88a923054c85cc2a9c75f', icon: "caret-down" }))), this.open && (h("div", { key: 'f1490ff92e27d6b970558c83ccab35efec989597', class: "groups-container" }, h("ul", { key: 'a10ee50e10d87e7437cb9a51bc349207f82725fc', 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 })))))))));
+        }))), h("dso-icon", { key: 'd318272d7fbd4a517d2833528164cc3e6212cce6', icon: "caret-down" }))), this.open && (h("div", { key: '5fd58e337194ea6a8c2744577d6ee8099289fe40', class: "groups-container" }, h("ul", { key: 'da2b62d8bca19b31cb60eeaa5c420efaa0e066b3', 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(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+            ("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
     }
     static get is() { return "dso-advanced-select"; }
     static get encapsulation() { return "shadow"; }
@@ -103,8 +103,8 @@ export class AdvancedSelect {
                     "references": {
                         "AdvancedSelectOptionOrGroup": {
                             "location": "import",
-                            "path": "./advanced-select.models",
-                            "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectOptionOrGroup"
+                            "path": "./advanced-select.interfaces",
+                            "id": "src/components/advanced-select/advanced-select.interfaces.ts::AdvancedSelectOptionOrGroup"
                         }
                     }
                 },
@@ -125,8 +125,8 @@ export class AdvancedSelect {
                     "references": {
                         "AdvancedSelectOption": {
                             "location": "import",
-                            "path": "./advanced-select.models",
-                            "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectOption"
+                            "path": "./advanced-select.interfaces",
+                            "id": "src/components/advanced-select/advanced-select.interfaces.ts::AdvancedSelectOption"
                         }
                     }
                 },
@@ -178,8 +178,8 @@ export class AdvancedSelect {
                     "references": {
                         "AdvancedSelectChangeEvent": {
                             "location": "import",
-                            "path": "./advanced-select.models",
-                            "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectChangeEvent"
+                            "path": "./advanced-select.interfaces",
+                            "id": "src/components/advanced-select/advanced-select.interfaces.ts::AdvancedSelectChangeEvent"
                         }
                     }
                 }
@@ -199,8 +199,8 @@ export class AdvancedSelect {
                     "references": {
                         "AdvancedSelectRedirectEvent": {
                             "location": "import",
-                            "path": "./advanced-select.models",
-                            "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectRedirectEvent"
+                            "path": "./advanced-select.interfaces",
+                            "id": "src/components/advanced-select/advanced-select.interfaces.ts::AdvancedSelectRedirectEvent"
                         }
                     }
                 }
@@ -217,7 +217,12 @@ export class AdvancedSelect {
             }];
     }
 }
-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" })));
+const OptionButton = ({ 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 RedirectAnchor = ({ redirect, callback }) => (h("a", { class: "group-link", href: redirect.href, onClick: (e) => callback(e, redirect) }, redirect.label, h("dso-icon", { icon: "chevron-right" })));
+const ActiveGroupLabel = ({ active, options }) => {
+    const group = options.find((optionOrGroup) => "options" in optionOrGroup &&
+        !!optionOrGroup.options.find((option) => option === active) &&
+        !!optionOrGroup.activeLabel);
+    return group ? (h("dso-label", { compact: true, status: group.variant }, group.activeLabel)) : undefined;
+};
 //# sourceMappingURL=advanced-select.js.map

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

@@ -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                    <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"]}
+{"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.interfaces\";\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          <ActiveGroupLabel active={this.active} options={this.options} />\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                            <OptionButton\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                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\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                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\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\ninterface OptionButtonProps {\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}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ 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\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ 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\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return group ? (\r\n    <dso-label compact status={group.variant}>\r\n      {group.activeLabel}\r\n    </dso-label>\r\n  ) : undefined;\r\n};\r\n"]}

package/dist/collection/components/alert/alert.css

@@ -3,7 +3,24 @@
 }
 
 :host(:not(:first-child)) {
-  margin-top: 24px;
+  margin-block-start: 24px;
+}
+
+:host([compact]:not([compact=false])) {
+  position: relative;
+  border-end-end-radius: 8px;
+  border-start-end-radius: 8px;
+  margin-inline-start: 8px;
+}
+:host([compact]:not([compact=false]))::before {
+  border-end-start-radius: 8px;
+  border-start-start-radius: 8px;
+  inset-block-end: 0;
+  content: "";
+  inset-inline-start: -8px;
+  position: absolute;
+  inset-block-start: 0;
+  inline-size: 8px;
 }
 
 :host([status=success]) {
@@ -27,6 +44,10 @@
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
 
+:host([status=success][compact]:not([compact=false]))::before {
+  background-color: #39870c;
+}
+
 :host([status=error]) {
   --link-color: currentColor;
   --link-hover-color: currentColor;
@@ -48,6 +69,10 @@
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
 
+:host([status=error][compact]:not([compact=false]))::before {
+  background-color: #ce3f51;
+}
+
 :host([status=warning]) {
   --link-color: currentColor;
   --link-hover-color: currentColor;
@@ -69,6 +94,10 @@
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
 
+:host([status=warning][compact]:not([compact=false]))::before {
+  background-color: #dcd400;
+}
+
 :host([status=info]) {
   --link-color: currentColor;
   --link-hover-color: currentColor;
@@ -90,6 +119,10 @@
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
 
+:host([status=info][compact]:not([compact=false]))::before {
+  background-color: #6ca4d9;
+}
+
 *,
 *::after,
 *::before {
@@ -98,8 +131,8 @@
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -108,29 +141,41 @@
 }
 
 .alert {
-  border: 1px solid transparent;
   line-height: 1.5;
-  margin-bottom: 24px;
-  min-height: 64px;
+  margin-block-end: 24px;
+  min-block-size: 64px;
   position: relative;
 }
 @media screen and (min-width: 481px) {
   .alert {
-    padding: 19px 16px 19px 63px;
+    padding-block: 19px;
+    padding-inline: 63px 16px;
+  }
+  .alert.dso-compact {
+    padding-block: 9.5px;
+    padding-inline: 16px;
   }
 }
 @media screen and (max-width: 480px) {
   .alert {
-    padding: 63px 16px 16px;
+    padding-block: 63px 16px;
+    padding-inline: 16px;
+  }
+  .alert.dso-compact {
+    padding-block: 9.5px;
+    padding-inline: 16px;
   }
 }
 .alert:not(:first-child) {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 .alert dso-icon {
-  left: 15px;
+  inset-block-start: 16px;
+  inset-inline-start: 16px;
   position: absolute;
-  top: 15px;
-  height: 32px;
-  width: 32px;
+  block-size: 32px;
+  inline-size: 32px;
+}
+.alert.dso-compact {
+  min-block-size: 16px;
 }

package/dist/collection/components/alert/alert.js

@@ -4,13 +4,14 @@ export class Alert {
     constructor() {
         this.status = undefined;
         this.roleAlert = undefined;
+        this.compact = undefined;
     }
     render() {
         const status = Alert.statusMap.get(this.status);
         if (!status) {
             throw new Error(`Invalid status ${this.status}`);
         }
-        return (h("div", { key: '41bd8fbd1a420d988e81c3ffad06a2a299d482e8', class: clsx("alert", `alert-${this.status}`), role: this.roleAlert ? "alert" : undefined }, h("dso-icon", { key: '52f8fbb83b9a187054d555604daa52d78d7cccd0', icon: "status-" + this.status }), h("span", { key: 'b8a1abb5281a4ad361b81aba0d7bed528897c17b', class: "sr-only" }, status, ":"), h("slot", { key: '2ac0aa390113ef3239703e6065716c590f1d255c' })));
+        return (h("div", { key: '417e26be9e6ff6536cc8c2afb9ce0122f44ecdde', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: 'bfa8f41e437b89708eba82ba1a9607cc6fb006a8', icon: "status-" + this.status }), h("span", { key: '1ed463e8789085f4dce8e2ce47540f3e171760b3', class: "sr-only" }, status, ":"), h("slot", { key: '9892c04178c20fafea1969feb551fc4917e1b915' })));
     }
     static get is() { return "dso-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -59,6 +60,23 @@ export class Alert {
                 },
                 "attribute": "role-alert",
                 "reflect": false
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show alert as compact variant (without icon)"
+                },
+                "attribute": "compact",
+                "reflect": true
             }
         };
     }

package/dist/collection/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,KAAK;;;;;IAoBhB,MAAM;QACJ,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YAC3F,iEAAU,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAa;YACpD,6DAAM,KAAK,EAAC,SAAS;gBAAE,MAAM;oBAAS;YACtC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApBc,eAAS,GAAG,IAAI,GAAG,CAAiB;IACjD,CAAC,SAAS,EAAE,QAAQ,CAAC;IACrB,CAAC,MAAM,EAAE,WAAW,CAAC;IACrB,CAAC,SAAS,EAAE,cAAc,CAAC;IAC3B,CAAC,OAAO,EAAE,MAAM,CAAC;CAClB,CAAC,AALsB,CAKrB","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  private static statusMap = new Map<string, string>([\r\n    [\"success\", \"Gelukt\"],\r\n    [\"info\", \"Opmerking\"],\r\n    [\"warning\", \"Waarschuwing\"],\r\n    [\"error\", \"Fout\"],\r\n  ]);\r\n\r\n  render() {\r\n    const status = Alert.statusMap.get(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div class={clsx(\"alert\", `alert-${this.status}`)} role={this.roleAlert ? \"alert\" : undefined}>\r\n        <dso-icon icon={\"status-\" + this.status}></dso-icon>\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,KAAK;;;;;;IA0BhB,MAAM;QACJ,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,OAAO,CACL,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,iEAAU,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAa;YACtE,6DAAM,KAAK,EAAC,SAAS;gBAAE,MAAM;oBAAS;YACtC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAvBc,eAAS,GAAG,IAAI,GAAG,CAAiB;IACjD,CAAC,SAAS,EAAE,QAAQ,CAAC;IACrB,CAAC,MAAM,EAAE,WAAW,CAAC;IACrB,CAAC,SAAS,EAAE,cAAc,CAAC;IAC3B,CAAC,OAAO,EAAE,MAAM,CAAC;CAClB,CAAC,AALsB,CAKrB","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  private static statusMap = new Map<string, string>([\r\n    [\"success\", \"Gelukt\"],\r\n    [\"info\", \"Opmerking\"],\r\n    [\"warning\", \"Waarschuwing\"],\r\n    [\"error\", \"Fout\"],\r\n  ]);\r\n\r\n  render() {\r\n    const status = Alert.statusMap.get(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon icon={\"status-\" + this.status}></dso-icon>}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/annotation/annotation-activiteit/annotation-activiteit.js

@@ -16,7 +16,7 @@ export class AnnotationActiviteit {
         this.regelKwalificatieVoorzetsel = undefined;
     }
     render() {
-        return (h(AnnotationBody, { key: 'e65c359d4d277852b980dfcb94a8095b760fe291', active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(AnnotationDiffRenderer, { value: this.naam }), data: h(Fragment, null, h("span", { class: "content" }, this.regelKwalificatie && (h(Fragment, null, h(AnnotationDiffRenderer, { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, h(AnnotationDiffRenderer, { value: this.locatieNoemers })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: 'b99fc074965b115131391ba52320a959340bb399', active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(AnnotationDiffRenderer, { value: this.naam }), data: h(Fragment, null, h("span", { class: "content" }, this.regelKwalificatie && (h(Fragment, null, h(AnnotationDiffRenderer, { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, h(AnnotationDiffRenderer, { value: this.locatieNoemers })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-activiteit"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation-gebiedsaanwijzing/annotation-gebiedsaanwijzing.js

@@ -13,7 +13,7 @@ export class AnnotationGebiedsaanwijzing {
         this.naam = undefined;
     }
     render() {
-        return (h(AnnotationBody, { key: '20b91adc13efad9dd22e3df18dc5b92b333de2f4', active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h(AnnotationDiffRenderer, { value: this.naam })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: 'a69c702effa1d2dbec9f3a8132de6c22a764657f', active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h(AnnotationDiffRenderer, { value: this.naam })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-gebiedsaanwijzing"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation-omgevingsnorm/annotation-omgevingsnorm.js

@@ -15,7 +15,7 @@ export class AnnotationOmgevingsnorm {
         this.eenheid = undefined;
     }
     render() {
-        return (h(AnnotationBody, { key: 'e0b0eafa60be59276a2bc5c5ec9c4d78adf69811', active: this.active || false, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h(AnnotationDiffRenderer, { value: this.naam }), " (in ", h(AnnotationDiffRenderer, { value: this.eenheid }), ")"), data: h(Fragment, null, h("span", { class: "content" }, "Waardes worden weergegeven op de kaart: ", h(AnnotationDiffRenderer, { value: this.waardes })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '4637d27c110187dad87fc8dbfe141d5f461f8c9c', active: this.active || false, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h(AnnotationDiffRenderer, { value: this.naam }), " (in ", h(AnnotationDiffRenderer, { value: this.eenheid }), ")"), data: h(Fragment, null, h("span", { class: "content" }, "Waardes worden weergegeven op de kaart: ", h(AnnotationDiffRenderer, { value: this.waardes })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-omgevingsnorm"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation-werkingsgebied/annotation-werkingsgebied.js

@@ -13,7 +13,7 @@ export class AnnotationWerkingsgebied {
         this.locatieNoemer = undefined;
     }
     render() {
-        return (h(AnnotationBody, { key: '5ff15871ff44f3ce0120bbd38e01745db2bcddf8', active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h(AnnotationDiffRenderer, { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '8f3f6557c673e362c9aa2728e1efc1a2a86646f6', active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h(AnnotationDiffRenderer, { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-werkingsgebied"; }
     static get encapsulation() { return "shadow"; }