@dso-toolkit/core 79.1.0 → 81.0.0

package/dist/collection/components/label/label.css

@@ -1,6 +1,7 @@
 :host {
   display: inline-block;
   max-inline-size: 100%;
+  font-weight: normal;
 }
 
 *,
@@ -32,53 +33,164 @@
   text-decoration: line-through;
 }
 .dso-label {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f2f2f2;
-  border-color: #f2f2f2;
   color: #191919;
 }
+.dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
 .dso-label.dso-label-info {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #6ca4d9;
-  border-color: #6ca4d9;
   color: #191919;
 }
+.dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
 .dso-label.dso-label-primary {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #275937;
-  border-color: #275937;
   color: #fff;
 }
+.dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 .dso-label.dso-label-success {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #39870c;
-  border-color: #39870c;
   color: #fff;
 }
+.dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 .dso-label.dso-label-warning {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #dcd400;
-  border-color: #dcd400;
   color: #191919;
 }
+.dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
 .dso-label.dso-label-error {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #ce3f51;
-  border-color: #ce3f51;
   color: #fff;
 }
+.dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 .dso-label.dso-label-bright {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
   background-color: #fff;
-  border-color: #fff;
   color: #191919;
 }
 .dso-label.dso-label-bright {
@@ -86,24 +198,64 @@
   outline-offset: -1px;
 }
 .dso-label.dso-label-attention {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #8b4a6a;
-  border-color: #8b4a6a;
   color: #fff;
 }
+.dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 .dso-label.dso-label-filter {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e1ecf7;
-  border-color: #e1ecf7;
   color: #191919;
 }
