npm - @dso-toolkit/core - Versions diffs - 79.0.1 → 80.0.0 - Mend

@dso-toolkit/core 79.0.1 → 80.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (833) hide show

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

@@ -94,13 +94,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: 'dd5243bfde4309df3a2b1fa7d82dc1d3d371c939' }, h("span", { key: 'edde8712f676689acd11d6c1fd750ee6cc6fe678', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: 'cb1e816c5125dd32494e323f8ec4c48ad701cdda' }, h("span", { key: '2967b653516412692e28fd7db19e860a63576147', "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: 'e0bcd48531aa12cf378bbd2f2a1c0f03b6117a0b', name: "symbol" }), h("span", { key: '8cbf91299eb620810d677d6acf13156f4c8e0c84', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: 'd0dba7bf64d2bed153e7ea4ab9a9abc15eb6bd41', name: "symbol" }), h("span", { key: '00ec26450674ef900dd5fd32bd72edbe5ff80111', 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: 'e3201b232979f5168f8a6a19ea812c7a0db10c46' })), this.removable && (h("button", { key: 'c8d58dbf4f2a78109a67d9b1ee1514722039fb49', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '6c94edf3485221fdb28f9e4163eca04db07f954b', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '9a405ae6805cd81bcbe763871238fffb0d02b29c', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '8314165ce9d4dd993a732ef61f11e3998dd815a8', 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: '6cc69332961817bdfa40e691addbf227efb27900' })), this.removable && (h("dso-icon-button", { key: 'ff4ebb1e4ea6dbe05826a6a2c9c7d8779b02b96d', 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: '99377bdeaaaecfe0f71363417bbed46ea9a0af89', 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 CHANGED Viewed

	@@ -1 +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 <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"]}
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({ 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.css CHANGED Viewed

@@ -10,6 +10,18 @@
   box-sizing: border-box;
 }
+::slotted(span[slot=symbol]) {
+  background-color: #fff;
+  display: block;
+  float: inline-start;
+  block-size: 26px;
+  margin-block-start: 0;
+  margin-inline-end: 8px;
+  inline-size: 30px;
+  overflow: hidden;
+  position: relative;
+}
 .legend-item {
   display: flex;
   position: relative;
@@ -17,98 +29,21 @@
 .legend-item.legend-item-symbol + .options {
   margin-block-start: 8px;
 }
+.legend-item dso-icon-button.active {
+  --_dso-icon-button-tertiary-color: #173521;
+}
 .legend-item-right-content {
   margin-inline-start: auto;
-}
-.legend-item-right-content button {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: start;
-  user-select: none;
-  vertical-align: middle;
-}
-.legend-item-right-content button:focus, .legend-item-right-content button:focus-visible {
-  outline-offset: 2px;
-}
-.legend-item-right-content button:active {
-  outline: 0;
-}
-.legend-item-right-content button {
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
-}
-.legend-item-right-content button[disabled] {
-  color: #afcf9d;
-}
-.legend-item-right-content button[disabled].dso-spinner-left, .legend-item-right-content button[disabled].dso-spinner-right {
-  color: #39870c;
-}
-.legend-item-right-content button:not([disabled]):hover {
-  color: #275937;
-  text-decoration: underline;
-  text-underline-position: under;
-}
-.legend-item-right-content button:not([disabled]):active {
-  color: #173521;
-}
-.legend-item-right-content button.dso-align {
-  line-height: calc(1.5em - 1px);
-  padding-block: 11px;
-  padding-inline: 0;
-  position: relative;
-}
-.legend-item-right-content button.dso-truncate {
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.legend-item-right-content button.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.legend-item-right-content button.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.legend-item-right-content button > span {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.legend-item-right-content button {
-  cursor: pointer;
-}
-.legend-item-right-content button.active {
-  color: #173521;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
 }
 .legend-item-right-content dso-slide-toggle {
+  display: flex;
   align-self: center;
+  line-height: 1;
   margin-inline-start: 8px;
   padding-block-start: 0 !important;
 }

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

@@ -31,7 +31,7 @@ export class LegendItem {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: '1d6ebd8e4e44def711159ff010ae953591685edc', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '868a7ed26078613600d7d17b924d9ea7a53ac2e0', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'f3aff3d785c632eb19a7c3a8ccb13e94806cf540' }, h("slot", { key: 'd06beb41e33003d99c9af7b7b5489dcb66d95444', name: "symbol" }))), h("div", { key: '62899aa2b2af8fb2d63d05930a9f037b88e86163' }, h("slot", { key: 'cc600cec4847cc747971829a9bec5e1abf05026e' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '0cce99e34253be6c1474a632fd99e1d010a6b991', position: "bottom" }, this.disabledMessage)), h("div", { key: 'e059795274ad6f453a67ea387d9a625664741e16', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("button", { key: '4912cff1ef7d48aeb7e552e0c99b72ecf174d9f0', id: "edit-button", type: "button", onClick: () => (this.showOptions = !this.showOptions), class: { active: this.showOptions } }, h("span", { key: '638b176ba12e1301acbc320eb12c47258706607d', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'aa285d1922ce4dd2b9f8b14f73b4c81a4fe8d1ff', icon: "more" }))), this.activatable && (h("dso-slide-toggle", { key: '87c752671a44f9edb700a18127248394b28ce5e3', 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: 'af0b47ff57eb123ba06d0ff8836421f6c02d429b', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'b6b4e60ccaaa06a849be5f73fd2f2636a023a34e', name: "options" })))));
+        return (h(Host, { key: '686703aa9893d05bed991defe241b259747c01a5', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '6c1ea3ddd9a2d3678323fc571a673fe00ed6c307', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '0a6e7b22de4d82f59c877b2e47a20ddf1cb547a3' }, h("slot", { key: 'a35d4e4d1129cc8e69d609982d39c45daa7d9f3e', name: "symbol" }))), h("div", { key: 'ffe44f94e8761e47c44ca611afea85e212749350' }, h("slot", { key: '65a655bf0b26901685ba661dc9e278ed53a5a534' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '4b94a3c1eb05758f7f17d791469684c129b6ea5e', position: "bottom" }, this.disabledMessage)), h("div", { key: 'ca5d84a936861021edb7ceb44f97323188fcb12b', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: '55d91fc16aabc6f4627a756c13463e06339d7e0e', 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: '6c46588131c000ef44120398e03b0be9a74ab42c', 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: '7b89eef1efd4988d41026296591ed6cc174272a2', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '11571117ac48a224af9b9bd96df6a21ca2a29335', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend-item/legend-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IALvB;QASE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAuCjB,gBAAW,GAAG,KAAK,CAAC;~~KA2ErB~~;~~IAvEC~~,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAClF,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED,IAAI,qBAAqB;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QACrD,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,KAAK,IAAI,CAAC;QAEvD,OAAO,CACL,EAAC,IAAI,qDAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;YAChG,4DAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC;gBACjE,SAAS,IAAI,CACZ;oBACE,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP;gBACD;oBACE,8DAAQ,CACJ;gBACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,CACxC,sEAAe,QAAQ,EAAC,QAAQ,IAAE,IAAI,CAAC,eAAe,CAAiB,CACxE;gBAED,4DAAK,KAAK,EAAC,2BAA2B;oBACnC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B~~,+DACE~~,~~EAAE~~,EAAC,~~aAAa~~,~~EAChB~~,IAAI,EAAC,~~QAAQ~~,~~EACb~~,OAAO,~~EAAE~~,~~GAAG~~,EAAE,~~CAAC~~,~~CAAC~~,IAAI,CAAC,WAAW,~~GAAG~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~WAAW~~,~~CAAC~~,~~EACrD~~,~~KAAK,~~EAAE,EAAE,~~MAAM~~,~~EAAE~~,IAAI,CAAC,WAAW,~~EAAE;wBAEnC~~,~~6DAAM~~,~~KAAK,EAAC,SAAS,6BAA8B;wBACnD,iEAAU,~~IAAI,~~EAAC~~,~~MAAM~~,~~GAAG~~,~~CACjB~~,~~CACV~~;oBACA,IAAI,CAAC,WAAW,IAAI,CACnB,yEACE,eAAe,EAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE,CACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAEpG,CACH,CACG,CACF;YACL,UAAU,IAAI,CACb,4DAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,SAAS;gBAC9D,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n /\r\n@Component({\r\n tag: \"dso-legend-item\",\r\n styleUrl: \"legend-item.scss\",\r\n shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoLegendItemElement;\r\n\r\n /\r\n To disable the Legend Item\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Message to be shown behind a toggletip when the Legend Item is disabled\r\n /\r\n @Prop()\r\n disabledMessage?: string;\r\n\r\n /\r\n Controls whether this Legend Item can be active or not\r\n /\r\n @Prop({ reflect: true })\r\n activatable?: boolean;\r\n\r\n /\r\n Controls whether this Legend Item is active or not\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n /\r\n Emitted when the mouse enters the Legend Item\r\n /\r\n @Event()\r\n dsoMouseEnter!: EventEmitter;\r\n\r\n /\r\n Emitted when the mouse leaves the Legend Item\r\n */\r\n @Event()\r\n dsoMouseLeave!: EventEmitter;\r\n\r\n @State()\r\n showOptions = false;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get optionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='options']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n {hasSymbol && (\r\n <div>\r\n <slot name=\"symbol\" />\r\n </div>\r\n )}\r\n <div>\r\n <slot />\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n\r\n <div class=\"legend-item-right-content\">\r\n {hasOptions && !this.disabled && (\r\n <button\r\n id=\"~~edit-button~~\"\r\n ~~type~~=\"~~button~~\"\r\n ~~onClick={() => (this.showOptions = !this.showOptions)}~~\r\n class={{ active: this.showOptions }}\r\n ~~>\r\n~~ ~~<span class~~=\"sr-~~only~~\"~~>Legenda item aanpassen</span>\~~r\n ~~<dso-icon~~ ~~icon=\"more~~\~~" />\~~r\n ~~</button>\~~r\n )}\r\n {this.activatable && (\r\n <dso-slide-toggle\r\n accessibleLabel=\"Maak actief\"\r\n checked={this.active}\r\n disabled={this.disabled}\r\n onDsoActiveChange={(e) =>\r\n this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n }\r\n />\r\n )}\r\n </div>\r\n </div>\r\n {hasOptions && (\r\n <div hidden={this.disabled \|\| !this.showOptions} class=\"options\">\r\n <slot name=\"options\" />\r\n </div>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IALvB;QASE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAuCjB,gBAAW,GAAG,KAAK,CAAC;KA0ErB;IAtEC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAClF,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED,IAAI,qBAAqB;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QACrD,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,KAAK,IAAI,CAAC;QAEvD,OAAO,CACL,EAAC,IAAI,qDAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;YAChG,4DAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC;gBACjE,SAAS,IAAI,CACZ;oBACE,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP;gBACD;oBACE,8DAAQ,CACJ;gBACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,CACxC,sEAAe,QAAQ,EAAC,QAAQ,IAAE,IAAI,CAAC,eAAe,CAAiB,CACxE;gBAED,4DAAK,KAAK,EAAC,2BAA2B;oBACnC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B,wEACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,EACnC,EAAE,EAAC,aAAa,EAChB,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,GACxD,CACH;oBACA,IAAI,CAAC,WAAW,IAAI,CACnB,yEACE,eAAe,EAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE,CACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAEpG,CACH,CACG,CACF;YACL,UAAU,IAAI,CACb,4DAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,SAAS;gBAC9D,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n /\r\n@Component({\r\n tag: \"dso-legend-item\",\r\n styleUrl: \"legend-item.scss\",\r\n shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoLegendItemElement;\r\n\r\n /\r\n To disable the Legend Item\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Message to be shown behind a toggletip when the Legend Item is disabled\r\n /\r\n @Prop()\r\n disabledMessage?: string;\r\n\r\n /\r\n Controls whether this Legend Item can be active or not\r\n /\r\n @Prop({ reflect: true })\r\n activatable?: boolean;\r\n\r\n /\r\n Controls whether this Legend Item is active or not\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n /\r\n Emitted when the mouse enters the Legend Item\r\n /\r\n @Event()\r\n dsoMouseEnter!: EventEmitter;\r\n\r\n /\r\n Emitted when the mouse leaves the Legend Item\r\n */\r\n @Event()\r\n dsoMouseLeave!: EventEmitter;\r\n\r\n @State()\r\n showOptions = false;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get optionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='options']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n {hasSymbol && (\r\n <div>\r\n <slot name=\"symbol\" />\r\n </div>\r\n )}\r\n <div>\r\n <slot />\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n\r\n <div class=\"legend-item-right-content\">\r\n {hasOptions && !this.disabled && (\r\n <dso-icon-button\r\n label=\"Opties\"\r\n icon=\"more\"\r\n variant=\"tertiary\"\r\n class={{ active: this.showOptions }}\r\n id=\"edit-button\"\r\n onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n />\r\n )}\r\n {this.activatable && (\r\n <dso-slide-toggle\r\n accessibleLabel=\"Maak actief\"\r\n checked={this.active}\r\n disabled={this.disabled}\r\n onDsoActiveChange={(e) =>\r\n this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n }\r\n />\r\n )}\r\n </div>\r\n </div>\r\n {hasOptions && (\r\n <div hidden={this.disabled \|\| !this.showOptions} class=\"options\">\r\n <slot name=\"options\" />\r\n </div>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -67,7 +67,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '0b37e11b902caa51517815e5e6611d9a487c02d4', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'df0de94d57ad3c1420421867cb2fa185caa03f4b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '579bf88e96f44505bd5b7b70e15f332416a39ec3', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '7aba20871104e042986a071ad2a82aef9b0bc26b', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '772c09a4fe393b10ff3d1996e307557f3c301b37', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '64715a207f0fcedb22c9b777249b56cdf9e1528e', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '7ea31d7e3b7276ad0dda4ee09738929d2a3df418', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '302368b9c0914043d4d3a629427a2102ebc1e0bb', class: "subcontent" }, h("slot", { key: 'cd32b056e94a40ae2eeffac0fe6d213eaa88b6ae', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'd20d5a677a0a2a984cf9e4a96f8f1598a1b35020', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: 'e659f2d94e8111cbc0a63d752b319c99864ef4b8', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '897a934abd9c2911121718c9e0009d52d4adca48', icon: "minus-circle" }), h("span", { key: '8c1ec9ed11bbc94b67e1e230c7e02e9420fd96ad', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '1a22c11173c7bc113a10e0c1f9b4e7122dfe8d20', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: 'bf56c331d501c94eb5c7f961fbd60226778c7edc', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'f4f812d0a1041ebb3dcc45e624e5d568248b414e', icon: "plus-circle" }), h("span", { key: '57962f76c796ae1d63406a701dd5a873697cc022', class: "sr-only" }, "Aantal verhogen"))))));
+        return (h("div", { key: '0b37e11b902caa51517815e5e6611d9a487c02d4', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'df0de94d57ad3c1420421867cb2fa185caa03f4b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '579bf88e96f44505bd5b7b70e15f332416a39ec3', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '7aba20871104e042986a071ad2a82aef9b0bc26b', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '772c09a4fe393b10ff3d1996e307557f3c301b37', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '64715a207f0fcedb22c9b777249b56cdf9e1528e', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '7ea31d7e3b7276ad0dda4ee09738929d2a3df418', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '302368b9c0914043d4d3a629427a2102ebc1e0bb', class: "subcontent" }, h("slot", { key: 'cd32b056e94a40ae2eeffac0fe6d213eaa88b6ae', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'd20d5a677a0a2a984cf9e4a96f8f1598a1b35020', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '1d41e3942d6639d3d4164edcb9058e338ec38512' }, h("dso-icon-button", { key: '8612c6101f03760764300de0e5cf89981d0ab70b', 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: 'cf36ad0a3ca59cfacc07da1253d88d6a3ececff4', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: 'be29f17f6b1d759a985f592e6c135d3d4346cdc3', 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/list-button/list-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list-button.js","sourceRoot":"","sources":["../../../../src/components/list-button/list-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,OAAO,UAAU;IALvB;QA6CE;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;KAiJlB;IA7LC,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAc,qBAAqB,CAAC,CAAC;IACrE,CAAC;IAgED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,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;IACL,CAAC;IAED,kBAAkB;;QAChB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,YAAY,CAAC,aAAa,CAAC,CAAA,EAAE,CAAC;YACtD,MAAA,IAAI,CAAC,cAAc,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAEO,SAAS,CAAC,CAAQ,EAAE,SAAoC;QAC9D,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YACnC,MAAM,QAAQ,GAAG,SAAS,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;YAE7E,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACpC,OAAO;YACT,CAAC;YAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,aAAa,EAAE,CAAC;gBAChB,KAAK,EAAE,QAAQ;aAChB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,aAAa,EAAE,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aAC9B,CAAC,CAAC;YAEH,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;IACL,CAAC;IAEO,eAAe,CAAC,QAAgB;QACtC,OAAO,CAAC,CACN,IAAI,CAAC,GAAG,KAAK,SAAS;YACtB,IAAI,CAAC,GAAG,KAAK,SAAS;YACtB,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAC7D,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAE9E,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,CAAC,kBAAkB,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YACvE,4DACE,KAAK,EAAE,IAAI,CAAC,CAAC,iBAAiB,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC,CAAC,EACpG,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;gBAEzC,uEAAgB,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvG,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,SAAS;;wBAAG,IAAI,CAAC,QAAQ,CAAQ;oBAC9D,IAAI,CAAC,cAAc,IAAI,CACtB,6DAAM,KAAK,EAAC,SAAS;wBAClB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,GAAG,GAAG;wBAAE,GAAG;wBAC1D,6DAAM,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,SAAS,GAAS,CAClD,CACR,CACc;gBAChB,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAQ;gBAClE,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,YAAY;oBACrB,6DAAM,IAAI,EAAC,YAAY,GAAG,CACtB,CACP,CACG;YAEL,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAC7C,4DAAK,KAAK,EAAC,kBAAkB;gBAC1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CACjB;oBACE,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,EAC1D,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC;wBAE9C,iEAAU,IAAI,EAAC,cAAc,GAAY;wBACzC,6DAAM,KAAK,EAAC,SAAS,sBAAuB,CACrC;oBACT,6DAAM,KAAK,EAAC,wBAAwB,gBAAY,QAAQ,eAAW,QAAQ,IACxE,IAAI,CAAC,KAAK,CACN,CACN,CACJ;gBAED,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,EAC1D,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC;oBAE9C,iEAAU,IAAI,EAAC,aAAa,GAAY;oBACxC,6DAAM,KAAK,EAAC,SAAS,sBAAuB,CACrC,CACL,CACP,CACG,CACP,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 Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\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\r\n componentDidRender(): void {\r\n if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <dso-selectable type=\"checkbox\" value=\"list-button\" name=\"naam\" checked={selected} disabled={this.disabled}>\r\n {this.label}\r\n {this.sublabel && <span class=\"sr-only\"> {this.sublabel}</span>}\r\n {this.subcontentSlot && (\r\n <span class=\"sr-only\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}{\" \"}\r\n <span innerHTML={this.subcontentSlot.innerHTML}></span>\r\n </span>\r\n )}\r\n </dso-selectable>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n {this.subcontentSlot && (\r\n <div class=\"subcontent\">\r\n <slot name=\"subcontent\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.count > 1 && (\r\n <>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </>\r\n )}\r\n\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"list-button.js","sourceRoot":"","sources":["../../../../src/components/list-button/list-button.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 Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\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\r\n componentDidRender(): void {\r\n if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <dso-selectable type=\"checkbox\" value=\"list-button\" name=\"naam\" checked={selected} disabled={this.disabled}>\r\n {this.label}\r\n {this.sublabel && <span class=\"sr-only\"> {this.sublabel}</span>}\r\n {this.subcontentSlot && (\r\n <span class=\"sr-only\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}{\" \"}\r\n <span innerHTML={this.subcontentSlot.innerHTML}></span>\r\n </span>\r\n )}\r\n </dso-selectable>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n {this.subcontentSlot && (\r\n <div class=\"subcontent\">\r\n <slot name=\"subcontent\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.count > 1 && (\r\n <Fragment>\r\n <dso-icon-button\r\n label=\"Aantal verlagen\"\r\n variant=\"tertiary\"\r\n icon=\"minus-circle\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onDsoClick={(e) => this.stepValue(e, \"decrement\")}\r\n />\r\n <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </Fragment>\r\n )}\r\n\r\n <dso-icon-button\r\n label=\"Aantal verhogen\"\r\n variant=\"tertiary\"\r\n icon=\"plus-circle\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onDsoClick={(e) => this.stepValue(e, \"increment\")}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -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: '25eec1d7172269ce1acc285de6ec98c187825fa1', 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: '54ea3fca79e32f2b8787bfd5e0e0d0b2176975ee', 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 CHANGED Viewed

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'f905ab8e7758f4ee8eadd3687fc18445770bf611', class: "form-group dso-radios" }, h("legend", { key: 'd498d24d45289126c215c7efb691d0ea540f309a', class: "sr-only" }, "Achtergrond"), h("div", { key: '77a480daed34c328881671403de969757f35c4c8', class: "dso-label-container" }, h("span", { key: '00d32dd55f7061bb15c4fb03f2e7e8381068aa61', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '6793671b625b99be9dfc32d07c64947f41e0f046', 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: '85f4a5b0520f18664c2c01c0a5b8907abd7ce07c', class: "form-group dso-radios" }, h("legend", { key: 'd53cbcc42cd945d8c9769298c4250d541ee55763', class: "sr-only" }, "Achtergrond"), h("div", { key: '59a456cab1c6786585399b4db7717d884025d9df', class: "dso-label-container" }, h("span", { key: 'a45a10ca3a86ad419488650205cedf1052060d59', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '011987a3dc616822b734f09e68b18f46b7310e2f', 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"; }

package/dist/collection/components/map-controls/map-controls.css CHANGED Viewed

@@ -125,6 +125,43 @@ label.dso-primary.dso-small.dso-spinner-right::after {
   block-size: 16px;
   inline-size: 16px;
 }
+a.dso-primary.dso-extra-small,
+button.dso-primary.dso-extra-small,
+label.dso-primary.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-primary.dso-extra-small dso-icon,
+a.dso-primary.dso-extra-small svg.di, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,
+button.dso-primary.dso-extra-small dso-icon,
+button.dso-primary.dso-extra-small svg.di,
+button.dso-primary.dso-extra-small.extern::after,
+button.dso-primary.dso-extra-small.download::after,
+button.dso-primary.dso-extra-small.dso-spinner::before,
+label.dso-primary.dso-extra-small dso-icon,
+label.dso-primary.dso-extra-small svg.di,
+label.dso-primary.dso-extra-small.extern::after,
+label.dso-primary.dso-extra-small.download::after,
+label.dso-primary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-primary.dso-extra-small.dso-spinner-left::before,
+button.dso-primary.dso-extra-small.dso-spinner-left::before,
+label.dso-primary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-primary.dso-extra-small.dso-spinner-right::after,
+button.dso-primary.dso-extra-small.dso-spinner-right::after,
+label.dso-primary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-primary.dso-extra-small,
+button.dso-primary.dso-extra-small,
+label.dso-primary.dso-extra-small {
+  padding-block: 9px;
+}
 a.dso-primary dso-icon:has(+ span:not(.sr-only)),
 a.dso-primary svg.di:has(+ span:not(.sr-only)),
 button.dso-primary dso-icon:has(+ span:not(.sr-only)),
@@ -308,6 +345,43 @@ label.dso-secondary.dso-small.dso-spinner-right::after {
   block-size: 16px;
   inline-size: 16px;
 }
+a.dso-secondary.dso-extra-small,
+button.dso-secondary.dso-extra-small,
+label.dso-secondary.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-secondary.dso-extra-small dso-icon,
+a.dso-secondary.dso-extra-small svg.di, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,
+button.dso-secondary.dso-extra-small dso-icon,
+button.dso-secondary.dso-extra-small svg.di,
+button.dso-secondary.dso-extra-small.extern::after,
+button.dso-secondary.dso-extra-small.download::after,
+button.dso-secondary.dso-extra-small.dso-spinner::before,
+label.dso-secondary.dso-extra-small dso-icon,
+label.dso-secondary.dso-extra-small svg.di,
+label.dso-secondary.dso-extra-small.extern::after,
+label.dso-secondary.dso-extra-small.download::after,
+label.dso-secondary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-secondary.dso-extra-small.dso-spinner-left::before,
+button.dso-secondary.dso-extra-small.dso-spinner-left::before,
+label.dso-secondary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-secondary.dso-extra-small.dso-spinner-right::after,
+button.dso-secondary.dso-extra-small.dso-spinner-right::after,
+label.dso-secondary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-secondary.dso-extra-small,
+button.dso-secondary.dso-extra-small,
+label.dso-secondary.dso-extra-small {
+  padding-block: 9px;
+}
 a.dso-secondary dso-icon:has(+ span:not(.sr-only)),
 a.dso-secondary svg.di:has(+ span:not(.sr-only)),
 button.dso-secondary dso-icon:has(+ span:not(.sr-only)),
@@ -760,6 +834,43 @@ label.dso-map.dso-small.dso-spinner-right::after {
   block-size: 16px;
   inline-size: 16px;
 }
+a.dso-map.dso-extra-small,
+button.dso-map.dso-extra-small,
+label.dso-map.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-map.dso-extra-small dso-icon,
+a.dso-map.dso-extra-small svg.di, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,
+button.dso-map.dso-extra-small dso-icon,
+button.dso-map.dso-extra-small svg.di,
+button.dso-map.dso-extra-small.extern::after,
+button.dso-map.dso-extra-small.download::after,
+button.dso-map.dso-extra-small.dso-spinner::before,
+label.dso-map.dso-extra-small dso-icon,
+label.dso-map.dso-extra-small svg.di,
+label.dso-map.dso-extra-small.extern::after,
+label.dso-map.dso-extra-small.download::after,
+label.dso-map.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-map.dso-extra-small.dso-spinner-left::before,
+button.dso-map.dso-extra-small.dso-spinner-left::before,
+label.dso-map.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map.dso-extra-small.dso-spinner-right::after,
+button.dso-map.dso-extra-small.dso-spinner-right::after,
+label.dso-map.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map.dso-extra-small,
+button.dso-map.dso-extra-small,
+label.dso-map.dso-extra-small {
+  padding-block: 9px;
+}
 a.dso-map dso-icon:has(+ span:not(.sr-only)),
 a.dso-map svg.di:has(+ span:not(.sr-only)),
 button.dso-map dso-icon:has(+ span:not(.sr-only)),

package/dist/collection/components/map-controls/map-controls.js CHANGED Viewed

@@ -58,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '2579f5114519e663c05fcd5dfc129dcbba7f905c', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '42ff3395344805ab9f095e73eb960ff53488405a', icon: "layers" }), h("span", { key: 'afd9ef890339303ae6b8c3c6e679aba56facf3fc' }, this.text("layersButton"))), h("dso-button-group", { key: '4cbbfd4afd6fa6b813690beb3e553b0111a85e7f', class: "zoom-buttons", direction: "column" }, h("button", { key: 'c912c8dfa54d45dea45fd2faf0d0119114c571c3', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '53c11c5637ee275d4b691078ee41b27799718480', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: '3857a89f32a68eed54f979050b4ebb7c95f93c85', icon: "plus" })), h("button", { key: 'f89fd988c37987d8dfdd963e1021e37f5d1aa93b', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '65a714499e40de87347aa3d299690a93dfed4a45', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: '01dca383ce118b67b7e9c96e9401d4c217173e58', icon: "minus" }))), h("section", { key: 'a33f2a62e746104008817b4c5ba618de5deef971', hidden: this.hideContent }, h("header", { key: '26014b4d7c25b3db074a839d500da55c3a1ca256' }, h("h2", { key: '62fdfe99b29e3d3351ca96e339fed7b4432371d6' }, this.text("title")), h("button", { key: '31d2ee7a7100b3aacabd16fea867a950981bed37', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '020935e73272301ff7b064d25e6bc2797bf801dc', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '19b004f2b51a3085f238269e5f1ac30fe2f9de04', icon: "times" }))), h("dso-scrollable", { key: '1883f9fdf09a8e7bc4f91398ecceb465885a91e8' }, h("div", { key: 'e732d6bbd7fdc95df2242657253d5d0ec820567d', class: "content" }, h("slot", { key: '052e8d0e63d75150f83bbbaca0951f2fed47f0d4' }))))));
+        return (h(Fragment, { key: '38d8f9a49054469b539d54e35f3f60af57cc3b9e' }, h("button", { key: '44c9e6486a2bff8ba61aa901a70afa602893b302', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '06b1a7d39246e8e6136c856bcca0e0320f3ee7d6', icon: "layers" }), h("span", { key: '9fd57b3947f481215d66724b5de4ba7836e919ee' }, this.text("layersButton"))), h("dso-button-group", { key: 'a6ade4edc389da3c2df9ec0bb58ae215c2dd9f99', class: "zoom-buttons", direction: "column" }, h("button", { key: '7a6672e4d172624e8223c38b242ccee9b6089dab', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'b3651b86a194adc18f070b4bc9b67e888ce96d86', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: '7e49e460481ee133cdb4ee04a4023cc836038f9e', icon: "plus" })), h("button", { key: '71d8e75f0284e937c3e9bd1128a05171f057f9fd', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '10d8b03a6a11664fc57524946e7a8ccb3eff8689', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'bd319a269f38e8b70f427f07c3e1e217f63ea67e', icon: "minus" }))), h("section", { key: '53ef69eade83dbcfd066e6eb8212a9fba7996235', hidden: this.hideContent }, h("header", { key: '3306243d25cbdcceb2447686fc6990fd52a0cd88' }, h("h2", { key: '011724da35c952a1692fa92c13eb53667d5d168c' }, this.text("title")), h("button", { key: 'c533664b366c279051146f8c336558edc676697a', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'a1d159a70d3c3a95d428faffac25647e1d68adc7', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'e706aef45a49a552615fa80a56c484dbb950be03', icon: "times" }))), h("dso-scrollable", { key: 'f678ba1fee4d3825cad69841842480ddb5364f1a' }, h("div", { key: '672d0f8b67bb05f9b65fe6a9b90667e25e6c43a3', class: "content" }, h("slot", { key: '2df21b2d2d1431f0f3d447b337536558dc4d6313' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-controls/map-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,+EAA+E;AAC/E,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAO/B,MAAM,OAAO,WAAW;IALxB;QASE;;WAEG;QAEH,SAAI,GAAG,KAAK,CAAC;QAkCb,gBAAW,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAiCjB,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAEnD,kDAAmD;QACnD,mDAAoD;KAyDrD;IA1FC,SAAS,CAAC,IAAa;QACrB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,UAAU,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;QAC1E,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,GAAG,EAAE;;gBACd,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;YACrC,CAAC,EAAE,kBAAkB,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,KAAK,CAAC,gBAAgB,CAAC,CAA6B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAOD,MAAM;QACJ,OAAO,CACL;~~YACE~~,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC;gBAEvD,iEAAU,IAAI,EAAC,QAAQ,GAAY;gBACnC,+DAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAQ,CACjC;YACT,yEAAkB,KAAK,EAAC,cAAc,EAAC,SAAS,EAAC,QAAQ;gBACvD,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM;oBAElE,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAQ;oBAClD,iEAAU,IAAI,EAAC,MAAM,GAAY,CAC1B;gBACT,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM;oBAEnE,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAQ;oBACnD,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACQ;YACnB,gEAAS,MAAM,EAAE,IAAI,CAAC,WAAW;gBAC/B;oBACE,6DAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAM;oBAC7B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC;wBAEtD,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAQ;wBACpF,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF;gBACT;oBACE,4DAAK,KAAK,EAAC,SAAS;wBAClB,8DAAa,CACT,CACS,CACT,~~CACT~~,~~CACJ~~,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 Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoMapControlsElement;\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n ~~<>\~~r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"dso-map toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>{this.text(\"layersButton\")}</span>\r\n </button>\r\n <dso-button-group class=\"zoom-buttons\" direction=\"column\">\r\n <button\r\n type=\"button\"\r\n class=\"dso-map\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span class=\"sr-only\">{this.text(\"zoomIn\")}</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"dso-map\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span class=\"sr-only\">{this.text(\"zoomOut\")}</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </dso-button-group>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.text(\"title\")}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span class=\"sr-only\">{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n ~~</>\~~r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,+EAA+E;AAC/E,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAO/B,MAAM,OAAO,WAAW;IALxB;QASE;;WAEG;QAEH,SAAI,GAAG,KAAK,CAAC;QAkCb,gBAAW,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAiCjB,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAEnD,kDAAmD;QACnD,mDAAoD;KAyDrD;IA1FC,SAAS,CAAC,IAAa;QACrB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,UAAU,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;QAC1E,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,GAAG,EAAE;;gBACd,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;YACrC,CAAC,EAAE,kBAAkB,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,KAAK,CAAC,gBAAgB,CAAC,CAA6B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ;YACP,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC;gBAEvD,iEAAU,IAAI,EAAC,QAAQ,GAAY;gBACnC,+DAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAQ,CACjC;YACT,yEAAkB,KAAK,EAAC,cAAc,EAAC,SAAS,EAAC,QAAQ;gBACvD,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM;oBAElE,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAQ;oBAClD,iEAAU,IAAI,EAAC,MAAM,GAAY,CAC1B;gBACT,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM;oBAEnE,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAQ;oBACnD,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACQ;YACnB,gEAAS,MAAM,EAAE,IAAI,CAAC,WAAW;gBAC/B;oBACE,6DAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAM;oBAC7B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC;wBAEtD,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAQ;wBACpF,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF;gBACT;oBACE,4DAAK,KAAK,EAAC,SAAS;wBAClB,8DAAa,CACT,CACS,CACT,CACD,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 Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoMapControlsElement;\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"dso-map toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>{this.text(\"layersButton\")}</span>\r\n </button>\r\n <dso-button-group class=\"zoom-buttons\" direction=\"column\">\r\n <button\r\n type=\"button\"\r\n class=\"dso-map\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span class=\"sr-only\">{this.text(\"zoomIn\")}</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"dso-map\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span class=\"sr-only\">{this.text(\"zoomOut\")}</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </dso-button-group>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.text(\"title\")}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span class=\"sr-only\">{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/map-overlays/map-overlays.js CHANGED Viewed

@@ -28,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '44cfe19384688ab3cd0c0985f5cf6d64c2ece758', class: "form-group dso-checkboxes" }, h("legend", { key: '4f0d0a8da0ae6f595c5121590f8e344a5bd74ff3', class: "sr-only" }, "Kaartlagen"), h("div", { key: '6810430385441404bce4414809beca83398dde46', class: "dso-label-container" }, h("span", { key: 'f9a29340b209718e53c6f00f03c89b873890df70', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'cc6ef66e93a99fd2bf9508145f30cca3ac25cf23', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '70e2ba3ddd988e843d29f1fe64cd71849b783b86', class: "form-group dso-checkboxes" }, h("legend", { key: 'fd0d17528650e4b3c395438316f24c5ad8bef74a', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'af2f6795455d3bc159778e02411f66a59eacef9e', class: "dso-label-container" }, h("span", { key: '4ab7b2b62dd2bc24441b0a1f723d160c1b6bb63c', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '7dfa0cabfbbca09874a23fdf71a6b1a20d09f50d', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }