npm - @dso-toolkit/core - Versions diffs - 73.0.1 → 73.2.0 - Mend

@dso-toolkit/core 73.0.1 → 73.2.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 (821) hide show

package/dist/cjs/dso-label_3.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index$1 = require('./index-DvrTSHdI.js');
+var index$1 = require('./index-Bfuot2fD.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var index = require('./index-D8QM7CRO.js');
 var v4 = require('./v4-Br3XC_0C.js');
@@ -103,13 +103,13 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: '8fd30b6ad557f1d54be48b339e682b148b44e2ba' }, index$1.h("span", { key: '0bdb791180337871d18c42341c16fa897ca8922c', "aria-describedby": "toggle-anchor", class: clsx.clsx("dso-label", {
+        return (index$1.h(index$1.Fragment, { key: 'd89597ffc51b15962f552c29f36f521bdaf39c50' }, index$1.h("span", { key: 'f1e469e66f240054f1dfde27fdc8b8ab2420ff66', "aria-describedby": "toggle-anchor", class: clsx.clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, index$1.h("slot", { key: '3b42de72a93e7c0b3aee68935d7ed3aabfb0dd06', name: "symbol" }), index$1.h("span", { key: '107445074a029cdf794553429e05f2db498371ae', class: clsx.clsx("dso-label-content", {
+            }) }, index$1.h("slot", { key: '45f7379dff3dc6b90427bc6c16cae56f20c361bd', name: "symbol" }), index$1.h("span", { key: '881082872c27e2ded34841d16789e14a406769fc', class: clsx.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) }, index$1.h("slot", { key: '8b5f26d80ca6b93fc2a18679526f9ca5c4539415' })), this.removable && (index$1.h("button", { key: '31a358d27b50ffa19a40fd13e5b4962a97b20267', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index$1.h("span", { key: '825778552459fa71dc1dd1bfba8788ad33f82faa', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: 'a414a63d43c18e66355dd87eab556251490bff9e', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: 'd9bba58c8c88b5e4c33fecdbfd1f17a2db122cdc', 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) }, index$1.h("slot", { key: 'd39c1578c6da70686cd0f29bc1c11ea3fabce7b1' })), this.removable && (index$1.h("button", { key: '54c612faadd4f9c6c857d7a615f9272bd27b54d0', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index$1.h("span", { key: 'c0c9ba47faa4fe975a44082d137737d556c78634', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: '6120cb63ec101cccb6e36349576866cd5f8a5672', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: 'ae3d3d54388e85890b9a536557f27a084175ac6d', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -207,7 +207,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index$1.h(index$1.Fragment, null, index$1.h("button", Object.assign({ key: 'e475cae552eba25e291ff9f54c823c488c16913a', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: 'c635252b0cadd064f45ee5e9ce30b9be66b7ba6e', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '09e9fe08d79adf636fef5fed3962315bc3453637', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '7e8a00179728cd789cb758b2270446074783c1e9', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '68dfb69746a42329c66536715a27d698a294cd77', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '1c478c6f626c7fb6698fae764c9934a9c05e1bbf', htmlFor: this.identifier }, index$1.h("slot", { key: '22c1f7ae12086ba13589cb1621e0b435ecc4b42a' })))));
+        return (index$1.h(index$1.Fragment, null, index$1.h("button", Object.assign({ key: 'b7dc0110eb83aa234b1d2b225ca8e4a3bfec426c', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: '8dfb32aa94195a577fbd960c33dfd8d23afa2921', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: 'b291fd2d918322729a1564a9d856ed66cb4465ad', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: 'c51051570b80c247f4ff049ebcc7addd38a5f669', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '12e0f02816079d4ca1f9953f96ac6ae844f7d05a', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '56f7be1b63e0aed9b1048b2a6c8b21b1ab9360d8', htmlFor: this.identifier }, index$1.h("slot", { key: '4c6a01b02ca3b63959e91d6a5d94ce2983c51a2c' })))));
     }
     get host() { return index$1.getElement(this); }
 };

package/dist/cjs/dso-label_3.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-label.dso-renvooi.dso-slide-toggle.entry.cjs.js","mappings":"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","names":["debounce","h","Fragment","clsx","v4"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\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 Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\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=\"toggle-anchor\"\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","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n text: string;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, ref: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n if (!mark) {\r\n return <>{text}</>;\r\n }\r\n\r\n const result = mark(text);\r\n\r\n if (!result) {\r\n return <>{text}</>;\r\n }\r\n\r\n return (\r\n <>\r\n {result.map((renvooiText) => {\r\n if (typeof renvooiText === \"string\") {\r\n return <>{renvooiText}</>;\r\n }\r\n\r\n return (\r\n <mark\r\n class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n >\r\n {renvooiText.text}\r\n </mark>\r\n );\r\n })}\r\n </>\r\n );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\n\r\ninterface RenvooiRenderProps {\r\n value: RenvooiValue;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n if (typeof value === \"string\" \|\| !value) {\r\n // This element is used for --_dso-renvooi-text-decoration\r\n return (\r\n <span class=\"text\">\r\n <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </span>\r\n );\r\n }\r\n\r\n if (\"toegevoegd\" in value) {\r\n return (\r\n <ins>\r\n <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n );\r\n }\r\n\r\n if (\"verwijderd\" in value) {\r\n return (\r\n <del>\r\n <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n <del>\r\n <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n <ins>\r\n <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n </>\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Fragment, Prop, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\n\r\n/\r\n Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n /\r\n@Component({\r\n tag: \"dso-renvooi\",\r\n styleUrl: \"renvooi.scss\",\r\n shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n /\r\n The renvooi value to render.\r\n /\r\n @Prop()\r\n value?: RenvooiValue \| RenvooiValue[];\r\n\r\n /\r\n To mark text.\r\n /\r\n @Prop()\r\n mark?: RenvooiMarkFunction;\r\n\r\n /\r\n Emitted when a marked item is highlighted.\r\n /\r\n @Event({ bubbles: false })\r\n dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n get values(): RenvooiValue[] {\r\n if (!this.value) {\r\n return [];\r\n }\r\n\r\n return Array.isArray(this.value) ? this.value : [this.value];\r\n }\r\n\r\n private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.values.map((v) => (\r\n <RenvooiRender\r\n value={v}\r\n mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n onMarkItemHighlight={this.handleMarkItemHighlight}\r\n />\r\n ))}\r\n </>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n display: inline-block;\r\n padding-block-start: (typography.$line-height-base typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Prop, EventEmitter, Element, State, Fragment } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n scoped: true,\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /*\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-label.dso-renvooi.dso-slide-toggle.entry.cjs.js","mappings":"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","names":["debounce","h","Fragment","clsx","v4"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","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=\"toggle-anchor\"\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","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n text: string;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, ref: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n if (!mark) {\r\n return <>{text}</>;\r\n }\r\n\r\n const result = mark(text);\r\n\r\n if (!result) {\r\n return <>{text}</>;\r\n }\r\n\r\n return (\r\n <>\r\n {result.map((renvooiText) => {\r\n if (typeof renvooiText === \"string\") {\r\n return <>{renvooiText}</>;\r\n }\r\n\r\n return (\r\n <mark\r\n class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n >\r\n {renvooiText.text}\r\n </mark>\r\n );\r\n })}\r\n </>\r\n );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n value: RenvooiValue;\r\n mark: RenvooiRenderMarkFunction \| undefined;\r\n onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void \| undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n if (typeof value === \"string\" \|\| !value) {\r\n // This element is used for --_dso-renvooi-text-decoration\r\n return (\r\n <span class=\"text\">\r\n <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </span>\r\n );\r\n }\r\n\r\n if (\"toegevoegd\" in value) {\r\n return (\r\n <ins>\r\n <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n );\r\n }\r\n\r\n if (\"verwijderd\" in value) {\r\n return (\r\n <del>\r\n <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n <del>\r\n <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </del>\r\n <ins>\r\n <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n </ins>\r\n </>\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/\r\n Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n /\r\n@Component({\r\n tag: \"dso-renvooi\",\r\n styleUrl: \"renvooi.scss\",\r\n shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n /\r\n The renvooi value to render.\r\n /\r\n @Prop()\r\n value?: RenvooiValue \| RenvooiValue[];\r\n\r\n /\r\n To mark text.\r\n /\r\n @Prop()\r\n mark?: RenvooiMarkFunction;\r\n\r\n /\r\n Emitted when a marked item is highlighted.\r\n /\r\n @Event({ bubbles: false })\r\n dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n get values(): RenvooiValue[] {\r\n if (!this.value) {\r\n return [];\r\n }\r\n\r\n return Array.isArray(this.value) ? this.value : [this.value];\r\n }\r\n\r\n private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.values.map((v) => (\r\n <RenvooiRender\r\n value={v}\r\n mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n onMarkItemHighlight={this.handleMarkItemHighlight}\r\n />\r\n ))}\r\n </>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n display: inline-block;\r\n padding-block-start: (typography.$line-height-base typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n scoped: true,\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /*\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-legend-item.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-DvrTSHdI.js');
+var index = require('./index-Bfuot2fD.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 const legendItemCss = ":host {\n  display: block;\n  padding-block: 4px;\n  padding-inline: 4px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.legend-item {\n  display: flex;\n  position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n  margin-inline-start: 38px;\n}\n.legend-item.legend-item-selectable + .body {\n  margin-inline-start: 32px;\n}\n.legend-item.legend-item-selectable.legend-item-symbol + .body {\n  margin-inline-start: 70px;\n}\n\nbutton {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton:focus, button:focus-visible {\n  outline-offset: 2px;\n}\nbutton:active {\n  outline: 0;\n}\nbutton {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\nbutton[disabled] {\n  color: #afcf9d;\n}\nbutton[disabled].dso-spinner-left, button[disabled].dso-spinner-right {\n  color: #39870c;\n}\nbutton:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton:not([disabled]):active {\n  color: #173521;\n}\nbutton.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\nbutton.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nbutton.dso-spinner-left::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-spinner-right::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\nbutton {\n  position: absolute;\n  inset-inline-end: 0;\n}";
@@ -30,10 +30,10 @@ const LegendItem = class {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (index.h(index.Host, { key: 'd156def85be1ec2a37d991b228faf5277833402a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: 'b107f35a432abff219fc66877a0d272f09033a1d', class: clsx.clsx("legend-item", {
+        return (index.h(index.Host, { key: 'eb48f82b5146955e33e5db2cc61e7bafc3723fe3', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: 'af871a8d76bb92382a19b3485867196ffd75edb0', class: clsx.clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, index.h("div", { key: '1b016daa9b14722110b19a11fae10fa85dc84820', hidden: !hasSymbol }, index.h("slot", { key: '8f57a88efde9e827af56f53b2831e2b0e280c3a8', name: "symbol" })), index.h("div", { key: '5142f827716e2b369f903cb1d4597ce5c43446b0' }, index.h("slot", { key: '911d4a2e26f44e11ee06d51436d9ff3fb70f309b' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: 'b65362990e4acb3dbbdd1c82ec20e994bcba5717', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: 'f2eb84fe89d47a9d6e505dfc4e4c590a8e874dc9', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: '6c3c82821756f909145621e994adad1abe307dd6', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: '87e3832de8540b87ec4b72324417399d4ce88aef', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'e4f5e0b1b70736de5b72090a213448cb27c8cb81', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: '0d837176e583140a37ab5637a70f1c5f0717346e', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '53e00d795f9b2e30573d35e2343b48a7874fdd45', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '3012ea8681873b92090be198015f4e459b7cb7d8', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: 'a43f653b369d4ba75c8ab8a510f676aaf108958d', name: "body" }))));
+            }) }, index.h("div", { key: '9443d749600aaecabaefabc8551ed7ce1021b3ed', hidden: !hasSymbol }, index.h("slot", { key: '254430f374019d5a2fcf30842eac3e91902d26dc', name: "symbol" })), index.h("div", { key: '1b641b6ac7f3142d2c0796eb2523463268cfaae5' }, index.h("slot", { key: '715b000454869eac218b92cb2e2f6cb85e43658b' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '060ebca19ef1fcdae11667f63e4e7dd92ddee12f', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: '4476704e14002aaa3ec915555fd85c3e9d309636', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: 'ccb12aec339599791f2c8f4397e4ace9d87350d7', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: '94f5696f60462a954a3c4576a998542f44e374c6', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: '0c5e8faf2a0b0ffc572230b9ad620c324d9ccec2', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: '5779aed6c3c1283800b014c2fa7df7fc78db6ecd', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '0bf33586f9a433fb018b5a7c5d8143dfe6037e8a', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '0fc138e85c19d1b70db051f207016903b4dd543c', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: '8ff1c9f0b14f0814b3f635a0fbf244a0e351e436', name: "body" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-legend-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-legend-item.entry.cjs.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,gpHAAgpH;;~~MCczpH~~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","names":["h","Host","clsx"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$symbol-inline-size + units.$u1;\r\n }\r\n }\r\n\r\n &.legend-item-selectable {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$selectable-inline-size;\r\n }\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: (\r\n legend-item-variables.$symbol-inline-size + units.$u1 + legend-item-variables.$selectable-inline-size\r\n );\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). 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 Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n /\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\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 showBody = false;\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\":scope > dso-selectable\");\r\n }\r\n\r\n get bodySlottedElement() {\r\n return this.host.querySelector(\"[slot='body']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasBody = this.bodySlottedElement !== null;\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div\r\n class={clsx(\"legend-item\", {\r\n \"legend-item-symbol\": hasSymbol,\r\n \"legend-item-selectable\": isSelectable,\r\n })}\r\n >\r\n <div hidden={!hasSymbol}>\r\n <slot name=\"symbol\" />\r\n </div>\r\n <div>\r\n <slot></slot>\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n {this.removable && (\r\n <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n <span class=\"sr-only\">Legenda item verwijderen</span>\r\n <dso-icon icon=\"trash\"></dso-icon>\r\n </button>\r\n )}\r\n\r\n {hasBody && !this.disabled && (\r\n <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n <span class=\"sr-only\">Legenda item aanpassen</span>\r\n <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n </button>\r\n )}\r\n </div>\r\n <div hidden={!hasBody \|\| this.disabled \|\| !this.showBody} class=\"body\">\r\n <slot name=\"body\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-legend-item.entry.cjs.js","mappings":"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","names":["h","Host","clsx"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$symbol-inline-size + units.$u1;\r\n }\r\n }\r\n\r\n &.legend-item-selectable {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$selectable-inline-size;\r\n }\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: (\r\n legend-item-variables.$symbol-inline-size + units.$u1 + legend-item-variables.$selectable-inline-size\r\n );\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). 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 Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n /\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\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 showBody = false;\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\":scope > dso-selectable\");\r\n }\r\n\r\n get bodySlottedElement() {\r\n return this.host.querySelector(\"[slot='body']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasBody = this.bodySlottedElement !== null;\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div\r\n class={clsx(\"legend-item\", {\r\n \"legend-item-symbol\": hasSymbol,\r\n \"legend-item-selectable\": isSelectable,\r\n })}\r\n >\r\n <div hidden={!hasSymbol}>\r\n <slot name=\"symbol\" />\r\n </div>\r\n <div>\r\n <slot></slot>\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n {this.removable && (\r\n <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n <span class=\"sr-only\">Legenda item verwijderen</span>\r\n <dso-icon icon=\"trash\"></dso-icon>\r\n </button>\r\n )}\r\n\r\n {hasBody && !this.disabled && (\r\n <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n <span class=\"sr-only\">Legenda item aanpassen</span>\r\n <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n </button>\r\n )}\r\n </div>\r\n <div hidden={!hasBody \|\| this.disabled \|\| !this.showBody} class=\"body\">\r\n <slot name=\"body\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-legend-item.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-legend-item.entry.cjs.js","sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$symbol-inline-size + units.$u1;\r\n }\r\n }\r\n\r\n &.legend-item-selectable {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$selectable-inline-size;\r\n }\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: (\r\n legend-item-variables.$symbol-inline-size + units.$u1 + legend-item-variables.$selectable-inline-size\r\n );\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). 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 Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n /\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\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 showBody = false;\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\":scope > dso-selectable\");\r\n }\r\n\r\n get bodySlottedElement() {\r\n return this.host.querySelector(\"[slot='body']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasBody = this.bodySlottedElement !== null;\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div\r\n class={clsx(\"legend-item\", {\r\n \"legend-item-symbol\": hasSymbol,\r\n \"legend-item-selectable\": isSelectable,\r\n })}\r\n >\r\n <div hidden={!hasSymbol}>\r\n <slot name=\"symbol\" />\r\n </div>\r\n <div>\r\n <slot></slot>\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n {this.removable && (\r\n <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n <span class=\"sr-only\">Legenda item verwijderen</span>\r\n <dso-icon icon=\"trash\"></dso-icon>\r\n </button>\r\n )}\r\n\r\n {hasBody && !this.disabled && (\r\n <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n <span class=\"sr-only\">Legenda item aanpassen</span>\r\n <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n </button>\r\n )}\r\n </div>\r\n <div hidden={!hasBody \|\| this.disabled \|\| !this.showBody} class=\"body\">\r\n <slot name=\"body\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":["h","Host","clsx"],"mappings":";;;;;AAAA,MAAM,aAAa,GAAG,gpHAAgpH;;~~MCczpH~~,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AASE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAiChB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAwDjB;AAtDC,IAAA,IAAI,oBAAoB,GAAA;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC;;AAGnD,IAAA,IAAI,wBAAwB,GAAA;QAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC;;AAG3D,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;;IAGjD,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI;AACpD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,KAAK,IAAI;AAChD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,wBAAwB,KAAK,IAAI;QAE3D,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAA,EAChGD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAEE,SAAI,CAAC,aAAa,EAAE;AACzB,gBAAA,oBAAoB,EAAE,SAAS;AAC/B,gBAAA,wBAAwB,EAAE,YAAY;AACvC,aAAA,CAAC,EAAA,EAEFF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAE,CAAC,SAAS,EAAA,EACrBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,KACpCA,OAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,eAAe,CAAiB,CACxE,EACA,IAAI,CAAC,SAAS,KACbA,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,EACrGA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAgC,EAAA,0BAAA,CAAA,EACrDA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,OAAO,EAAA,CAAY,CAC3B,CACV,EAEA,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,KACxBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,EACpFA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAA8B,EAAA,wBAAA,CAAA,EACnDA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,MAAM,EAAI,CAAA,CAC7C,CACV,CACG,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,MAAM,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,EAAA,EACpEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACD;;;;;;;;"}
1	+ {"version":3,"file":"dso-legend-item.entry.cjs.js","sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$symbol-inline-size + units.$u1;\r\n }\r\n }\r\n\r\n &.legend-item-selectable {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$selectable-inline-size;\r\n }\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: (\r\n legend-item-variables.$symbol-inline-size + units.$u1 + legend-item-variables.$selectable-inline-size\r\n );\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). 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 Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n /\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\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 showBody = false;\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\":scope > dso-selectable\");\r\n }\r\n\r\n get bodySlottedElement() {\r\n return this.host.querySelector(\"[slot='body']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasBody = this.bodySlottedElement !== null;\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div\r\n class={clsx(\"legend-item\", {\r\n \"legend-item-symbol\": hasSymbol,\r\n \"legend-item-selectable\": isSelectable,\r\n })}\r\n >\r\n <div hidden={!hasSymbol}>\r\n <slot name=\"symbol\" />\r\n </div>\r\n <div>\r\n <slot></slot>\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n {this.removable && (\r\n <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n <span class=\"sr-only\">Legenda item verwijderen</span>\r\n <dso-icon icon=\"trash\"></dso-icon>\r\n </button>\r\n )}\r\n\r\n {hasBody && !this.disabled && (\r\n <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n <span class=\"sr-only\">Legenda item aanpassen</span>\r\n <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n </button>\r\n )}\r\n </div>\r\n <div hidden={!hasBody \|\| this.disabled \|\| !this.showBody} class=\"body\">\r\n <slot name=\"body\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":["h","Host","clsx"],"mappings":"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"}

package/dist/cjs/dso-list-button.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-DvrTSHdI.js');
+var index = require('./index-Bfuot2fD.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\n.dso-button-group.dso-disabled > * {\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding-block: 0;\n  padding-inline: 32px 0;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  block-size: 24px;\n  inset-inline-start: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-inline-start: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  block-size: 20px;\n  inset-inline-start: 2px;\n  position: absolute;\n  inset-block-start: 2px;\n  inline-size: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  block-size: 18px;\n  inset-inline-start: 3px;\n  inset-block-start: 3px;\n  inline-size: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  block-size: 22px;\n  inset-inline-start: 1px;\n  inset-block-start: 1px;\n  inline-size: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-block-start-color: transparent;\n  border-width: 0 0 3px 3px;\n  block-size: 8px;\n  transform: rotate(-45deg);\n  inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  block-size: 12px;\n  inline-size: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  block-size: 12px;\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  inline-size: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
@@ -75,7 +75,7 @@ const ListButton = class {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (index.h("div", { key: 'b598da82cfebc24eeccc5a2ec2b46613ba6eba69', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: 'ddf4368fb2eafc2be93b9a9e5c85c227c220303e', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: 'f2c536704711f53fadc40463b39f0fec0430d9c9', class: "dso-selectable" }, index.h("input", { key: 'e751f37d8eb12e3f6e41742dd93b1019a3bb9303', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), index.h("label", { key: '7ece1b6cdd28904be5dc222ce19f86f64d0cadac', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: '7d7bd35557060c7e4ca370f122bfed958957a634', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: '87dd6a05f6886e745f2448a2358cd3a8c2110cf7', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '0c490aa9be692955ab1fedae67d832d787e2edea', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), this.subcontentSlot && (index.h("div", { key: 'd10de6f4ad7cafe0735603fdcc9dde1f52eea620', class: "subcontent" }, index.h("slot", { key: 'a19c3621e895948edf1b1c6cf3245d0d6869e9e7', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (index.h("div", { key: '94c1149928f8dcdcdc446ef2ccc287c6b0d65b35', class: "dso-input-number" }, this.count > 1 && (index.h(index.Fragment, null, index.h("button", { key: '3a11c8e551814a5061881a70132256804b682604', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: '54fd8dc97e5d0b543c82e85750bfb6caeaea02ef', icon: "minus-circle" }), index.h("span", { key: '7f24b449569afea6a498d592d13f360bf328a0da', class: "sr-only" }, "Aantal verlagen")), index.h("span", { key: '5d7a3c2fe16cb3e8003500de84691919845bc0b5', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), index.h("button", { key: 'cbeee360c92ab646420c63bdd21ce8782e17dd72', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: '479edf8adbb0896abc366d6e79e8386d753a857a', icon: "plus-circle" }), index.h("span", { key: '6c1d00d2e2dcd983d703368e7550faa3ade4c4d6', class: "sr-only" }, "Aantal verhogen"))))));
+        return (index.h("div", { key: '114dbe1b563e2e4b989b9787508224bc92ea7f88', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: '279651ed6b4673607def53ef02a4a47f1eef2100', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: '42d810dda765096aac5cf2b8d7ebd76084c4686b', class: "dso-selectable" }, index.h("input", { key: 'e985aab2a080a722071a906d76ab9f3aeab18577', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), index.h("label", { key: '0a20e9b18a265aa82045476d33f36173fd4dea0d', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: '5e7f64e4a1a181938e60b765cb1bd35d7bc775d3', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: '777da5d8c101f8b13440a173898b424943a71692', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '7d61c1c55a4a4120dd818e3318de3e116336f26f', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), this.subcontentSlot && (index.h("div", { key: 'd2caca1393028f049c1eb8a21c008b40a2eaea55', class: "subcontent" }, index.h("slot", { key: 'b94adab3d1d72844e869e28c1613784e5c5fc49b', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (index.h("div", { key: '8e196dfd102412745cca20ab433f3bad6d86c896', class: "dso-input-number" }, this.count > 1 && (index.h(index.Fragment, null, index.h("button", { key: '8a041edb9e2b6b7f24449d0e58486fdf23c225fc', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: 'b9864a4c94445989c09553cd87cf90ec25cba591', icon: "minus-circle" }), index.h("span", { key: '9bfe668edfdf84b5d0b1071583f5f208125794b6', class: "sr-only" }, "Aantal verlagen")), index.h("span", { key: '8ccb011977dd0a8e66c26a902f5564df899025b1', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), index.h("button", { key: '26ff7486724e926b1ebfdb3b84c1ec70bc12b88d', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: 'be718476696bbecf0b41dc95724b28aa2ce84ec6', icon: "plus-circle" }), index.h("span", { key: '29f0bc3afa9f3b69ecb5607f36d2c6f80bfee053', class: "sr-only" }, "Aantal verhogen"))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-list-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-list-button.entry.cjs.js","mappings":"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","names":["forceUpdate","h","clsx","Fragment"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > :hover + .dso-input-number,\r\n > :focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > .dso-selected + .dso-input-number {\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n > :active + .dso-input-number,\r\n > .active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > .disabled + .dso-input-number,\r\n > [disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n opacity: 1;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n & {\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel,\r\n .subcontent {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: selectable.$size + units.$u1;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n page-break-before: always;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Fragment,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\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 <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\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"],"version":3}
1	+ {"file":"dso-list-button.entry.cjs.js","mappings":"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","names":["forceUpdate","h","clsx","Fragment"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > :hover + .dso-input-number,\r\n > :focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > .dso-selected + .dso-input-number {\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n > :active + .dso-input-number,\r\n > .active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > .disabled + .dso-input-number,\r\n > [disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n opacity: 1;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n & {\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel,\r\n .subcontent {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: selectable.$size + units.$u1;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n page-break-before: always;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","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 <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\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"],"version":3}

package/dist/cjs/dso-list-button.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-list-button.entry.cjs.js","sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > :hover + .dso-input-number,\r\n > :focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > .dso-selected + .dso-input-number {\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n > :active + .dso-input-number,\r\n > .active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > .disabled + .dso-input-number,\r\n > [disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n opacity: 1;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n & {\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel,\r\n .subcontent {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: selectable.$size + units.$u1;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n page-break-before: always;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Fragment,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\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 <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\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"],"names":["forceUpdate","h","clsx","Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"dso-list-button.entry.cjs.js","sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > :hover + .dso-input-number,\r\n > :focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > .dso-selected + .dso-input-number {\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n > :active + .dso-input-number,\r\n > .active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > .disabled + .dso-input-number,\r\n > [disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n opacity: 1;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n & {\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel,\r\n .subcontent {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: selectable.$size + units.$u1;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n page-break-before: always;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","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 <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\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"],"names":["forceUpdate","h","clsx","Fragment"],"mappings":"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"}

package/dist/cjs/dso-logo.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-DvrTSHdI.js');
+var index = require('./index-Bfuot2fD.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 const logoCss = ":host {\n  max-block-size: 3rem;\n  block-size: 3rem;\n  display: grid;\n  grid-template-areas: \"target wordmark label\";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5625rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n:host .logo-url,\n:host .logo-label-url {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  text-decoration: none;\n}\n:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus-visible,\n:host .logo-label-url:active {\n  text-decoration: underline;\n}\n:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,\n:host .logo-label-url,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus,\n:host .logo-label-url:visited {\n  color: #275937;\n}\n\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) {\n  grid-template-areas: \"targetwordmark label\";\n}\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) .logo-url,\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) .logo-ribbon {\n  grid-area: targetwordmark;\n}\n\n.logo-label-url {\n  grid-area: label;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n  font-size: 1.5625rem;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #8b4a6a;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding-block: 0;\n  padding-inline: 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  .logo-wordmark {\n    font-size: initial;\n  }\n  :host([label]) {\n    grid-template-areas: \"target label\";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    font-size: initial;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n    grid-area: label;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}";
@@ -31,7 +31,7 @@ const Logo = class {
     }
     render() {
         return (index.h(index.Fragment, null, this.logoUrl ? (index.h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, index.h(DsoLogo, { name: this.name }))) : (index.h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '7979dd6758ffbeeb8b0f98b193d57b6f943d3cf1', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '54ea3fca79e32f2b8787bfd5e0e0d0b2176975ee', class: "logo-ribbon" }, this.ribbon)));
     }
 };
 Logo.style = logoCss;