+.dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
 .dso-label.dso-label-filter {
   border-inline-start: 5px solid #6ca4d9;
 }
 .dso-label.dso-label-toegevoegd {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -112,7 +264,6 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -129,8 +280,13 @@
 }
 .dso-label.dso-label-toegevoegd {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
 .dso-label.dso-label-verwijderd {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -139,7 +295,6 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -155,7 +310,9 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 .dso-label.dso-label-verwijderd {
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .dso-label.dso-label-verwijderd {

package/dist/collection/components/label/label.js

@@ -94,13 +94,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '0b6cf34b6aefcbb4957ba2e6b9d163a2d6918fa2' }, h("span", { key: '9eec335d89922ffd095b36f8cb34fa5fc226510c', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: '269e8ab276b564569b719be9858e32b8199d8c45' }, h("span", { key: '283dde74a7423b2e355ffb237bc3551312ee7cee', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'f79b2c501b4cea497996c2488e014e0542c367e7', name: "symbol" }), h("span", { key: '87b4b6fabc51e6c5f1e4f803ecedd2737b0cc492', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '47649523a9d791f810456dcaab6c0d6d394dbe47', name: "symbol" }), h("span", { key: '0f6699fc606d3b83125f69c774f9e96366bad2a1', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '7026faaf04f728f6a322d1e33ab7f7dbe449552e' })), this.removable && (h("dso-icon-button", { key: '3f587acbe6b4b0e08f1f4c7c64fbd27efa2445f7', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '9ba3f90d4484c61d4757c9dc7929d9c583ef598d', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'dd0b563860ecc5f46f2c24111ec18ddf863ed8eb' })), this.removable && (h("dso-icon-button", { key: 'bf62343f5f8ece77887e69bc262d9e4511fa1f81', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '29a5fc440662776606faaf5b2dc9526411ae7e0a', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }
@@ -133,7 +133,7 @@ export class Label {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "removable": {
                 "type": "boolean",
@@ -177,7 +177,7 @@ export class Label {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "truncate": {
                 "type": "boolean",
@@ -196,7 +196,7 @@ export class Label {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/label/label.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: LabelStatus;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <dso-icon-button\r\n              variant=\"tertiary\"\r\n              icon=\"times\"\r\n              label={`Verwijder: ${this.labelText}`}\r\n              onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            />\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAQ,MAAM,UAAU,CAAC;AAIhC,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CAAC,CAAC,OAA8B,EAAE,EAAE;IAC1C,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;QAC7B,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,MAAM,CAAC,cAAc,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;AAEF,SAAS,mBAAmB,CAAC,OAAgB;IAC3C,OAAO,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC;AACzC,CAAC;AAED,SAAS,WAAW,CAAC,EAAe;IAClC,OAAO,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;AACzC,CAAC;AAOD,MAAM,OAAO,KAAK;IALlB;QAwDE,gBAAW,GAAG,KAAK,CAAC;QAGpB,cAAS,GAAG,EAAE,CAAC;KAgJhB;IA7IC,cAAc,CAAC,SAAkB;QAC/B,IAAI,SAAS,EAAE,CAAC;YACd,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,QAAiB;QAC7B,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,cAAc;QAClB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,aAAa;;QACnB,IAAI,CAAC,SAAS,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,mCAAI,EAAE,CAAC;IACvD,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,0HAA0H;IAClH,qBAAqB;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAEzE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACvC,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,oBAAoB,CAAC,KAAK,GAAG,KAAK;;QACxC,IAAI,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;YAChD,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;YAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,YAAY;QAClB,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ;YACP,iFACoB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,EAC3D,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;oBACvB,CAAC,aAAa,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM;oBACzC,aAAa,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS;oBAC9C,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW;iBAClD,CAAC;gBAEF,6DAAM,IAAI,EAAC,QAAQ,GAAQ;gBAC3B,6DACE,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE;wBAC/B,cAAc,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;qBAChC,CAAC,EACF,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3D,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBAEtC,8DAAa,CACR;gBACN,IAAI,CAAC,SAAS,IAAI,CACjB,wEACE,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,cAAc,IAAI,CAAC,SAAS,EAAE,EACrC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EACnE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,GACxC,CACH,CACI;YACN,IAAI,CAAC,WAAW,IAAI,CACnB,oEACE,SAAS,QACT,EAAE,EAAC,eAAe,EAClB,MAAM,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EACxC,QAAQ,EAAC,KAAK,EACd,QAAQ,EAAC,UAAU,IAElB,IAAI,CAAC,SAAS,CACH,CACf,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  status?: LabelStatus;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <dso-icon-button\r\n              variant=\"tertiary\"\r\n              icon=\"times\"\r\n              label={`Verwijder: ${this.labelText}`}\r\n              onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            />\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/legend-item/legend-item.js

@@ -31,7 +31,7 @@ export class LegendItem {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: 'bb29c154cabdd5638eceb98f115f47ffdc849f19', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'fcc8adc7e164038c43702e6c894cb4c99a2fa87d', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'd697b6969913b69eb382042d3c9872d7a055b3e2' }, h("slot", { key: '4b6a6ca641bdd2db1add8228012c26fb367252fd', name: "symbol" }))), h("div", { key: '4cb27d216c269153de29456506ed3283ec5b4ab3' }, h("slot", { key: '10daf3e2bef4dd1242823dff74451744cc602705' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '5e74c5da1011113459866077ae3f748fec94ef06', position: "bottom" }, this.disabledMessage)), h("div", { key: 'fae4cbfad614f554e081759fe7b437a7d4b96608', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: '58f75ebffb71903c24498cf517970dfb960d9447', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '331c30242153ea9e87063b8a784406bc527b543a', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '7800987198ece6fb7127d576b1f2c92fa812d511', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '00faad1a8a92ea7d3f5ff32e770f16004cb13b37', name: "options" })))));
+        return (h(Host, { key: '38be1df12f1f113816674acf519ca76556f1403a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '9fddb3543595f36d22ec4142ee5fba58e3c990ab', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'b9df4829c8cc3c2126266f34ce88cb1d53eafff7' }, h("slot", { key: '495da7eb326370bb0feee44527a809507e6e74e6', name: "symbol" }))), h("div", { key: '3bdf1190237821c2bef9884a14f04ab017c4087b' }, h("slot", { key: '377992fc61ae3161abdf7abe3f71f86e8e894993' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: 'ef6fb8d9106dc9e89f97d9b21a8a7448639deef4', position: "bottom" }, this.disabledMessage)), h("div", { key: '560eb094f29cb4c0a61bc6dd34f36dee6e0ff999', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: 'a79be1bd5099dc462a49d23ec71ea904f24b017e', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '17bd79c80420e0c49200eaaf1e27e9e5ee341756', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'ed80008eaa2043b2cf48d994f9702289e6ccecbb', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '1b3f645207191ddb22434c859c13107724f7c190', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-button/list-button.css

@@ -90,29 +90,16 @@
   margin-inline-start: 8px;
 }
 .dso-tertiary dso-icon + span:not(.sr-only),
-.dso-tertiary svg.di + span:not(.sr-only),
-.dso-tertiary span:not(.sr-only) + dso-icon,
-.dso-tertiary span:not(.sr-only) + svg.di {
+.dso-tertiary span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
 }
-.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-inline-start: 4px;
-}
 .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
   margin-inline-start: 0;
 }
 .dso-tertiary dso-icon,
-.dso-tertiary svg.di,
 .dso-tertiary span {
   vertical-align: middle;
 }

package/dist/collection/components/list-button/list-button.js

@@ -67,7 +67,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '8aceb891a4bf706da844766b7961b7dfd3b78919', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '4cd2f7a1ee81380b8acb67d73adeca684e3d5f57', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '522fd6d9884adafc6bc6ac5e2138b13f6dd331dc', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: 'e7695d1d0eb19fd3d17d37d8cb9d1a7f5247dd7e', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8258f5cd10f264e8a0d3c0a61953ded159705893', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '1827dd58c8465c41cbbbd2b0d0841e285da7f3a0', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '5b9dc1c1da7b592702e68d686c3fb223d228738a', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '0c3f1b903ed1c0d970c2da48056b817d1d5780cb', class: "subcontent" }, h("slot", { key: '65f5024a2f75c7098334379ebfa945494517b709', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '0219ac62a9df180d5708d9b54417ff9d7bda695c', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '603924707f6d09d8c4e4351a0a48aece262280cc' }, h("dso-icon-button", { key: '5c2dd136a96d0016faab48751b783e2961dd8e70', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'ca8666eae32565be519f9b8c8ccaa6e39799a7a6', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '1207e8e0258adcc777f51576c197c2f5e8d98f5e', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '8cbfa76101157d473ca590fae8abb9dc0b21ed4f', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '827c846d4b1f675c8c1cfdb88e74d8e1c6f89a25', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '8d6dd54020dafcb0422299ac5c8a22b3a40940e1', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: 'f4977f991eb94ed7a39c52dc4a1080329f62516c', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'cbbe81498a4fa41bf56562912dfd1970bf8ba7ea', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '253b1cfea57ecfb1c217caa59ec110cd0c727c28', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: 'f9ac1b6becfe6437862ecd53686ddfc1173ee859', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'b46d7fd959d085c6485c79dd50e15d4ad6c21d0c', class: "subcontent" }, h("slot", { key: 'a482b7d5837ccded712c9586fa90a7e47232b768', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'be7eeb3245496ddf7c46a2ad964b94b3f569b2cf', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'afc63a9435f731bb4475be5bcfaea77da68fd80e' }, h("dso-icon-button", { key: '231403e30c4475e11b3615d7a5b9360cf548a8a9', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '18907024014d48c2c421898b009d7675748d5cab', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '08d683773392eb6248a7b4698473321757d90c40', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.js

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '960973e315c312de8867f4fb0c7d10821d73a1a3', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '443ca86b8144c0d1a77f4fbe1312135ad76b1124', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'd351f02282a8206a59c25f1d7e484996d5537c9f', class: "form-group dso-radios" }, h("legend", { key: 'b736d3b6a64da13e71a4e4fd40753ce5c2f9de15', class: "sr-only" }, "Achtergrond"), h("div", { key: '60065fac46d1cc18953e7fd82afa4b538e23158c', class: "dso-label-container" }, h("span", { key: 'a77189ede3009e2077b636219d80de3a41b84f9e', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '85efd3afe696404da277b7616b17d3d9fcb92adf', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '82499cc4e8f841a055b61a3d380f63273159eff6', class: "form-group dso-radios" }, h("legend", { key: 'bee0a0eb7939f1849ff8c7c28f195d6d0ee4eb46', class: "sr-only" }, "Achtergrond"), h("div", { key: '297074406cd7409f220d0675976cd479124ef801', class: "dso-label-container" }, h("span", { key: '3de870d39e90f5b2c893785f148da982635d4dc5', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '474555d74316b62427604b6c4c0f697aa09ab675', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }