npm - @dso-toolkit/core - Versions diffs - 62.9.0 → 62.11.0 - Mend

@dso-toolkit/core 62.9.0 → 62.11.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 (214) hide show

package/dist/components/dso-accordion-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-accordion-section.js","mappings":"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","names":[],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" \| \"info\" \| \"warning\" \| \"danger\" \| \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" \| \"h3\" \| \"h4\" \| \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n success: \"succes:\",\r\n info: \"info:\",\r\n warning: \"waarschuwing:\",\r\n danger: \"fout:\",\r\n error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n /*\r\n The original MouseEvent that triggered the click.\r\n \r\n In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n /\r\n originalEvent?: MouseEvent;\r\n\r\n /\r\n The requested state. If the Accordion Section is closed, `open = true`.\r\n /\r\n open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationStartEvent {\r\n /\r\n Helper function to scroll the Accordion Section into view.\r\n /\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /\r\n Whether or not the Accordion opening or closing.\r\n /\r\n animation: \"opening\" \| \"closing\";\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n /\r\n Helper function to scroll the Accordion Section into view.\r\n /\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /\r\n The state of the Accordion Section after animation.\r\n /\r\n open: boolean;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n display: block;\r\n\r\n .dso-section-handle {\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n position: relative;\r\n\r\n > a:active {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n @include anchor.clean();\r\n }\r\n\r\n .dso-status {\r\n font-weight: 400;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n .dso-section-handle > button,\r\n .dso-section-handle > a {\r\n align-items: flex-start;\r\n background-color: transparent;\r\n border: 0;\r\n cursor: pointer;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n padding: accordion.$vertical-padding accordion.$horizontal-padding accordion.$vertical-padding;\r\n text-align: start;\r\n width: 100%;\r\n word-break: break-word;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n\r\n &.dso-section-handle-chevron {\r\n @include utilities.transition(transform);\r\n\r\n transform: rotate(0);\r\n }\r\n }\r\n\r\n > .dso-section-handle-addons:first-child,\r\n > dso-icon:first-child {\r\n margin-right: units.$u1;\r\n }\r\n\r\n > dso-icon:last-child {\r\n margin-left: auto;\r\n }\r\n\r\n > .dso-section-handle-addons:last-child {\r\n margin-left: auto;\r\n\r\n dso-attachments-counter,\r\n dso-icon {\r\n margin-left: 16px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n .dso-section-handle {\r\n > button,\r\n > a {\r\n .dso-section-handle-chevron {\r\n &:first-child {\r\n transform: rotate(90deg);\r\n }\r\n\r\n &:last-child {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-section-body {\r\n background-color: colors.$wit;\r\n border-top: 0;\r\n margin-top: accordion.$border-radius -1;\r\n\r\n .dso-section-body-content {\r\n padding: units.$u2 + accordion.$border-radius units.$u2 units.$u2;\r\n }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n forceUpdate,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n EventEmitter,\r\n FunctionalComponent,\r\n Method,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n AccordionHeading,\r\n AccordionSectionAnimationEndEvent,\r\n AccordionSectionState,\r\n AccordionSectionToggleClickEvent,\r\n AccordionSectionAnimationStartEvent,\r\n stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n handleUrl: string \| undefined;\r\n open: boolean;\r\n handleElementRef: (element: HTMLAnchorElement \| HTMLButtonElement \| undefined) => void;\r\n onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, handleElementRef }, children) => {\r\n if (handleUrl) {\r\n return (\r\n <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </a>\r\n );\r\n }\r\n\r\n return (\r\n <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </button>\r\n );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n heading: AccordionHeading;\r\n ref: (element: HTMLHeadingElement \| undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n return (\r\n <h2 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h2>\r\n );\r\n case \"h3\":\r\n return (\r\n <h3 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h3>\r\n );\r\n case \"h4\":\r\n return (\r\n <h4 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h4>\r\n );\r\n case \"h5\":\r\n return (\r\n <h5 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h5>\r\n );\r\n }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n state?: AccordionSectionState;\r\n icon?: string;\r\n attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n if (state) {\r\n return <HandleStateIcon state={state} />;\r\n }\r\n\r\n if (attachmentCount) {\r\n return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n }\r\n\r\n if (icon) {\r\n return <dso-icon icon={icon}></dso-icon>;\r\n }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n if (state === \"error\") {\r\n return <dso-icon icon=\"status-error\"></dso-icon>;\r\n }\r\n\r\n if (state === \"danger\") {\r\n return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n }\r\n\r\n if (state === \"success\") {\r\n return <dso-icon icon=\"status-success\"></dso-icon>;\r\n }\r\n\r\n if (state === \"info\") {\r\n return <dso-icon icon=\"status-info\"></dso-icon>;\r\n }\r\n\r\n if (state === \"warning\") {\r\n return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n }\r\n};\r\n\r\n@Component({\r\n tag: \"dso-accordion-section\",\r\n styleUrl: \"accordion-section.scss\",\r\n shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n private accordionState?: AccordionInternalState;\r\n\r\n private sectionBody?: HTMLDivElement;\r\n\r\n private sectionHeading?: HTMLHeadingElement;\r\n\r\n @Element()\r\n host!: HTMLDsoAccordionSectionElement;\r\n\r\n /*\r\n The title of the handle\r\n /\r\n @Prop()\r\n handleTitle?: string;\r\n\r\n /\r\n Which heading element to use.\r\n /\r\n @Prop()\r\n heading: AccordionHeading = \"h2\";\r\n\r\n /\r\n When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n /\r\n @Prop()\r\n handleUrl?: string;\r\n\r\n /\r\n `state` takes precedence over `attachmentCount` and `icon`\r\n /\r\n @Prop()\r\n status?: AccordionSectionState;\r\n\r\n /\r\n `attachmentCount` takes precedence over `icon`\r\n /\r\n @Prop()\r\n attachmentCount?: number;\r\n\r\n /\r\n To set an icon in the heading handle.\r\n /\r\n @Prop()\r\n icon?: string;\r\n\r\n /\r\n The status of the section.\r\n /\r\n @Prop()\r\n statusDescription?: string;\r\n\r\n /\r\n Set the Accordion Section open.\r\n /\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /\r\n Set when this Accordion Section contains or will contain an Accordion.\r\n /\r\n @Prop({ reflect: true })\r\n hasNestedAccordion = false;\r\n\r\n /\r\n Calling this method will set focus to the handle.\r\n /\r\n @Method()\r\n async focusHandle() {\r\n this.handleElementRef?.focus();\r\n }\r\n\r\n @State()\r\n hover = false;\r\n\r\n get containsNestedAccordion() {\r\n return this.host.querySelector(\"dso-accordion\") !== null;\r\n }\r\n\r\n componentWillLoad() {\r\n this.accordion?._getState().then((state) => {\r\n this.accordionState = state;\r\n\r\n forceUpdate(this.host);\r\n });\r\n }\r\n\r\n get isNeutral() {\r\n return this.accordionState?.variant === \"neutral\";\r\n }\r\n\r\n private async scrollIntoView(bodyHeight: number \| undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n log(\r\n `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n bodyHeight,\r\n )}, behavior: ${JSON.stringify(behavior)})`,\r\n );\r\n\r\n const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n if (!bodyClientRect \|\| !headingClientRect \|\| !this.accordionState) {\r\n log(`DSO Toolkit [Accordion Section] returning`);\r\n\r\n return;\r\n }\r\n\r\n // this y is relative to the top of the viewport.\r\n const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n\r\n log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n const box = this.host.getBoundingClientRect();\r\n\r\n const scrollTop = window.scrollY \|\| document.documentElement.scrollTop \|\| document.body.scrollTop;\r\n const clientTop = document.documentElement.clientTop \|\| document.body.clientTop \|\| 0;\r\n const top = box.top + scrollTop - clientTop;\r\n\r\n log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n if (sectionBottomY > window.innerHeight) {\r\n log(\r\n `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n sectionBottomY > window.innerHeight,\r\n )};`,\r\n );\r\n\r\n const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n log(\r\n `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n );\r\n log(\r\n `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n shouldScrollToTopOfSection,\r\n )};`,\r\n );\r\n\r\n window.scrollTo({\r\n top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n behavior,\r\n });\r\n } else if (headingClientRect.top < 0) {\r\n log(\r\n `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n );\r\n\r\n window.scrollTo({\r\n top,\r\n behavior,\r\n });\r\n }\r\n }\r\n\r\n private get accordion() {\r\n return this.host.closest(\"dso-accordion\");\r\n }\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n this.dsoToggleClick.emit({\r\n originalEvent: event,\r\n open: !this.open,\r\n });\r\n };\r\n\r\n private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n this.dsoAnimationStart.emit({\r\n animation: this.open ? \"opening\" : \"closing\",\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n this.dsoAnimationEnd.emit({\r\n open: this.open,\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n /\r\n Emitted when the user activates the toggle button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n /\r\n Event emitted when the Accordion Section starts its toggle animation.\r\n /\r\n @Event({ bubbles: false })\r\n dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n /\r\n Event emitted when the Accordion Section completes its toggle animation.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n private handleElementRef?: HTMLAnchorElement \| HTMLButtonElement;\r\n\r\n render() {\r\n const { variant, reverseAlign } = this.accordionState ?? {};\r\n const hasAddons = !!this.statusDescription \|\| !!this.status \|\| !!this.icon \|\| !!this.attachmentCount;\r\n\r\n return (\r\n <Host\r\n class={{\r\n \"dso-accordion-section\": true,\r\n [\"dso-accordion-\" + variant]: true,\r\n \"dso-nested-accordion\": this.hasNestedAccordion \|\| this.containsNestedAccordion,\r\n \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n }}\r\n hidden={!variant}\r\n onMouseenter={() => (this.hover = true)}\r\n onMouseleave={() => (this.hover = false)}\r\n >\r\n <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n <HandleElement\r\n handleUrl={this.handleUrl}\r\n onClick={this.handleClick}\r\n open={this.open}\r\n handleElementRef={(e) => (this.handleElementRef = e)}\r\n >\r\n {reverseAlign ? (\r\n <Fragment>\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n <HandleIcon icon={this.icon} />\r\n </div>\r\n )}\r\n\r\n <span>{this.handleTitle}</span>\r\n\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n </Fragment>\r\n ) : (\r\n <Fragment>\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n <span>\r\n {this.handleTitle}\r\n {this.isNeutral && (\r\n <dso-icon class=\"info-icon\" icon={this.open \|\| this.hover ? \"info-active\" : \"info\"} />\r\n )}\r\n </span>\r\n\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n </div>\r\n )}\r\n </Fragment>\r\n )}\r\n </HandleElement>\r\n </Handle>\r\n <dso-expandable\r\n class=\"dso-section-body\"\r\n open={this.open}\r\n enableAnimation\r\n minimumHeight={this.isNeutral ? 0 : 4}\r\n onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n >\r\n <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n <slot />\r\n </div>\r\n </dso-expandable>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-accordion-section.js","mappings":";;;;;AAIO,MAAM,QAAQ,GAA0C;EAC7D,OAAO,EAAE,SAAS;EAClB,IAAI,EAAE,OAAO;EACb,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;CACf;;ACVD,MAAM,mBAAmB,GAAG,03ZAA03Z;;AC2Bt5Z;AACA,MAAM,GAAG,GAAI,MAAc,CAAC,SAAS,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,eAAc,CAAC;AAEjG,MAAM,aAAa,GAKd,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,QAAQ;EAC5D,IAAI,SAAS,EAAE;IACb,QACE,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,mBAAiB,IAAI,GAAG,MAAM,GAAG,OAAO,EAAE,GAAG,EAAE,gBAAgB,IAChG,QAAQ,CACP,EACJ;GACH;EAED,QACE,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,mBAAiB,IAAI,GAAG,MAAM,GAAG,OAAO,EAAE,GAAG,EAAE,gBAAgB,IAClG,QAAQ,CACF,EACT;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAGP,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,QAAQ;EAC9B,QAAQ,OAAO;IACb,QAAQ;IACR,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;GACL;AACH,CAAC,CAAC;AAEF,MAAM,UAAU,GAIX,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE;EACpC,IAAI,KAAK,EAAE;IACT,OAAO,EAAC,eAAe,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;GAC1C;EAED,IAAI,eAAe,EAAE;IACnB,OAAO,+BAAyB,KAAK,EAAE,eAAe,GAA4B,CAAC;GACpF;EAED,IAAI,IAAI,EAAE;IACR,OAAO,gBAAU,IAAI,EAAE,IAAI,GAAa,CAAC;GAC1C;AACH,CAAC,CAAC;AAEF,MAAM,eAAe,GAA0D,CAAC,EAAE,KAAK,EAAE;EACvF,IAAI,KAAK,KAAK,OAAO,EAAE;IACrB,OAAO,gBAAU,IAAI,EAAC,cAAc,GAAY,CAAC;GAClD;EAED,IAAI,KAAK,KAAK,QAAQ,EAAE;IACtB,OAAO,gBAAU,IAAI,EAAC,eAAe,GAAY,CAAC;GACnD;EAED,IAAI,KAAK,KAAK,SAAS,EAAE;IACvB,OAAO,gBAAU,IAAI,EAAC,gBAAgB,GAAY,CAAC;GACpD;EAED,IAAI,KAAK,KAAK,MAAM,EAAE;IACpB,OAAO,gBAAU,IAAI,EAAC,aAAa,GAAY,CAAC;GACjD;EAED,IAAI,KAAK,KAAK,SAAS,EAAE;IACvB,OAAO,gBAAU,IAAI,EAAC,gBAAgB,GAAY,CAAC;GACpD;AACH,CAAC,CAAC;MAOW,gBAAgB;;;;;;;;IAqKnB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACvB,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;OACjB,CAAC,CAAC;KACJ,CAAC;IAEM,mCAA8B,GAAG,CAAC,CAAmB;MAC3D,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,SAAS;QAC5C,cAAc,EAAE,CAAC,WAA2B,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC;OAC1G,CAAC,CAAC;KACJ,CAAC;IAEM,iCAA4B,GAAG,CAAC,CAA2C;MACjF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACxB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,cAAc,EAAE,CAAC,WAA2B,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC;OAC1G,CAAC,CAAC;KACJ,CAAC;;mBApK0B,IAAI;;;;;;gBAoCzB,KAAK;8BAMS,KAAK;iBAWlB,KAAK;;;;;EALb,MAAM,WAAW;;IACf,MAAA,IAAI,CAAC,gBAAgB,0CAAE,KAAK,EAAE,CAAC;GAChC;EAKD,IAAI,uBAAuB;IACzB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;GAC1D;EAED,iBAAiB;;IACf,MAAA,IAAI,CAAC,SAAS,0CAAE,SAAS,GAAG,IAAI,CAAC,CAAC,KAAK;MACrC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;MAE5B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB,CAAC,CAAC;GACJ;EAED,IAAI,SAAS;;IACX,OAAO,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,MAAK,SAAS,CAAC;GACnD;EAEO,MAAM,cAAc,CAAC,UAA8B,EAAE,WAA2B,MAAM;;IAC5F,GAAG,CACD,8DAA8D,IAAI,CAAC,SAAS,CAC1E,UAAU,CACX,eAAe,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAC5C,CAAC;IAEF,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,qBAAqB,EAAE,CAAC;IACjE,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,cAAc,0CAAE,qBAAqB,EAAE,CAAC;IAEvE,GAAG,CAAC,0DAA0D,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IACjG,GAAG,CAAC,6DAA6D,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACvG,GAAG,CAAC,yDAAyD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IACrG,GAAG,CAAC,+CAA+C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjF,IAAI,CAAC,cAAc,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACjE,GAAG,CAAC,2CAA2C,CAAC,CAAC;MAEjD,OAAO;KACR;;IAGD,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,GAAG,iBAAiB,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAE5G,GAAG,CAAC,0DAA0D,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IACjG,GAAG,CAAC,wDAAwD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAEnG,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAE9C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,IAAI,QAAQ,CAAC,eAAe,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;IAClG,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;IACrF,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,SAAS,GAAG,SAAS,CAAC;IAE5C,GAAG,CAAC,wCAAwC,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC;IAElF,IAAI,cAAc,GAAG,MAAM,CAAC,WAAW,EAAE;MACvC,GAAG,CACD,2EAA2E,IAAI,CAAC,SAAS,CACvF,cAAc,GAAG,MAAM,CAAC,WAAW,CACpC,GAAG,CACL,CAAC;MAEF,MAAM,uBAAuB,GAAG,cAAc,GAAG,iBAAiB,CAAC,GAAG,CAAC;MACvE,MAAM,0BAA0B,GAAG,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC;MAEhF,GAAG,CACD,mEAAmE,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,GAAG,CAC9G,CAAC;MACF,GAAG,CACD,sEAAsE,IAAI,CAAC,SAAS,CAClF,0BAA0B,CAC3B,GAAG,CACL,CAAC;MAEF,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG,EAAE,0BAA0B,GAAG,GAAG,GAAG,GAAG,IAAI,MAAM,CAAC,WAAW,GAAG,uBAAuB,CAAC;QAC5F,QAAQ;OACT,CAAC,CAAC;KACJ;SAAM,IAAI,iBAAiB,CAAC,GAAG,GAAG,CAAC,EAAE;MACpC,GAAG,CACD,iEAAiE,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAC9G,CAAC;MAEF,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG;QACH,QAAQ;OACT,CAAC,CAAC;KACJ;GACF;EAED,IAAY,SAAS;IACnB,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;GAC3C;EA2CD,MAAM;;IACJ,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,EAAE,CAAC;IAC5D,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAErG,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,uBAAuB,EAAE,IAAI;QAC7B,CAAC,gBAAgB,GAAG,OAAO,GAAG,IAAI;QAClC,sBAAsB,EAAE,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,uBAAuB;QAC/E,6BAA6B,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK;OACrD,EACD,MAAM,EAAE,CAAC,OAAO,EAChB,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EACvC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAExC,EAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,IAC9E,EAAC,aAAa,IACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAEnD,YAAY,IACX,EAAC,QAAQ,QACN,SAAS,KACR,WAAK,KAAK,EAAC,2BAA2B,IACpC,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC3B,CACP,EAED,gBAAO,IAAI,CAAC,WAAW,CAAQ,EAE/B,gBAAU,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,GAAY,CACnE,KAEX,EAAC,QAAQ,QACP,gBAAU,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,eAAe,GAAY,EAE5E,IAAI,CAAC,MAAM,IAAI,YAAM,KAAK,EAAC,SAAS,IAAE,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAEpE,gBACG,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,SAAS,KACb,gBAAU,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,GAAI,CACvF,CACI,EAEN,SAAS,KACR,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,iBAAiB,IAAI,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,iBAAiB,CAAQ,EACnF,EAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,GAAI,CACtF,CACP,CACQ,CACZ,CACa,CACT,EACT,sBACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,eAAe,QACf,aAAa,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,EACrC,6BAA6B,EAAE,IAAI,CAAC,8BAA8B,EAClE,2BAA2B,EAAE,IAAI,CAAC,4BAA4B,IAE9D,WAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAClF,eAAQ,CACJ,CACS,CACZ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" \| \"info\" \| \"warning\" \| \"danger\" \| \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" \| \"h3\" \| \"h4\" \| \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n success: \"succes:\",\r\n info: \"info:\",\r\n warning: \"waarschuwing:\",\r\n danger: \"fout:\",\r\n error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n /*\r\n The original MouseEvent that triggered the click.\r\n \r\n In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n /\r\n originalEvent?: MouseEvent;\r\n\r\n /\r\n The requested state. If the Accordion Section is closed, `open = true`.\r\n /\r\n open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationStartEvent {\r\n /\r\n Helper function to scroll the Accordion Section into view.\r\n /\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /\r\n Whether or not the Accordion opening or closing.\r\n /\r\n animation: \"opening\" \| \"closing\";\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n /\r\n Helper function to scroll the Accordion Section into view.\r\n /\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /\r\n The state of the Accordion Section after animation.\r\n /\r\n open: boolean;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n display: block;\r\n\r\n .dso-section-handle {\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n position: relative;\r\n\r\n > a:active {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n @include anchor.clean();\r\n }\r\n\r\n .dso-status {\r\n font-weight: 400;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n .dso-section-handle > button,\r\n .dso-section-handle > a {\r\n align-items: flex-start;\r\n background-color: transparent;\r\n border: 0;\r\n cursor: pointer;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n padding: accordion.$vertical-padding accordion.$horizontal-padding accordion.$vertical-padding;\r\n text-align: start;\r\n width: 100%;\r\n word-break: break-word;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n\r\n &.dso-section-handle-chevron {\r\n @include utilities.transition(transform);\r\n\r\n transform: rotate(0);\r\n }\r\n }\r\n\r\n > .dso-section-handle-addons:first-child,\r\n > dso-icon:first-child {\r\n margin-right: units.$u1;\r\n }\r\n\r\n > dso-icon:last-child {\r\n margin-left: auto;\r\n }\r\n\r\n > .dso-section-handle-addons:last-child {\r\n margin-left: auto;\r\n\r\n dso-attachments-counter,\r\n dso-icon {\r\n margin-left: 16px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n .dso-section-handle {\r\n > button,\r\n > a {\r\n .dso-section-handle-chevron {\r\n &:first-child {\r\n transform: rotate(90deg);\r\n }\r\n\r\n &:last-child {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-section-body {\r\n background-color: colors.$wit;\r\n border-top: 0;\r\n margin-top: accordion.$border-radius -1;\r\n\r\n .dso-section-body-content {\r\n padding: units.$u2 + accordion.$border-radius units.$u2 units.$u2;\r\n }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n forceUpdate,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n EventEmitter,\r\n FunctionalComponent,\r\n Method,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n AccordionHeading,\r\n AccordionSectionAnimationEndEvent,\r\n AccordionSectionState,\r\n AccordionSectionToggleClickEvent,\r\n AccordionSectionAnimationStartEvent,\r\n stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n handleUrl: string \| undefined;\r\n open: boolean;\r\n handleElementRef: (element: HTMLAnchorElement \| HTMLButtonElement \| undefined) => void;\r\n onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, handleElementRef }, children) => {\r\n if (handleUrl) {\r\n return (\r\n <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </a>\r\n );\r\n }\r\n\r\n return (\r\n <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </button>\r\n );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n heading: AccordionHeading;\r\n ref: (element: HTMLHeadingElement \| undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n return (\r\n <h2 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h2>\r\n );\r\n case \"h3\":\r\n return (\r\n <h3 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h3>\r\n );\r\n case \"h4\":\r\n return (\r\n <h4 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h4>\r\n );\r\n case \"h5\":\r\n return (\r\n <h5 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h5>\r\n );\r\n }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n state?: AccordionSectionState;\r\n icon?: string;\r\n attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n if (state) {\r\n return <HandleStateIcon state={state} />;\r\n }\r\n\r\n if (attachmentCount) {\r\n return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n }\r\n\r\n if (icon) {\r\n return <dso-icon icon={icon}></dso-icon>;\r\n }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n if (state === \"error\") {\r\n return <dso-icon icon=\"status-error\"></dso-icon>;\r\n }\r\n\r\n if (state === \"danger\") {\r\n return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n }\r\n\r\n if (state === \"success\") {\r\n return <dso-icon icon=\"status-success\"></dso-icon>;\r\n }\r\n\r\n if (state === \"info\") {\r\n return <dso-icon icon=\"status-info\"></dso-icon>;\r\n }\r\n\r\n if (state === \"warning\") {\r\n return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n }\r\n};\r\n\r\n@Component({\r\n tag: \"dso-accordion-section\",\r\n styleUrl: \"accordion-section.scss\",\r\n shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n private accordionState?: AccordionInternalState;\r\n\r\n private sectionBody?: HTMLDivElement;\r\n\r\n private sectionHeading?: HTMLHeadingElement;\r\n\r\n @Element()\r\n host!: HTMLDsoAccordionSectionElement;\r\n\r\n /*\r\n The title of the handle\r\n /\r\n @Prop()\r\n handleTitle?: string;\r\n\r\n /\r\n Which heading element to use.\r\n /\r\n @Prop()\r\n heading: AccordionHeading = \"h2\";\r\n\r\n /\r\n When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n /\r\n @Prop()\r\n handleUrl?: string;\r\n\r\n /\r\n `state` takes precedence over `attachmentCount` and `icon`\r\n /\r\n @Prop()\r\n status?: AccordionSectionState;\r\n\r\n /\r\n `attachmentCount` takes precedence over `icon`\r\n /\r\n @Prop()\r\n attachmentCount?: number;\r\n\r\n /\r\n To set an icon in the heading handle.\r\n /\r\n @Prop()\r\n icon?: string;\r\n\r\n /\r\n The status of the section.\r\n /\r\n @Prop()\r\n statusDescription?: string;\r\n\r\n /\r\n Set the Accordion Section open.\r\n /\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /\r\n Set when this Accordion Section contains or will contain an Accordion.\r\n /\r\n @Prop({ reflect: true })\r\n hasNestedAccordion = false;\r\n\r\n /\r\n Calling this method will set focus to the handle.\r\n /\r\n @Method()\r\n async focusHandle() {\r\n this.handleElementRef?.focus();\r\n }\r\n\r\n @State()\r\n hover = false;\r\n\r\n get containsNestedAccordion() {\r\n return this.host.querySelector(\"dso-accordion\") !== null;\r\n }\r\n\r\n componentWillLoad() {\r\n this.accordion?._getState().then((state) => {\r\n this.accordionState = state;\r\n\r\n forceUpdate(this.host);\r\n });\r\n }\r\n\r\n get isNeutral() {\r\n return this.accordionState?.variant === \"neutral\";\r\n }\r\n\r\n private async scrollIntoView(bodyHeight: number \| undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n log(\r\n `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n bodyHeight,\r\n )}, behavior: ${JSON.stringify(behavior)})`,\r\n );\r\n\r\n const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n if (!bodyClientRect \|\| !headingClientRect \|\| !this.accordionState) {\r\n log(`DSO Toolkit [Accordion Section] returning`);\r\n\r\n return;\r\n }\r\n\r\n // this y is relative to the top of the viewport.\r\n const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n\r\n log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n const box = this.host.getBoundingClientRect();\r\n\r\n const scrollTop = window.scrollY \|\| document.documentElement.scrollTop \|\| document.body.scrollTop;\r\n const clientTop = document.documentElement.clientTop \|\| document.body.clientTop \|\| 0;\r\n const top = box.top + scrollTop - clientTop;\r\n\r\n log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n if (sectionBottomY > window.innerHeight) {\r\n log(\r\n `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n sectionBottomY > window.innerHeight,\r\n )};`,\r\n );\r\n\r\n const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n log(\r\n `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n );\r\n log(\r\n `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n shouldScrollToTopOfSection,\r\n )};`,\r\n );\r\n\r\n window.scrollTo({\r\n top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n behavior,\r\n });\r\n } else if (headingClientRect.top < 0) {\r\n log(\r\n `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n );\r\n\r\n window.scrollTo({\r\n top,\r\n behavior,\r\n });\r\n }\r\n }\r\n\r\n private get accordion() {\r\n return this.host.closest(\"dso-accordion\");\r\n }\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n this.dsoToggleClick.emit({\r\n originalEvent: event,\r\n open: !this.open,\r\n });\r\n };\r\n\r\n private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n this.dsoAnimationStart.emit({\r\n animation: this.open ? \"opening\" : \"closing\",\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n this.dsoAnimationEnd.emit({\r\n open: this.open,\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n /\r\n Emitted when the user activates the toggle button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n /\r\n Event emitted when the Accordion Section starts its toggle animation.\r\n /\r\n @Event({ bubbles: false })\r\n dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n /\r\n Event emitted when the Accordion Section completes its toggle animation.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n private handleElementRef?: HTMLAnchorElement \| HTMLButtonElement;\r\n\r\n render() {\r\n const { variant, reverseAlign } = this.accordionState ?? {};\r\n const hasAddons = !!this.statusDescription \|\| !!this.status \|\| !!this.icon \|\| !!this.attachmentCount;\r\n\r\n return (\r\n <Host\r\n class={{\r\n \"dso-accordion-section\": true,\r\n [\"dso-accordion-\" + variant]: true,\r\n \"dso-nested-accordion\": this.hasNestedAccordion \|\| this.containsNestedAccordion,\r\n \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n }}\r\n hidden={!variant}\r\n onMouseenter={() => (this.hover = true)}\r\n onMouseleave={() => (this.hover = false)}\r\n >\r\n <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n <HandleElement\r\n handleUrl={this.handleUrl}\r\n onClick={this.handleClick}\r\n open={this.open}\r\n handleElementRef={(e) => (this.handleElementRef = e)}\r\n >\r\n {reverseAlign ? (\r\n <Fragment>\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n <HandleIcon icon={this.icon} />\r\n </div>\r\n )}\r\n\r\n <span>{this.handleTitle}</span>\r\n\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n </Fragment>\r\n ) : (\r\n <Fragment>\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n <span>\r\n {this.handleTitle}\r\n {this.isNeutral && (\r\n <dso-icon class=\"info-icon\" icon={this.open \|\| this.hover ? \"info-active\" : \"info\"} />\r\n )}\r\n </span>\r\n\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n </div>\r\n )}\r\n </Fragment>\r\n )}\r\n </HandleElement>\r\n </Handle>\r\n <dso-expandable\r\n class=\"dso-section-body\"\r\n open={this.open}\r\n enableAnimation\r\n minimumHeight={this.isNeutral ? 0 : 4}\r\n onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n >\r\n <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n <slot />\r\n </div>\r\n </dso-expandable>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-action-list-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
-const actionListItemCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;position:relative}:host.dso-has-counter{padding-top:2.5rem;position:relative}:host .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}:host .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}:host>dso-icon{vertical-align:text-top}:host(.divider) .dso-action-list-item::after{border-bottom:0.25rem dashed #6ca4d9;bottom:0;content:\"\";display:block;height:24px;position:absolute;left:calc(2rem + 16px + 16px + 8px - 8px);width:calc(100% - (2rem + 16px + 16px + 8px - 8px))}@media screen and (min-width: 480px){:host(.divider) .dso-action-list-item::after{left:calc(2rem + 16px + 16px + 8px);width:calc(100% - (2rem + 16px + 16px + 8px))}}h3{color:#275937;color:#275937;font-size:1.125rem;font-weight:600;margin-block-end:16px;margin-block-start:0;min-height:48px;padding-block-start:9px}@media screen and (min-width: 480px){h3{font-size:1.25rem}}.dso-action-list-item{display:grid;grid-template-columns:calc(2rem + 16px + 16px + 8px - 8px) 1fr}@media screen and (min-width: 480px){.dso-action-list-item{grid-template-columns:calc(2rem + 16px + 16px + 8px) 1fr}}.dso-action-list-item .dso-step-counter{position:unset}.dso-action-list-item .action-list-item-content{grid-column:2/2}dso-icon{height:48px;width:48px}";
+const actionListItemCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;position:relative}:host .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}:host(.divider) .dso-action-list-item::after{border-bottom:0.25rem dashed #6ca4d9;bottom:0;content:\"\";display:block;height:24px;position:absolute;left:calc(2rem + 16px + 16px + 8px - 8px);width:calc(100% - (2rem + 16px + 16px + 8px - 8px))}@media screen and (min-width: 480px){:host(.divider) .dso-action-list-item::after{left:calc(2rem + 16px + 16px + 8px);width:calc(100% - (2rem + 16px + 16px + 8px))}}h3{color:#275937;color:#275937;font-size:1.125rem;font-weight:600;margin-block-end:16px;margin-block-start:0;min-height:48px;padding-block-start:9px}@media screen and (min-width: 480px){h3{font-size:1.25rem}}.dso-action-list-item{display:grid;grid-template-columns:calc(2rem + 16px + 16px + 8px - 8px) 1fr}@media screen and (min-width: 480px){.dso-action-list-item{grid-template-columns:calc(2rem + 16px + 16px + 8px) 1fr}}.dso-action-list-item .dso-step-counter{position:unset}.dso-action-list-item .action-list-item-content{grid-column:2/2}dso-icon{height:48px;width:48px}";
 const ActionListItem = /*@__PURE__*/ proxyCustomElement(class ActionListItem extends HTMLElement {
   constructor() {

package/dist/components/dso-action-list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-action-list-item.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,~~4+CAA4+C~~;;~~MCOz/C~~,cAAc;;;;;;;oBAiBd,KAAK;mBAMN,KAAK;mBAML,KAAK;;EAEf,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;OAC3B,IAED,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,gBAAU,IAAI,EAAC,gBAAgB,GAAY,GAAG,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7G,WAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,SAAS,IAAI,cAAK,IAAI,CAAC,SAAS,CAAM,EAC5C,eAAQ,CACJ,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@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/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n @include step-counter.step-counter();\r\n\r\n display: block;\r\n padding-block: action-list-item-variables.$padding-vertical;\r\n position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n .dso-action-list-item {\r\n &::after {\r\n border-bottom: 0.25rem dashed colors.$lichtblauw;\r\n bottom: 0;\r\n content: \"\";\r\n display: block;\r\n height: units.$u3;\r\n position: absolute;\r\n left: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n width: calc(100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin));\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n left: action-list-variables.$content-indent;\r\n width: calc(100% - action-list-variables.$content-indent);\r\n }\r\n }\r\n }\r\n}\r\n\r\nh3 {\r\n @include headings.base();\r\n @include headings.h3();\r\n\r\n margin-block-end: units.$u2;\r\n margin-block-start: 0;\r\n min-height: units.$u6;\r\n padding-block-start: 9px;\r\n}\r\n\r\n.dso-action-list-item {\r\n display: grid;\r\n grid-template-columns: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin) 1fr;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n grid-template-columns: action-list-variables.$content-indent 1fr;\r\n }\r\n\r\n .dso-step-counter {\r\n position: unset;\r\n }\r\n\r\n .action-list-item-content {\r\n grid-column: 2 / 2;\r\n }\r\n}\r\n\r\ndso-icon {\r\n height: units.$u6;\r\n width: units.$u6;\r\n}\r\n","import { h, Component, ComponentInterface, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-action-list-item\",\r\n styleUrl: \"action-list-item.scss\",\r\n shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n /*\r\n The step of the Action List Item.\r\n /\r\n @Prop()\r\n step!: number;\r\n\r\n /\r\n The title of the item.\r\n /\r\n @Prop()\r\n itemTitle?: string;\r\n\r\n /\r\n Show flow line to next step\r\n /\r\n @Prop()\r\n flowLine = false;\r\n\r\n /\r\n When there is a warning.\r\n /\r\n @Prop()\r\n warning = false;\r\n\r\n /\r\n Places a dashed line at the bottom of the item.\r\n */\r\n @Prop()\r\n divider = false;\r\n\r\n render() {\r\n return (\r\n <Host\r\n class={{\r\n divider: this.divider,\r\n \"flow-line\": this.flowLine,\r\n }}\r\n >\r\n <div class=\"dso-action-list-item\">\r\n {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n <div class=\"action-list-item-content\">\r\n {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n <slot />\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-action-list-item.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,6zCAA6zC;;MCO10C,cAAc;;;;;;;oBAiBd,KAAK;mBAMN,KAAK;mBAML,KAAK;;EAEf,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;OAC3B,IAED,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,gBAAU,IAAI,EAAC,gBAAgB,GAAY,GAAG,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7G,WAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,SAAS,IAAI,cAAK,IAAI,CAAC,SAAS,CAAM,EAC5C,eAAQ,CACJ,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@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/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n @include step-counter.step-counter();\r\n\r\n display: block;\r\n padding-block: action-list-item-variables.$padding-vertical;\r\n position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n .dso-action-list-item {\r\n &::after {\r\n border-bottom: 0.25rem dashed colors.$lichtblauw;\r\n bottom: 0;\r\n content: \"\";\r\n display: block;\r\n height: units.$u3;\r\n position: absolute;\r\n left: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n width: calc(100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin));\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n left: action-list-variables.$content-indent;\r\n width: calc(100% - action-list-variables.$content-indent);\r\n }\r\n }\r\n }\r\n}\r\n\r\nh3 {\r\n @include headings.base();\r\n @include headings.h3();\r\n\r\n margin-block-end: units.$u2;\r\n margin-block-start: 0;\r\n min-height: units.$u6;\r\n padding-block-start: 9px;\r\n}\r\n\r\n.dso-action-list-item {\r\n display: grid;\r\n grid-template-columns: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin) 1fr;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n grid-template-columns: action-list-variables.$content-indent 1fr;\r\n }\r\n\r\n .dso-step-counter {\r\n position: unset;\r\n }\r\n\r\n .action-list-item-content {\r\n grid-column: 2 / 2;\r\n }\r\n}\r\n\r\ndso-icon {\r\n height: units.$u6;\r\n width: units.$u6;\r\n}\r\n","import { h, Component, ComponentInterface, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-action-list-item\",\r\n styleUrl: \"action-list-item.scss\",\r\n shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n /*\r\n The step of the Action List Item.\r\n /\r\n @Prop()\r\n step!: number;\r\n\r\n /\r\n The title of the item.\r\n /\r\n @Prop()\r\n itemTitle?: string;\r\n\r\n /\r\n Show flow line to next step\r\n /\r\n @Prop()\r\n flowLine = false;\r\n\r\n /\r\n When there is a warning.\r\n /\r\n @Prop()\r\n warning = false;\r\n\r\n /\r\n Places a dashed line at the bottom of the item.\r\n */\r\n @Prop()\r\n divider = false;\r\n\r\n render() {\r\n return (\r\n <Host\r\n class={{\r\n divider: this.divider,\r\n \"flow-line\": this.flowLine,\r\n }}\r\n >\r\n <div class=\"dso-action-list-item\">\r\n {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n <div class=\"action-list-item-content\">\r\n {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n <slot />\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-action-list.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const actionListCss = ":host{background-color:#e1ecf7;display:block;padding-block:16px;padding-inline:16px}@media screen and (min-width: 768px){:host{padding-inline-end:96px}}*,*::after,*::before{box-sizing:border-box}h2{color:#275937;color:#275937;font-size:1.25rem;font-weight:700;margin-block:0 16px}@media screen and (min-width: 480px){h2{font-size:1.5rem}}.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px - 8px)}@media screen and (min-width: 480px){.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px)}}";
+const actionListCss = ":host{display:block;padding-block:16px;padding-inline:16px;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}@media screen and (min-width: 768px){:host{padding-inline-end:96px}}:host a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}*,*::after,*::before{box-sizing:border-box}h2{color:#275937;color:#275937;font-size:1.25rem;font-weight:700;margin-block:0 16px}@media screen and (min-width: 480px){h2{font-size:1.5rem}}.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px - 8px)}@media screen and (min-width: 480px){.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px)}}";
 const ActionList = /*@__PURE__*/ proxyCustomElement(class ActionList extends HTMLElement {
   constructor() {

package/dist/components/dso-action-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-action-list.js","mappings":";;AAAA,MAAM,aAAa,GAAG,~~0hBAA0hB~~;;~~MCOniB~~,UAAU;;;;;;;EAOrB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cAAK,IAAI,CAAC,SAAS,CAAM,EACzB,WAAK,KAAK,EAAC,yBAAyB,IAClC,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@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/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n ~~background-color: colors.$lichtblauw-20;\r\n~~ display: block;\r\n padding-block: action-list-variables.$padding-block;\r\n padding-inline: units.$u2;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n padding-inline-end: units.$u12;\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n @include headings.base();\r\n @include headings.h2();\r\n\r\n margin-block: 0 units.$u2;\r\n}\r\n\r\n.dso-action-list-content {\r\n padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n padding-inline-start: action-list-variables.$content-indent;\r\n }\r\n}\r\n","import { h, Component, Host, ComponentInterface, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-action-list\",\r\n styleUrl: \"action-list.scss\",\r\n shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n /*\r\n The title.\r\n */\r\n @Prop()\r\n listTitle!: string;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <h2>{this.listTitle}</h2>\r\n <div class=\"dso-action-list-content\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-action-list.js","mappings":";;AAAA,MAAM,aAAa,GAAG,grCAAgrC;;MCOzrC,UAAU;;;;;;;EAOrB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cAAK,IAAI,CAAC,SAAS,CAAM,EACzB,WAAK,KAAK,EAAC,yBAAyB,IAClC,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@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/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: action-list-variables.$padding-block;\r\n padding-inline: units.$u2;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n padding-inline-end: units.$u12;\r\n }\r\n\r\n @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n @include headings.base();\r\n @include headings.h2();\r\n\r\n margin-block: 0 units.$u2;\r\n}\r\n\r\n.dso-action-list-content {\r\n padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n padding-inline-start: action-list-variables.$content-indent;\r\n }\r\n}\r\n","import { h, Component, Host, ComponentInterface, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-action-list\",\r\n styleUrl: \"action-list.scss\",\r\n shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n /*\r\n The title.\r\n */\r\n @Prop()\r\n listTitle!: string;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <h2>{this.listTitle}</h2>\r\n <div class=\"dso-action-list-content\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-card.js CHANGED Viewed

@@ -9,7 +9,7 @@ const isInteractiveElement = (element) => {
     element.tagName.startsWith("DSO-TOGGLETIP"));
 };
-const cardCss = ":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:not(.dso-primary,.dso-secondary,.dso-tertiary).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-download\")}a:not(.dso-primary,.dso-secondary,.dso-tertiary).download:hover,a:not(.dso-primary,.dso-secondary,.dso-tertiary).download:focus{background-image:url(\"./dso-icons.svg#img-download-scampi\")}a:not(.dso-primary,.dso-secondary,.dso-tertiary).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-external-link\")}a:not(.dso-primary,.dso-secondary,.dso-tertiary).extern:hover,a:not(.dso-primary,.dso-secondary,.dso-tertiary).extern:focus{background-image:url(\"./dso-icons.svg#img-external-link-scampi\")}a:not(.dso-primary,.dso-secondary,.dso-tertiary)[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-call-grasgroen\")}a:not(.dso-primary,.dso-secondary,.dso-tertiary)[href^=\"tel:\"]:hover,a:not(.dso-primary,.dso-secondary,.dso-tertiary)[href^=\"tel:\"]:focus{background-image:url(\"./dso-icons.svg#img-call-scampi\")}a:not(.dso-primary,.dso-secondary,.dso-tertiary)[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-email-grasgroen\")}a:not(.dso-primary,.dso-secondary,.dso-tertiary)[href^=\"mailto:\"]:hover,a:not(.dso-primary,.dso-secondary,.dso-tertiary)[href^=\"mailto:\"]:focus{background-image:url(\"./dso-icons.svg#img-email-scampi\")}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}:host(:hover) .dso-card-heading a{color:#275937;text-decoration:underline}.dso-card-heading a{text-decoration:none}.heading-anchor{color:#275937;display:flex}.heading-anchor dso-icon{flex-shrink:0}";
+const cardCss = ":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-download\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:url(\"./dso-icons.svg#img-download-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-external-link\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:url(\"./dso-icons.svg#img-external-link-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-call-grasgroen\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:url(\"./dso-icons.svg#img-call-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-email-grasgroen\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:url(\"./dso-icons.svg#img-email-scampi\")}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}:host(:hover) .dso-card-heading a{color:#275937;text-decoration:underline}.dso-card-heading a{text-decoration:none}.heading-anchor{color:#275937;display:flex}.heading-anchor dso-icon{flex-shrink:0}";
 const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
   constructor() {

package/dist/components/dso-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-card.js","mappings":";;;;AAAO,MAAM,oBAAoB,GAAG,CAAC,OAAoB;EACvD,QACE,OAAO,YAAY,iBAAiB;IACpC,OAAO,YAAY,iBAAiB;IACpC,OAAO,YAAY,gBAAgB;IACnC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,eAAe,CAAC,EAC3C;AACJ,CAAC;;ACPD,MAAM,OAAO,GAAG,~~i8EAAi8E~~;;~~MCYp8E~~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","names":[],"sources":["src/utils/is-interactive-element.ts","src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n return (\r\n element instanceof HTMLButtonElement \|\|\r\n element instanceof HTMLAnchorElement \|\|\r\n element instanceof HTMLInputElement \|\|\r\n element.tagName.startsWith(\"DSO-TOGGLETIP\")\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/card\";\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n @include card.root();\r\n\r\n display: block;\r\n}\r\n\r\n:host(:hover) {\r\n .dso-card-heading a {\r\n color: card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n}\r\n\r\n.dso-card-heading a {\r\n text-decoration: none;\r\n}\r\n\r\n.heading-anchor {\r\n color: card.$heading-anchor-color;\r\n display: flex;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-card\",\r\n styleUrl: \"card.scss\",\r\n shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoCardElement;\r\n\r\n /*\r\n Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable.\r\n \r\n @deprecated Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor).\r\n /\r\n @Prop({ reflect: true })\r\n clickable = true;\r\n\r\n /\r\n Presentation of image in header.\r\n * - \"normal\" (\"24 x 24\").\r\n * - \"wide\" (\"30 x 26\")\r\n /\r\n @Prop({ reflect: true })\r\n imageShape: ImageShape = \"normal\";\r\n\r\n /\r\n The URL to which the Card heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /\r\n Emitted when the Card is clickable and the user clicked the Card.\r\n */\r\n @Event()\r\n dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| (!this.clickable && !this.href)) {\r\n return;\r\n }\r\n\r\n let element: HTMLElement \| null = e.target;\r\n\r\n while (element !== this.host && element !== null) {\r\n if (isInteractiveElement(element) \|\| element === null) {\r\n return;\r\n }\r\n\r\n if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n element = element.parentNode.host;\r\n } else {\r\n element = element.parentElement;\r\n }\r\n }\r\n\r\n return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\"[slot='selectable']\");\r\n }\r\n\r\n get imageSlottedElement() {\r\n return this.host.querySelector(\"[slot='image']\");\r\n }\r\n\r\n get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n get interactionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='interactions']\");\r\n }\r\n\r\n render() {\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n const hasImage = this.imageSlottedElement !== null;\r\n\r\n return (\r\n <Host onClick={(e: MouseEvent) => this.clickEventHandler(e)} is-selectable={isSelectable} has-image={hasImage}>\r\n <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n <slot name=\"selectable\" />\r\n </div>\r\n <div class=\"dso-card-image\" hidden={!hasImage}>\r\n <slot name=\"image\" />\r\n </div>\r\n <div class=\"dso-card-heading\">\r\n {this.headingSlottedElement instanceof HTMLAnchorElement \|\| !this.href ? (\r\n <slot name=\"heading\" />\r\n ) : (\r\n <a href={this.href} class=\"heading-anchor\">\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )}\r\n {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n </div>\r\n <div class=\"dso-card-content\">\r\n <slot name=\"content\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-card.js","mappings":"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","names":[],"sources":["src/utils/is-interactive-element.ts","src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n return (\r\n element instanceof HTMLButtonElement \|\|\r\n element instanceof HTMLAnchorElement \|\|\r\n element instanceof HTMLInputElement \|\|\r\n element.tagName.startsWith(\"DSO-TOGGLETIP\")\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/card\";\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n @include card.root();\r\n\r\n display: block;\r\n}\r\n\r\n:host(:hover) {\r\n .dso-card-heading a {\r\n color: card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n}\r\n\r\n.dso-card-heading a {\r\n text-decoration: none;\r\n}\r\n\r\n.heading-anchor {\r\n color: card.$heading-anchor-color;\r\n display: flex;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-card\",\r\n styleUrl: \"card.scss\",\r\n shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoCardElement;\r\n\r\n /*\r\n Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable.\r\n \r\n @deprecated Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor).\r\n /\r\n @Prop({ reflect: true })\r\n clickable = true;\r\n\r\n /\r\n Presentation of image in header.\r\n * - \"normal\" (\"24 x 24\").\r\n * - \"wide\" (\"30 x 26\")\r\n /\r\n @Prop({ reflect: true })\r\n imageShape: ImageShape = \"normal\";\r\n\r\n /\r\n The URL to which the Card heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /\r\n Emitted when the Card is clickable and the user clicked the Card.\r\n */\r\n @Event()\r\n dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| (!this.clickable && !this.href)) {\r\n return;\r\n }\r\n\r\n let element: HTMLElement \| null = e.target;\r\n\r\n while (element !== this.host && element !== null) {\r\n if (isInteractiveElement(element) \|\| element === null) {\r\n return;\r\n }\r\n\r\n if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n element = element.parentNode.host;\r\n } else {\r\n element = element.parentElement;\r\n }\r\n }\r\n\r\n return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\"[slot='selectable']\");\r\n }\r\n\r\n get imageSlottedElement() {\r\n return this.host.querySelector(\"[slot='image']\");\r\n }\r\n\r\n get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n get interactionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='interactions']\");\r\n }\r\n\r\n render() {\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n const hasImage = this.imageSlottedElement !== null;\r\n\r\n return (\r\n <Host onClick={(e: MouseEvent) => this.clickEventHandler(e)} is-selectable={isSelectable} has-image={hasImage}>\r\n <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n <slot name=\"selectable\" />\r\n </div>\r\n <div class=\"dso-card-image\" hidden={!hasImage}>\r\n <slot name=\"image\" />\r\n </div>\r\n <div class=\"dso-card-heading\">\r\n {this.headingSlottedElement instanceof HTMLAnchorElement \|\| !this.href ? (\r\n <slot name=\"heading\" />\r\n ) : (\r\n <a href={this.href} class=\"heading-anchor\">\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )}\r\n {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n </div>\r\n <div class=\"dso-card-content\">\r\n <slot name=\"content\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-date-picker.js CHANGED Viewed

@@ -44,12 +44,24 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     this.dsoKeyUp = createEvent(this, "dsoKeyUp", 7);
     this.dsoKeyDown = createEvent(this, "dsoKeyDown", 7);
     this.dsoFocus = createEvent(this, "dsoFocus", 7);
-    this.handleBlur = (event) => {
-      event.stopPropagation();
-      this.dsoBlur.emit({
-        originalEvent: event,
+    this.handleBlur = (e) => {
+      e.stopPropagation();
+      const { target } = e;
+      if (!(target instanceof HTMLInputElement)) {
+        return;
+      }
+      const { validity } = target;
+      const { value, valueAsDate } = this.dateValues(target);
+      const error = this.validityToError(validity);
+      const event = {
         component: "dso-date-picker",
-      });
+        originalEvent: e,
+        validity,
+        value,
+        valueAsDate,
+        error,
+      };
+      this.dsoBlur.emit(event);
     };
     this.handleFocus = (event) => {
       event.stopPropagation();
@@ -77,28 +89,17 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
       if (!(target instanceof HTMLInputElement)) {
         return;
       }
-      const { valueAsDate, validity } = target;
+      const { validity } = target;
+      const { value, valueAsDate } = this.dateValues(target);
+      const error = this.validityToError(validity);
       const event = {
         component: "dso-date-picker",
         originalEvent: e,
         validity,
-        value: parseToDutchFormat(valueAsDate),
-        valueAsDate: valueAsDate !== null && valueAsDate !== void 0 ? valueAsDate : undefined,
+        value,
+        valueAsDate,
+        error,
       };
-      if (validity.valueMissing) {
-        event.error = "required";
-      }
-      else if (validity.rangeUnderflow) {
-        event.error = "min-range";
-        event.valueAsDate = undefined;
-      }
-      else if (validity.rangeOverflow) {
-        event.error = "max-range";
-        event.valueAsDate = undefined;
-      }
-      else if (!validity.valid) {
-        event.error = "invalid";
-      }
       this.dsoDateChange.emit(event);
     };
     this.name = "dso-date";
@@ -112,6 +113,28 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     this.min = undefined;
     this.max = undefined;
   }
+  dateValues(target) {
+    const { valueAsDate, validity } = target;
+    return {
+      value: parseToDutchFormat(valueAsDate),
+      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,
+    };
+  }
+  validityToError(validity) {
+    if (validity.valueMissing) {
+      return "required";
+    }
+    if (validity.rangeUnderflow) {
+      return "min-range";
+    }
+    if (validity.rangeOverflow) {
+      return "max-range";
+    }
+    if (!validity.valid) {
+      return "invalid";
+    }
+    return undefined;
+  }
   render() {
     var _a;
     return (h("input", { type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));

package/dist/components/dso-date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-date-picker.js","mappings":"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","names":["DsoDatePicker"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/*\r\n dd-mm-yyyy to yyyy-mm-dd\r\n /\r\nexport function parseToValueFormat(value: string \| undefined): string \| undefined {\r\n if (!value) {\r\n return;\r\n }\r\n\r\n const matches = value.split(\"-\");\r\n\r\n if (\r\n matches.length === 3 &&\r\n typeof matches[0] === \"string\" &&\r\n typeof matches[1] === \"string\" &&\r\n typeof matches[2] === \"string\"\r\n ) {\r\n const [d, m, y] = matches;\r\n\r\n const dd = d.padStart(2, \"0\");\r\n const mm = m.padStart(2, \"0\");\r\n const yyyy = y.padStart(4, \"0\");\r\n\r\n return [yyyy, mm, dd].join(\"-\");\r\n }\r\n\r\n return value;\r\n}\r\n\r\n/\r\n yyyy-mm-dd to dd-mm-yyyy\r\n /\r\nexport function parseToDutchFormat(date: Date \| null): string {\r\n if (!date) {\r\n return \"\";\r\n }\r\n\r\n const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n display: block;\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n .dso-date__input {\r\n border-color: colors.$danger-color;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__input {\r\n @include form-control.root();\r\n\r\n &::-webkit-calendar-picker-indicator {\r\n position: relative;\r\n inset-inline-end: -8px;\r\n\r\n font-size: 1.75rem;\r\n\r\n filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n tag: \"dso-date-picker\",\r\n styleUrl: \"date-picker.scss\",\r\n shadow: false,\r\n scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n /\r\n Reference to host HTML element.\r\n /\r\n @Element()\r\n element!: HTMLDsoDatePickerElement;\r\n\r\n /\r\n Name of the date picker input.\r\n /\r\n @Prop()\r\n name = \"dso-date\";\r\n\r\n /\r\n Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n /\r\n @Prop()\r\n identifier: string \| undefined;\r\n\r\n /\r\n Makes the date picker input component disabled. This prevents users from being able to\r\n * interact with the input, and conveys its inactive state to assistive technologies.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Should the input be marked as required?\r\n /\r\n @Prop({ reflect: true })\r\n required = false;\r\n\r\n /\r\n Is input invalid?\r\n /\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /\r\n ID of element that describes the input element\r\n /\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /\r\n Should the input be focused on load?\r\n /\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /\r\n Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n /\r\n @Prop({ reflect: true })\r\n value = \"\";\r\n\r\n /\r\n Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n /\r\n @Prop()\r\n min: string \| undefined;\r\n\r\n /\r\n Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n /\r\n @Prop()\r\n max: string \| undefined;\r\n\r\n /\r\n Events section.\r\n /\r\n\r\n /\r\n Event emitted when a date is selected.\r\n /\r\n @Event()\r\n dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n /\r\n Event emitted the date picker input is blurred.\r\n /\r\n @Event()\r\n dsoBlur!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n /\r\n Event emitted on key up in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted on key down in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted the date picker input is focused.\r\n */\r\n @Event()\r\n dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n private handleBlur = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoBlur.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoFocus.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleKeyUp = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyUp.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyDown.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleInputChange = (e: Event) => {\r\n const target = e.target;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { valueAsDate, validity } = target;\r\n\r\n const event: DatePickerChangeEvent = {\r\n component: \"dso-date-picker\",\r\n originalEvent: e,\r\n validity,\r\n value: parseToDutchFormat(valueAsDate),\r\n valueAsDate: valueAsDate ?? undefined,\r\n };\r\n\r\n if (validity.valueMissing) {\r\n event.error = \"required\";\r\n } else if (validity.rangeUnderflow) {\r\n event.error = \"min-range\";\r\n event.valueAsDate = undefined;\r\n } else if (validity.rangeOverflow) {\r\n event.error = \"max-range\";\r\n event.valueAsDate = undefined;\r\n } else if (!validity.valid) {\r\n event.error = \"invalid\";\r\n }\r\n\r\n this.dsoDateChange.emit(event);\r\n };\r\n\r\n render() {\r\n return (\r\n <input\r\n type=\"date\"\r\n id={this.identifier}\r\n class=\"dso-date__input\"\r\n value={parseToValueFormat(this.value)}\r\n name={this.name}\r\n min={parseToValueFormat(this.min)}\r\n max={parseToValueFormat(this.max)}\r\n disabled={this.disabled \|\| undefined}\r\n required={this.required \|\| undefined}\r\n aria-autocomplete=\"none\"\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={this.describedBy}\r\n autoComplete=\"off\"\r\n autofocus={this.dsoAutofocus \|\| undefined}\r\n onBlur={this.handleBlur}\r\n onFocus={this.handleFocus}\r\n onKeyUp={this.handleKeyUp}\r\n onKeyDown={this.handleKeyDown}\r\n onChange={this.handleInputChange}\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-date-picker.js","mappings":"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","names":["DsoDatePicker"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/*\r\n dd-mm-yyyy to yyyy-mm-dd\r\n /\r\nexport function parseToValueFormat(value: string \| undefined): string \| undefined {\r\n if (!value) {\r\n return;\r\n }\r\n\r\n const matches = value.split(\"-\");\r\n\r\n if (\r\n matches.length === 3 &&\r\n typeof matches[0] === \"string\" &&\r\n typeof matches[1] === \"string\" &&\r\n typeof matches[2] === \"string\"\r\n ) {\r\n const [d, m, y] = matches;\r\n\r\n const dd = d.padStart(2, \"0\");\r\n const mm = m.padStart(2, \"0\");\r\n const yyyy = y.padStart(4, \"0\");\r\n\r\n return [yyyy, mm, dd].join(\"-\");\r\n }\r\n\r\n return value;\r\n}\r\n\r\n/\r\n yyyy-mm-dd to dd-mm-yyyy\r\n /\r\nexport function parseToDutchFormat(date: Date \| null): string {\r\n if (!date) {\r\n return \"\";\r\n }\r\n\r\n const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n display: block;\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n .dso-date__input {\r\n border-color: colors.$danger-color;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__input {\r\n @include form-control.root();\r\n\r\n &::-webkit-calendar-picker-indicator {\r\n position: relative;\r\n inset-inline-end: -8px;\r\n\r\n font-size: 1.75rem;\r\n\r\n filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport {\r\n DatePickerBlurEvent,\r\n DatePickerChangeEvent,\r\n DatePickerError,\r\n DatePickerFocusEvent,\r\n DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n tag: \"dso-date-picker\",\r\n styleUrl: \"date-picker.scss\",\r\n shadow: false,\r\n scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n /\r\n Reference to host HTML element.\r\n /\r\n @Element()\r\n element!: HTMLDsoDatePickerElement;\r\n\r\n /\r\n Name of the date picker input.\r\n /\r\n @Prop()\r\n name = \"dso-date\";\r\n\r\n /\r\n Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n /\r\n @Prop()\r\n identifier: string \| undefined;\r\n\r\n /\r\n Makes the date picker input component disabled. This prevents users from being able to\r\n * interact with the input, and conveys its inactive state to assistive technologies.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Should the input be marked as required?\r\n /\r\n @Prop({ reflect: true })\r\n required = false;\r\n\r\n /\r\n Is input invalid?\r\n /\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /\r\n ID of element that describes the input element\r\n /\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /\r\n Should the input be focused on load?\r\n /\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /\r\n Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n /\r\n @Prop({ reflect: true })\r\n value = \"\";\r\n\r\n /\r\n Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n /\r\n @Prop()\r\n min: string \| undefined;\r\n\r\n /\r\n Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n /\r\n @Prop()\r\n max: string \| undefined;\r\n\r\n /\r\n Events section.\r\n /\r\n\r\n /\r\n Event emitted when a date is selected.\r\n /\r\n @Event()\r\n dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n /\r\n Event emitted the date picker input is blurred.\r\n /\r\n @Event()\r\n dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n /\r\n Event emitted on key up in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted on key down in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted the date picker input is focused.\r\n */\r\n @Event()\r\n dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n private handleBlur = (e: FocusEvent) => {\r\n e.stopPropagation();\r\n\r\n const { target } = e;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { validity } = target;\r\n const { value, valueAsDate } = this.dateValues(target);\r\n const error = this.validityToError(validity);\r\n\r\n const event: DatePickerBlurEvent = {\r\n component: \"dso-date-picker\",\r\n originalEvent: e,\r\n validity,\r\n value,\r\n valueAsDate,\r\n error,\r\n };\r\n\r\n this.dsoBlur.emit(event);\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoFocus.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleKeyUp = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyUp.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyDown.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleInputChange = (e: Event) => {\r\n const target = e.target;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { validity } = target;\r\n const { value, valueAsDate } = this.dateValues(target);\r\n const error = this.validityToError(validity);\r\n\r\n const event: DatePickerChangeEvent = {\r\n component: \"dso-date-picker\",\r\n originalEvent: e,\r\n validity,\r\n value,\r\n valueAsDate,\r\n error,\r\n };\r\n\r\n this.dsoDateChange.emit(event);\r\n };\r\n\r\n private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date \| undefined } {\r\n const { valueAsDate, validity } = target;\r\n\r\n return {\r\n value: parseToDutchFormat(valueAsDate),\r\n valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) \|\| undefined,\r\n };\r\n }\r\n\r\n private validityToError(validity: ValidityState): DatePickerError \| undefined {\r\n if (validity.valueMissing) {\r\n return \"required\";\r\n }\r\n\r\n if (validity.rangeUnderflow) {\r\n return \"min-range\";\r\n }\r\n\r\n if (validity.rangeOverflow) {\r\n return \"max-range\";\r\n }\r\n\r\n if (!validity.valid) {\r\n return \"invalid\";\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n render() {\r\n return (\r\n <input\r\n type=\"date\"\r\n id={this.identifier}\r\n class=\"dso-date__input\"\r\n value={parseToValueFormat(this.value)}\r\n name={this.name}\r\n min={parseToValueFormat(this.min)}\r\n max={parseToValueFormat(this.max)}\r\n disabled={this.disabled \|\| undefined}\r\n required={this.required \|\| undefined}\r\n aria-autocomplete=\"none\"\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={this.describedBy}\r\n autoComplete=\"off\"\r\n autofocus={this.dsoAutofocus \|\| undefined}\r\n onBlur={this.handleBlur}\r\n onFocus={this.handleFocus}\r\n onKeyUp={this.handleKeyUp}\r\n onKeyDown={this.handleKeyDown}\r\n onChange={this.handleInputChange}\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-header.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$3 } from './dropdown-menu.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const headerCss = ".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{flex:1 1 12.5rem;margin-inline-end:24px;padding-bottom:16px;padding-top:16px}.dso-header-session.sc-dso-header{display:flex;align-items:center;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .login.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .logout.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .help.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;line-height:1.5}.dso-header-session.sc-dso-header .profile.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header,.dso-header-session.sc-dso-header .profile.sc-dso-header~.help.sc-dso-header{border-left:3px solid #ccc;margin-left:8px;padding-left:8px}.dso-header-session.sc-dso-header .help.sc-dso-header a.sc-dso-header,.dso-header-session.sc-dso-header .help.sc-dso-header button.sc-dso-header{display:flex}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:center;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto;display:flex;align-items:center}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem !important;top:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
+const headerCss = ".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{flex:1 1 12.5rem;margin-inline-end:24px;padding-bottom:16px;padding-top:16px}.dso-header-session.sc-dso-header{display:flex;align-items:center;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .login.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .logout.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .help.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;line-height:1.5}.dso-header-session.sc-dso-header .profile.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header,.dso-header-session.sc-dso-header .profile.sc-dso-header~.help.sc-dso-header{border-left:3px solid #ccc;margin-left:8px;padding-left:8px}.dso-header-session.sc-dso-header .help.sc-dso-header a.sc-dso-header,.dso-header-session.sc-dso-header .help.sc-dso-header button.sc-dso-header{display:flex}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:center;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto;display:flex;align-items:center}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus-visible,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem !important;top:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
 const minDesktopViewportWidth = 992;
 const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {