npm - @dso-toolkit/core - Versions diffs - 83.0.0 → 84.0.0 - Mend

@dso-toolkit/core 83.0.0 → 84.0.0

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

Files changed (1140) hide show

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
+import { p as proxyCustomElement, H, e as createEvent, h, t as transformTag } from './p-BeWimuZg.js';
 /**
  * dd-mm-yyyy to yyyy-mm-dd
@@ -33,12 +33,14 @@ function parseToDutchFormat(date) {
     return [dd, mm, yyyy].join("-");
 }
-const datePickerCss = ".sc-dso-date-picker-h{display:block}[invalid].sc-dso-date-picker-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker{border-color:#ce3f51}.dso-date__input.sc-dso-date-picker{display:block;inline-size:100%;block-size:40px;padding-block:6px;padding-inline:14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{inline-size:auto}.dso-date__input.sc-dso-date-picker::-webkit-calendar-picker-indicator{position:relative;inset-inline-end:-8px;font-size:1.75rem;filter:invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%)}";
+const datePickerCss = () => `.sc-dso-date-picker-h{display:block}[invalid].sc-dso-date-picker-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker{border-color:#ce3f51}.dso-date__input.sc-dso-date-picker{display:block;inline-size:100%;block-size:40px;padding-block:6px;padding-inline:14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{inline-size:auto}.dso-date__input.sc-dso-date-picker::-webkit-calendar-picker-indicator{position:relative;inset-inline-end:-8px;font-size:1.75rem;filter:invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%)}`;
 const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.dsoDateChange = createEvent(this, "dsoDateChange", 7);
         this.dsoBlur = createEvent(this, "dsoBlur", 7);
         this.dsoKeyUp = createEvent(this, "dsoKeyUp", 7);
@@ -151,7 +153,7 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
         return (h("input", { key: 'c1b94c74d3a2858b7e6aa5adb59265d2e0c4cead', 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 }));
     }
     get element() { return this; }
-    static get style() { return datePickerCss; }
+    static get style() { return datePickerCss(); }
 }, [258, "dso-date-picker", {
         "name": [1],
         "identifier": [1],
@@ -171,8 +173,8 @@ function defineCustomElement$1() {
     const components = ["dso-date-picker"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-date-picker":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsoDatePicker$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), DsoDatePicker$1);
             }
             break;
     } });

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

	@@ -1 +1 @@
1	- {"file":"dso-date-picker.js","mappings":"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","names":["DsoDatePicker","__stencil_proxyCustomElement","HTMLElement"],"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, Element, Event, EventEmitter, Prop, h } 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 { parseToDutchFormat, parseToValueFormat } 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}
1	+ {"file":"dso-date-picker.js","mappings":"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","names":["DsoDatePicker","__stencil_proxyCustomElement","HTMLElement"],"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, Element, Event, EventEmitter, Prop, h } 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 { parseToDutchFormat, parseToValueFormat } 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/bundle/dso-document-card.js CHANGED Viewed

@@ -1,13 +1,15 @@
-import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h } from './p-Dm38fPV4.js';
+import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h, t as transformTag } from './p-BeWimuZg.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-CXctuPtC.js';
+import { d as defineCustomElement$2 } from './p-BLHKEAmx.js';
-const documentCardCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:16px !important}}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}";
+const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:16px !important}}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}`;
 const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoDocumentCardClick = createEvent(this, "dsoDocumentCardClick", 7);
     }
@@ -33,7 +35,7 @@ const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends
         return (h("div", { key: 'fa7b46b5f893de1939b774c925d34f7f18e15571', class: "dso-document-card-container" }, h("div", { key: '682a8fa1673b1c38ca16fc6f4f1a274719adb9f4', class: "dso-document-card-heading" }, h("a", { key: 'ee6c434a98e009753e38f92ef38580970025a58b', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'a14a1a16baafedd1806bf3417dea1135b9cfdb41', class: "icon-container" }, h("dso-icon", { key: '843ee861b72689523ce5af6479a3aa1a9ffd84c2', icon: "chevron-right" }), h("slot", { key: '918b8e3797b99bd07902ab849f95e3a5b2bf1531', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '226986aeeb3d0091f274697b67ebd8de3c358c53', name: "meta" })), h("div", { key: 'e0d5195cfa6feb274e4df486b4ca5869f6654ada', class: "dso-document-card-type" }, h("slot", { key: '089ae1f70596e1bff98b74acad76a0c6f00e665e', name: "type" })), h("div", { key: '6ae6d7023a4b045f7120977d5bccd9b3edaf5ccd', class: "dso-document-card-status" }, h("slot", { key: '832d0c2fda8e6fab9ff211d3fbbdd3a8bdf3bbce', name: "status" }))));
     }
     get host() { return this; }
-    static get style() { return documentCardCss; }
+    static get style() { return documentCardCss(); }
 }, [257, "dso-document-card", {
         "href": [513],
         "active": [516]
@@ -45,12 +47,12 @@ function defineCustomElement$1() {
     const components = ["dso-document-card", "dso-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-document-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DocumentCard);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), DocumentCard);
             }
             break;
         case "dso-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/bundle/dso-document-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-document-card.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,~~wxDAAwxD~~;;~~MCiBnyD~~,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA~~;;;;;;;~~IAwBvB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAGtB,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAYA,CAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD;;AAGF,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AAGlG,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;;IAGjD,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1B,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAG,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CAClB,CACL,EACH,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACrD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/document-card/document-card.scss?tag=dso-document-card&encapsulation=shadow","src/components/document-card/document-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/document-card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-document-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n\r\n .dso-document-card-heading {\r\n align-items: center;\r\n display: flex;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n &:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: document-card.$background-color-hover;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-document-card-container {\r\n background-color: document-card.$background-color-active;\r\n }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n flex-shrink: 0 !important;\r\n align-self: end !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u2 !important;\r\n }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: inline !important;\r\n color: colors.$bosgroen !important;\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n line-height: 1.25 !important;\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n}\r\n\r\n.heading-anchor {\r\n color: document-card.$heading-anchor-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: document-card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: document-card.$heading-anchor-color;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n\r\n .icon-container {\r\n position: relative;\r\n padding-inline-end: units.$u3;\r\n\r\n dso-icon {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n inset-block-end: -3px;\r\n block-size: units.$u3;\r\n inline-size: units.$u3;\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"type\"]) {\r\n --_dt-info-button-margin-inline-start: 0;\r\n\r\n display: flex !important;\r\n gap: units.$u1 !important;\r\n}\r\n\r\n.dso-document-card-heading + .dso-document-card-type,\r\n.dso-document-card-heading + .dso-document-card-status,\r\n.dso-document-card-type + .dso-document-card-status {\r\n margin-block-start: units.$u1;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/*\r\n @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot type - A slot to hold type of document with an optional `Toggletip`.\r\n * @slot status - A slot to hold some status information on the document.\r\n /\r\n@Component({\r\n tag: \"dso-document-card\",\r\n styleUrl: \"document-card.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoDocumentCardElement;\r\n\r\n /\r\n The URL to which the DocumentCard heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href!: string \| undefined;\r\n\r\n /\r\n Makes the DocumentCard active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the DocumentCard heading is clicked.\r\n */\r\n @Event()\r\n dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\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.href) {\r\n return;\r\n }\r\n\r\n return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get metaSlottedElement() {\r\n return this.host.querySelector(\"[slot='meta']\");\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"dso-document-card-container\">\r\n <div class=\"dso-document-card-heading\">\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <span class=\"icon-container\">\r\n <dso-icon icon=\"chevron-right\" />\r\n <slot name=\"heading\" />\r\n </span>\r\n </a>\r\n {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n </div>\r\n <div class=\"dso-document-card-type\">\r\n <slot name=\"type\" />\r\n </div>\r\n <div class=\"dso-document-card-status\">\r\n <slot name=\"status\" />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-document-card.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,2xDAA2xD,CAAC;;MCiB9yD,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAwBvB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAGtB,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAYA,CAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD;;AAGF,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AAGlG,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;;IAGjD,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1B,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAG,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CAClB,CACL,EACH,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACrD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/document-card/document-card.scss?tag=dso-document-card&encapsulation=shadow","src/components/document-card/document-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/document-card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-document-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n\r\n .dso-document-card-heading {\r\n align-items: center;\r\n display: flex;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n &:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: document-card.$background-color-hover;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-document-card-container {\r\n background-color: document-card.$background-color-active;\r\n }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n flex-shrink: 0 !important;\r\n align-self: end !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u2 !important;\r\n }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: inline !important;\r\n color: colors.$bosgroen !important;\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n line-height: 1.25 !important;\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n}\r\n\r\n.heading-anchor {\r\n color: document-card.$heading-anchor-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: document-card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: document-card.$heading-anchor-color;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n\r\n .icon-container {\r\n position: relative;\r\n padding-inline-end: units.$u3;\r\n\r\n dso-icon {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n inset-block-end: -3px;\r\n block-size: units.$u3;\r\n inline-size: units.$u3;\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"type\"]) {\r\n --_dt-info-button-margin-inline-start: 0;\r\n\r\n display: flex !important;\r\n gap: units.$u1 !important;\r\n}\r\n\r\n.dso-document-card-heading + .dso-document-card-type,\r\n.dso-document-card-heading + .dso-document-card-status,\r\n.dso-document-card-type + .dso-document-card-status {\r\n margin-block-start: units.$u1;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/*\r\n @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot type - A slot to hold type of document with an optional `Toggletip`.\r\n * @slot status - A slot to hold some status information on the document.\r\n /\r\n@Component({\r\n tag: \"dso-document-card\",\r\n styleUrl: \"document-card.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoDocumentCardElement;\r\n\r\n /\r\n The URL to which the DocumentCard heading links.\r\n /\r\n @Prop({ reflect: true })\r\n href!: string \| undefined;\r\n\r\n /\r\n Makes the DocumentCard active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the DocumentCard heading is clicked.\r\n */\r\n @Event()\r\n dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\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.href) {\r\n return;\r\n }\r\n\r\n return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get metaSlottedElement() {\r\n return this.host.querySelector(\"[slot='meta']\");\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"dso-document-card-container\">\r\n <div class=\"dso-document-card-heading\">\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <span class=\"icon-container\">\r\n <dso-icon icon=\"chevron-right\" />\r\n <slot name=\"heading\" />\r\n </span>\r\n </a>\r\n {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n </div>\r\n <div class=\"dso-document-card-type\">\r\n <slot name=\"type\" />\r\n </div>\r\n <div class=\"dso-document-card-status\">\r\n <slot name=\"status\" />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-document-component.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { D as DocumentComponent, d as defineCustomElement$1 } from './p-CuHWsfA3.js';
+import { D as DocumentComponent, d as defineCustomElement$1 } from './p-_SQrXU6n.js';
 const DsoDocumentComponent = DocumentComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-dropdown-menu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { D as DropdownMenu, d as defineCustomElement$1 } from './p-CYZ_ghQd.js';
+import { D as DropdownMenu, d as defineCustomElement$1 } from './p-Bla3D_SS.js';
 const DsoDropdownMenu = DropdownMenu;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-expandable.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { E as Expandable, d as defineCustomElement$1 } from './p-BsnzmGaW.js';
+import { E as Expandable, d as defineCustomElement$1 } from './p-B1fJHBoE.js';
 const DsoExpandable = Expandable;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,9 +1,9 @@
-import { h, p as proxyCustomElement, H, e as createEvent, f as forceUpdate, d as Host, F as Fragment } from './p-Dm38fPV4.js';
+import { h, p as proxyCustomElement, H, e as createEvent, f as forceUpdate, d as Host, F as Fragment, t as transformTag } from './p-BeWimuZg.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { i as i18n } from './p-C0ZvZbHD.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$3 } from './p-CYZ_ghQd.js';
-import { d as defineCustomElement$2 } from './p-CXctuPtC.js';
+import { d as defineCustomElement$3 } from './p-Bla3D_SS.js';
+import { d as defineCustomElement$2 } from './p-BLHKEAmx.js';
 const translations = {
     en: {
@@ -28,17 +28,18 @@ const translations = {
 };
 const MenuItem = ({ item, onClick, key, ref }) => {
-    return (h("li", { class: clsx({ "dso-active": item.active }), key: key, ref: ref },
-        h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: onClick }, item.label)));
+    return (h("li", { class: clsx({ "dso-active": item.active }), key: key, ref: ref }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: onClick }, item.label)));
 };
-const headerCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) dso-dropdown-menu .dso-dropdown-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) dso-dropdown-menu .dso-dropdown-options{inline-size:375px}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;gap:0.5rem;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-dropdown-menu>.dso-primary,dso-dropdown-menu>.dso-secondary,dso-dropdown-menu>.dso-tertiary{position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary)::after,dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after{content:\"\";display:inline-block}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after{margin-inline-start:8px}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding-block:4px 2px;padding-inline:20px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-block:5px;padding-inline:0;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus-visible,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus-visible,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding-block:3px;padding-inline:20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;inline-size:100%}dso-dropdown-menu button{background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;align-items:center;position:relative}dso-dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}dso-dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}dso-dropdown-menu .dso-dropdown-options ul{margin:0;padding:0;list-style:none}dso-dropdown-menu .dso-dropdown-options ul li a,dso-dropdown-menu .dso-dropdown-options ul li button{display:block;padding:16px;color:#275937;font-size:1.25rem;white-space:pre-wrap;text-decoration:none}dso-dropdown-menu .dso-dropdown-options ul li a:focus-visible,dso-dropdown-menu .dso-dropdown-options ul li button:focus-visible{background-color:#39870c;color:#fff}dso-dropdown-menu .dso-dropdown-options ul li a:hover,dso-dropdown-menu .dso-dropdown-options ul li button:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options ul li a:visited:not(:hover):not(:focus-visible),dso-dropdown-menu .dso-dropdown-options ul li button:visited:not(:hover):not(:focus-visible){color:#275937}dso-dropdown-menu .dso-dropdown-options ul li button{inline-size:100%;text-align:start}dso-dropdown-menu .dso-dropdown-options ul li button dso-icon{margin-inline-start:8px}dso-dropdown-menu .dso-dropdown-options ul li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown dso-dropdown-menu{position:static}.dropdown dso-dropdown-menu .dso-dropdown-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dropdown dso-dropdown-menu>button{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown dso-dropdown-menu>button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:50%;transform:translateY(-50%)}.dropdown dso-dropdown-menu>button:hover,.dropdown dso-dropdown-menu>button:active{cursor:pointer;text-decoration:underline}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}";
+const headerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) dso-dropdown-menu .dso-dropdown-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) dso-dropdown-menu .dso-dropdown-options{inline-size:375px}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;gap:0.5rem;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-dropdown-menu>.dso-primary,dso-dropdown-menu>.dso-secondary,dso-dropdown-menu>.dso-tertiary{position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary)::after,dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after{content:"";display:inline-block}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after{margin-inline-start:8px}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding-block:4px 2px;padding-inline:20px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-block:5px;padding-inline:0;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus-visible,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus-visible,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding-block:3px;padding-inline:20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;inline-size:100%}dso-dropdown-menu button{background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;align-items:center;position:relative}dso-dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}dso-dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}dso-dropdown-menu .dso-dropdown-options ul{margin:0;padding:0;list-style:none}dso-dropdown-menu .dso-dropdown-options ul li a,dso-dropdown-menu .dso-dropdown-options ul li button{display:block;padding:16px;color:#275937;font-size:1.25rem;white-space:pre-wrap;text-decoration:none}dso-dropdown-menu .dso-dropdown-options ul li a:focus-visible,dso-dropdown-menu .dso-dropdown-options ul li button:focus-visible{background-color:#39870c;color:#fff}dso-dropdown-menu .dso-dropdown-options ul li a:hover,dso-dropdown-menu .dso-dropdown-options ul li button:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options ul li a:visited:not(:hover):not(:focus-visible),dso-dropdown-menu .dso-dropdown-options ul li button:visited:not(:hover):not(:focus-visible){color:#275937}dso-dropdown-menu .dso-dropdown-options ul li button{inline-size:100%;text-align:start}dso-dropdown-menu .dso-dropdown-options ul li button dso-icon{margin-inline-start:8px}dso-dropdown-menu .dso-dropdown-options ul li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown dso-dropdown-menu{position:static}.dropdown dso-dropdown-menu .dso-dropdown-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dropdown dso-dropdown-menu>button{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown dso-dropdown-menu>button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:50%;transform:translateY(-50%)}.dropdown dso-dropdown-menu>button:hover,.dropdown dso-dropdown-menu>button:active{cursor:pointer;text-decoration:underline}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}`;
 const minDesktopViewportWidth = 992;
 const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoHeaderClick = createEvent(this, "dsoHeaderClick", 7);
         /**
@@ -172,9 +173,9 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
     static get watchers() { return {
         "mainMenu": ["mainMenuChanged"]
     }; }
-    static get style() { return headerCss; }
+    static get style() { return headerCss(); }
 }, [257, "dso-header", {
-        "mainMenu": [16, "main-menu"],
+        "mainMenu": [16],
         "compact": [1],
         "authStatus": [1, "auth-status"],
         "loginUrl": [1, "login-url"],
@@ -197,17 +198,17 @@ function defineCustomElement$1() {
     const components = ["dso-header", "dso-dropdown-menu", "dso-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Header);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), Header);
             }
             break;
         case "dso-dropdown-menu":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "dso-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/bundle/dso-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-header.js","mappings":";;;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,QAAQ;AACf,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,YAAY,EAAE,MAAM;AACrB,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,QAAQ,EAAE,qBAAqB;AAChC,SAAA;AACF,KAAA;CACF;;ACVM,MAAM,QAAQ,GAAuC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAI;IAC1F,QACE,UAAI,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAA;AAChE,QAAA,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAA,cAAA,EAAgB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,EAAA,EAChF,IAAI,CAAC,KAAK,CACT,CACD;AAET,CAAC;;ACpBD,MAAM,SAAS,GAAG,ivPAAivP;;AC6BnwP,MAAM,uBAAuB,GAAG,GAAG;MAYtB,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,GAAA;;;;;AASE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAqB,EAAE;AAE/B;;;AAGG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAsB,MAAM;AAEnC;;AAEG;AAEH,QAAA,IAAU,CAAA,UAAA,GAAqB,MAAM;AAgBrC;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA2BhB;;AAEG;AAEH,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AAWtB,QAAA,IAAqB,CAAA,qBAAA,GAAuB,SAAS;AAGrD,QAAA,IAAqB,CAAA,qBAAA,GAAG,CAAC;AAOjB,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACnC,YAAA,IAAI,CAAC,qBAAqB,GAAG,SAAS;AACxC,SAAC;QAMO,IAAY,CAAA,YAAA,GAAG,CAAC,CAAa,EAAE,IAA0B,EAAE,OAA6B,KAAI;;AAClG,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;AACvB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;gBACnC,IAAI;AACJ,gBAAA,QAAQ,EAAE,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAE,QAAQ;AAC3B,gBAAA,GAAG,EAAE,CAAA,EAAA,GAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,GAAG,mCAAI,CAAA,EAAA,GAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,0CAAE,GAAG;AAC5C,aAAA,CAAC;AACJ,SAAC;AAIO,QAAA,IAAmB,CAAA,mBAAA,GAAkC,EAAE;AAIvD,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAuE1C,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC/C,IAAI,CAAC,qBAAqB,EAAE;AAE5B,YAAA,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,SAAC,CAAC;AAwQH;IA/WC,eAAe,GAAA;QACb,IAAI,CAAC,qBAAqB,EAAE;;AAO9B,IAAA,IAAY,SAAS,GAAA;QACnB,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,MAAM,CAAC,UAAU,GAAG,uBAAuB;;AAqBjF;;;;;;;;AAQG;AACK,IAAA,8BAA8B,CAAC,UAA4B,EAAA;;AACjE,QAAA,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW;AAE7C,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC;QAClF,MAAM,iBAAiB,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY;AACzE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,0BAA0B;QAExD,IAAI,CAAC,iBAAiB,IAAI,CAAC,gBAAgB,IAAI,CAAC,YAAY,EAAE;AAC5D,YAAA,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM;;AAGxC,QAAA,MAAM,8BAA8B,GAClC,gBAAgB,CAAC,UAAU,GAAG,gBAAgB,CAAC,WAAW,IAAI,YAAY,CAAC,UAAU,GAAG,YAAY,CAAC,WAAW,CAAC;QAEnH,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,GAAG,iBAAiB,CAAC,WAAW,GAAG,8BAA8B;AAEnH,QAAA,IAAI,aAAa,IAAI,cAAc,EAAE;AACnC,YAAA,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM;;AAGxC,QAAA,MAAM,8BAA8B,GAAG,IAAI,CAAC;AAC1C,cAAE,IAAI,CAAC,0BAA0B,CAAC,UAAU;gBAC1C,IAAI,CAAC,0BAA0B,CAAC,WAAW;AAC3C,iBAAC,gBAAgB,CAAC,UAAU,GAAG,gBAAgB,CAAC,WAAW;cAC3D,CAAC;AAEL,QAAA,MAAM,cAAc,GAAG,cAAc,GAAG,8BAA8B,GAAG,8BAA8B;QAEvG,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,SAAS,CACzD,CAAC,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,GAAG,cAAc,CACtF;AAED,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE;AACxB,YAAA,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM;;AAGxC,QAAA,OAAO,gBAAgB;;IAGjB,8BAA8B,GAAA;;AACpC,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,OAAO,CAAC;;AAGV,QAAA,QACE,IAAI,CAAC,IAAI,CAAC,YAAY;AACtB,aAAC,CAAA,MAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,qBAAqB,GAAG,MAAM,IAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;;AAIlG,IAAA,IAAY,oBAAoB,GAAA;AAC9B,QAAA,OAAO,OAAO,IAAI,CAAC,qBAAqB,KAAK;AAC3C,cAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,qBAAqB;AACnD,cAAE,IAAI,CAAC,QAAQ;;AAGnB,IAAA,IAAY,mBAAmB,GAAA;QAC7B,OAAO,OAAO,IAAI,CAAC,qBAAqB,KAAK,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE;;IAS9G,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGxC,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;IAGlC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAC1B;;QAGF,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,EAAE;YAC1C,IAAI,CAAC,eAAe,CAAC,qBAAqB,GAAG,IAAI,CAAC,8BAA8B,EAAE;;QAGpF,IAAI,OAAO,IAAI,CAAC,qBAAqB,KAAK,WAAW,IAAI,IAAI,CAAC,UAAU,EAAE;YACxE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAIrF,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAa,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CACxD,CACD;;IAIH,aAAa,GAAA;AACnB,QAAA,QACE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,MACzE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CACiB,CAAA,mBAAA,EAAA,EAAA,gBAAA,EAAA,OAAO,EACtB,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,EAAA,EAElD,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,cAAc,EAAA,CAAY,CAClC,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,IAAA,EAAA,IAAA,EACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,QAAQ,MAC1B,CAAC,CAAA,QAAQ,IACP,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC9D,GAAG,EAAE,QAAQ,CAAC,KAAK,EACnB,CAAA,CACH,CAAC,EACD,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAE1E,EAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CACpB,CACD,CACN,EACA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,KAC5E,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,EAAA,EAE5E,IAAI,CAAC,eAAe,EACrB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAuB,EAAA,iBAAA,CAAA,CAChD,CACD,CACN,EACA,IAAI,CAAC,UAAU,KAAK,WAAW,KAC9B,cACG,IAAI,CAAC,QAAQ,IACZ,SAAG,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAA,EAC1F,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACjB,KAEJ,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,IAChE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACZ,CACV,CACE,CACN,EACA,IAAI,CAAC,UAAU,KAAK,UAAU,KAC7B,cACG,IAAI,CAAC,SAAS,IACb,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,EAAA,EAC7F,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAClB,KAEJ,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC,IACjE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb,CACV,CACE,CACN,EACA,IAAI,CAAC,QAAQ,KACZ,cACG,IAAI,CAAC,OAAO,IACX,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAAA,EAEnE,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,MAAM,EAAA,CAAY,CAC/B,KAEJ,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAA,EACrF,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,MAAM,EAAA,CAAY,CAC1B,CACV,CACE,CACN,CACE,CACD,CACY,CAChB,CACP;;IAIG,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,mBAAmB,GAAG,EAAE;QAE7B,QACE,EAAC,QAAQ,EAAA,IAAA,EACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,KAC5E,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,EAE5E,EAAA,IAAI,CAAC,eAAe,CACnB,CACA,CACP,EACA,IAAI,CAAC,UAAU,KAAK,WAAW,KAC9B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAEpE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACjB,KAEJ,cAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,EACrF,EAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACZ,CACV,CACG,CACP,EACA,IAAI,CAAC,UAAU,KAAK,UAAU,KAC7B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,SAAS,IACb,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,IAEtE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAClB,KAEJ,cAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC,EACtF,EAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb,CACV,CACG,CACP,EACA,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAC,MAAM,EAAA,EACd,IAAI,CAAC,OAAO,IACX,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAAA,EAEnE,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,MAAM,EAAA,CAAY,CAC/B,KAEJ,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAA,EACrF,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAY,CAC1B,CACV,CACG,CACP,CACG,EACL,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,MAC5C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,IAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,KAAK,SAAS,EAAE,CAAC,EAC3F,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAAA,EAE5C,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,MACzC,CAAC,CAAA,QAAQ,EACP,EAAA,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC9D,GAAG,EAAE,QAAQ,CAAC,KAAK,EACnB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAA,CAC/C,CACH,CAAC,EACD,CAAC,IAAI,CAAC,qBAAqB,KAAK,SAAS,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,MAC/E,CAAA,CAAA,IAAA,EAAA,EAAA,aAAA,EACe,IAAI,CAAC,qBAAqB,KAAK,SAAS,EACrD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC,EACnD,KAAK,EAAC,oBAAoB,EAAA,EAE1B,CAAA,CAAA,mBAAA,EAAA,IAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAQ,EACxC,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,qBAAqB,GAAY,CAC9D,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CACG,CAAA,IAAA,EAAA,IAAA,EAAA,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,QAAQ,MACrC,CAAC,CAAA,QAAQ,EACP,EAAA,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC9D,GAAG,EAAE,QAAQ,CAAC,KAAK,EACnB,CAAA,CACH,CAAC,CACC,CACD,CACY,CACjB,CACN,EACA,IAAI,CAAC,WAAW,KACf,UACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,EACpE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC,EAAA,EAEnD,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAA,cAAA,EACR,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,SAAS,EACtD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EAE3E,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,qBAAqB,EAAY,CAAA,EACjE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CACpB,CACD,CACN,CACE,CACD,CACP,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Log in\",\r\n logout: \"Log out\",\r\n help: \"Help\",\r\n overflowMenu: \"More\",\r\n },\r\n },\r\n nl: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Inloggen\",\r\n logout: \"Uitloggen\",\r\n help: \"Help\",\r\n overflowMenu: \"Meer\",\r\n userHome: \"Mijn Omgevingsloket\",\r\n },\r\n },\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n item: HeaderMenuItem;\r\n onClick: (event: MouseEvent) => void;\r\n key: string;\r\n ref?: (el: HTMLLIElement \| undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n return (\r\n <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n {item.label}\r\n </a>\r\n </li>\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/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n padding-block: units.$u2;\r\n padding-inline: 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host([is-compact]) {\r\n ::slotted([slot=\"logo\"]) {\r\n --_dso-logo-block-size: #{units.$ru5} !important;\r\n }\r\n\r\n .dso-header {\r\n flex-wrap: nowrap;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n .dso-header {\r\n align-items: center;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 375px;\r\n }\r\n }\r\n}\r\n\r\n.dso-header {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n flex: 1 1 12.5rem;\r\n margin-inline-end: units.$u3;\r\n padding-block-end: units.$u2;\r\n padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: auto;\r\n\r\n .profile,\r\n .login,\r\n .logout,\r\n .help {\r\n .dso-tertiary {\r\n display: flex;\r\n gap: 0.5rem;\r\n\r\n cursor: pointer;\r\n\r\n border: 0;\r\n\r\n background-color: transparent;\r\n\r\n padding-inline: 0;\r\n\r\n outline-offset: 2px;\r\n\r\n font-family: typography.$font-family-base;\r\n color: colors.$grasgroen;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n .profile + .logout,\r\n .logout + .help,\r\n .login + .help {\r\n border-inline-start: 3px solid colors.$grijs-20;\r\n margin-inline-start: units.$u1;\r\n padding-inline-start: units.$u1;\r\n }\r\n\r\n .help {\r\n a,\r\n button {\r\n display: flex;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n max-inline-size: 100%;\r\n position: relative; // Needed for menu item calculations\r\n}\r\n\r\ndso-dropdown-menu {\r\n @include dropdown-menu.children();\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n align-items: center;\r\n position: relative;\r\n\r\n dso-icon {\r\n inline-size: units.$u3;\r\n block-size: units.$u3;\r\n margin-inline-start: units.$u1;\r\n padding-block-start: units.$u1 * 0.25;\r\n }\r\n\r\n &[aria-expanded=\"true\"] {\r\n dso-icon {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n a,\r\n button {\r\n display: block;\r\n padding: units.$u2;\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n white-space: pre-wrap;\r\n text-decoration: none;\r\n\r\n &:focus-visible {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited:not(:hover):not(:focus-visible) {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n button {\r\n inline-size: 100%;\r\n text-align: start;\r\n\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-inline-start: auto;\r\n display: flex;\r\n align-items: center;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n .dso-dropdown-options {\r\n inset-inline-end: 0;\r\n inset-block-start: 100%;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n &.ready {\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n }\r\n }\r\n\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-block-end: 0;\r\n margin-block-start: 0;\r\n padding-inline-start: 0;\r\n\r\n > li {\r\n margin-block-end: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-block-end: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include link.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inset-inline-start: units.$ru2 * -1 !important;\r\n inset-block-start: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: flex-end;\r\n color: colors.$bosgroen;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .main-menu-item-icon {\r\n block-size: 1em;\r\n margin-inline-end: units.$u1;\r\n position: relative;\r\n inset-block-start: -2px;\r\n inline-size: 1.2em;\r\n }\r\n\r\n .dropdown-menu-item .main-menu-item-icon {\r\n margin-inline-end: 0;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n HeaderAuthStatus,\r\n HeaderCompactMode,\r\n HeaderEvent,\r\n HeaderMenuItem,\r\n HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n menuItem?: HeaderMenuItem;\r\n url?: string;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu: HeaderMenuItem[] = [];\r\n\r\n /\r\n Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n * the viewport is smaller than 992px.\r\n /\r\n @Prop()\r\n compact: HeaderCompactMode = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: HeaderAuthStatus = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive = false;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n /\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @State()\r\n visibleMenuItemsCount: number \| undefined = undefined;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n @Watch(\"mainMenu\")\r\n mainMenuChanged() {\r\n this.resetVisibleMenuItems();\r\n }\r\n\r\n private resetVisibleMenuItems = () => {\r\n this.visibleMenuItemsCount = undefined;\r\n };\r\n\r\n private get isCompact() {\r\n return this.compact === \"always\" \|\| window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n };\r\n\r\n private dropdownElement: HTMLDsoDropdownMenuElement \| undefined;\r\n private navElement: HTMLUListElement \| undefined;\r\n private menuItemElementRefs: (HTMLLIElement \| undefined)[] = [];\r\n private dropdownMenuItemElementRef: HTMLLIElement \| undefined;\r\n private userHomeMenuItemElementRef: HTMLLIElement \| undefined;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n /\r\n Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n \r\n When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n \r\n @param navElement The navigation element to calculate the overflow menu item count for.\r\n * @returns The number of menu items that can fit in the available space.\r\n */\r\n private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n const availableWidth = navElement.offsetWidth;\r\n\r\n const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n if (!mostRightMenuItem \|\| !dropdownMenuItem \|\| !lastMenuItem) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const dropdownMenuItemEffectiveWidth =\r\n dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n if (requiredWidth <= availableWidth) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n ? this.userHomeMenuItemElementRef.offsetLeft +\r\n this.userHomeMenuItemElementRef.offsetWidth -\r\n (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n : 0;\r\n\r\n const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n );\r\n\r\n if (visibleMenuItems < 0) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n return visibleMenuItems;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private get visibleMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\"\r\n ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n : this.mainMenu;\r\n }\r\n\r\n private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n }\r\n\r\n private resizeObserver = new ResizeObserver(() => {\r\n this.resetVisibleMenuItems();\r\n\r\n forceUpdate(this.host);\r\n });\r\n\r\n connectedCallback(): void {\r\n this.resizeObserver.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.isCompact && this.dropdownElement) {\r\n this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n\r\n if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host is-compact={this.isCompact}>\r\n <div class=\"dso-header\">\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderCompact() {\r\n return (\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )\r\n );\r\n }\r\n\r\n private renderNormal() {\r\n this.menuItemElementRefs = [];\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {(this.mainMenu.length > 0 \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul\r\n class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n ref={(element) => (this.navElement = element)}\r\n >\r\n {this.visibleMainMenuItems.map((menuItem, i) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n />\r\n ))}\r\n {(this.visibleMenuItemsCount === undefined \|\| this.hiddenMainMenuItems.length > 0) && (\r\n <li\r\n aria-hidden={this.visibleMenuItemsCount === undefined}\r\n ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n class=\"dropdown-menu-item\"\r\n >\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.hiddenMainMenuItems.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li\r\n class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n >\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\" class=\"main-menu-item-icon\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-header.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Log in\",\r\n logout: \"Log out\",\r\n help: \"Help\",\r\n overflowMenu: \"More\",\r\n },\r\n },\r\n nl: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Inloggen\",\r\n logout: \"Uitloggen\",\r\n help: \"Help\",\r\n overflowMenu: \"Meer\",\r\n userHome: \"Mijn Omgevingsloket\",\r\n },\r\n },\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n item: HeaderMenuItem;\r\n onClick: (event: MouseEvent) => void;\r\n key: string;\r\n ref?: (el: HTMLLIElement \| undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n return (\r\n <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n {item.label}\r\n </a>\r\n </li>\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/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n padding-block: units.$u2;\r\n padding-inline: 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host([is-compact]) {\r\n ::slotted([slot=\"logo\"]) {\r\n --_dso-logo-block-size: #{units.$ru5} !important;\r\n }\r\n\r\n .dso-header {\r\n flex-wrap: nowrap;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n .dso-header {\r\n align-items: center;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 375px;\r\n }\r\n }\r\n}\r\n\r\n.dso-header {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n flex: 1 1 12.5rem;\r\n margin-inline-end: units.$u3;\r\n padding-block-end: units.$u2;\r\n padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: auto;\r\n\r\n .profile,\r\n .login,\r\n .logout,\r\n .help {\r\n .dso-tertiary {\r\n display: flex;\r\n gap: 0.5rem;\r\n\r\n cursor: pointer;\r\n\r\n border: 0;\r\n\r\n background-color: transparent;\r\n\r\n padding-inline: 0;\r\n\r\n outline-offset: 2px;\r\n\r\n font-family: typography.$font-family-base;\r\n color: colors.$grasgroen;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n .profile + .logout,\r\n .logout + .help,\r\n .login + .help {\r\n border-inline-start: 3px solid colors.$grijs-20;\r\n margin-inline-start: units.$u1;\r\n padding-inline-start: units.$u1;\r\n }\r\n\r\n .help {\r\n a,\r\n button {\r\n display: flex;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n max-inline-size: 100%;\r\n position: relative; // Needed for menu item calculations\r\n}\r\n\r\ndso-dropdown-menu {\r\n @include dropdown-menu.children();\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n align-items: center;\r\n position: relative;\r\n\r\n dso-icon {\r\n inline-size: units.$u3;\r\n block-size: units.$u3;\r\n margin-inline-start: units.$u1;\r\n padding-block-start: units.$u1 * 0.25;\r\n }\r\n\r\n &[aria-expanded=\"true\"] {\r\n dso-icon {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n a,\r\n button {\r\n display: block;\r\n padding: units.$u2;\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n white-space: pre-wrap;\r\n text-decoration: none;\r\n\r\n &:focus-visible {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited:not(:hover):not(:focus-visible) {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n button {\r\n inline-size: 100%;\r\n text-align: start;\r\n\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-inline-start: auto;\r\n display: flex;\r\n align-items: center;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n .dso-dropdown-options {\r\n inset-inline-end: 0;\r\n inset-block-start: 100%;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n &.ready {\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n }\r\n }\r\n\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-block-end: 0;\r\n margin-block-start: 0;\r\n padding-inline-start: 0;\r\n\r\n > li {\r\n margin-block-end: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-block-end: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include link.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inset-inline-start: units.$ru2 * -1 !important;\r\n inset-block-start: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: flex-end;\r\n color: colors.$bosgroen;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .main-menu-item-icon {\r\n block-size: 1em;\r\n margin-inline-end: units.$u1;\r\n position: relative;\r\n inset-block-start: -2px;\r\n inline-size: 1.2em;\r\n }\r\n\r\n .dropdown-menu-item .main-menu-item-icon {\r\n margin-inline-end: 0;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n HeaderAuthStatus,\r\n HeaderCompactMode,\r\n HeaderEvent,\r\n HeaderMenuItem,\r\n HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n menuItem?: HeaderMenuItem;\r\n url?: string;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu: HeaderMenuItem[] = [];\r\n\r\n /\r\n Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n * the viewport is smaller than 992px.\r\n /\r\n @Prop()\r\n compact: HeaderCompactMode = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: HeaderAuthStatus = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive = false;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n /\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @State()\r\n visibleMenuItemsCount: number \| undefined = undefined;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n @Watch(\"mainMenu\")\r\n mainMenuChanged() {\r\n this.resetVisibleMenuItems();\r\n }\r\n\r\n private resetVisibleMenuItems = () => {\r\n this.visibleMenuItemsCount = undefined;\r\n };\r\n\r\n private get isCompact() {\r\n return this.compact === \"always\" \|\| window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n };\r\n\r\n private dropdownElement: HTMLDsoDropdownMenuElement \| undefined;\r\n private navElement: HTMLUListElement \| undefined;\r\n private menuItemElementRefs: (HTMLLIElement \| undefined)[] = [];\r\n private dropdownMenuItemElementRef: HTMLLIElement \| undefined;\r\n private userHomeMenuItemElementRef: HTMLLIElement \| undefined;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n /\r\n Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n \r\n When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n \r\n @param navElement The navigation element to calculate the overflow menu item count for.\r\n * @returns The number of menu items that can fit in the available space.\r\n */\r\n private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n const availableWidth = navElement.offsetWidth;\r\n\r\n const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n if (!mostRightMenuItem \|\| !dropdownMenuItem \|\| !lastMenuItem) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const dropdownMenuItemEffectiveWidth =\r\n dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n if (requiredWidth <= availableWidth) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n ? this.userHomeMenuItemElementRef.offsetLeft +\r\n this.userHomeMenuItemElementRef.offsetWidth -\r\n (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n : 0;\r\n\r\n const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n );\r\n\r\n if (visibleMenuItems < 0) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n return visibleMenuItems;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private get visibleMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\"\r\n ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n : this.mainMenu;\r\n }\r\n\r\n private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n }\r\n\r\n private resizeObserver = new ResizeObserver(() => {\r\n this.resetVisibleMenuItems();\r\n\r\n forceUpdate(this.host);\r\n });\r\n\r\n connectedCallback(): void {\r\n this.resizeObserver.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.isCompact && this.dropdownElement) {\r\n this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n\r\n if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host is-compact={this.isCompact}>\r\n <div class=\"dso-header\">\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderCompact() {\r\n return (\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )\r\n );\r\n }\r\n\r\n private renderNormal() {\r\n this.menuItemElementRefs = [];\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {(this.mainMenu.length > 0 \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul\r\n class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n ref={(element) => (this.navElement = element)}\r\n >\r\n {this.visibleMainMenuItems.map((menuItem, i) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n />\r\n ))}\r\n {(this.visibleMenuItemsCount === undefined \|\| this.hiddenMainMenuItems.length > 0) && (\r\n <li\r\n aria-hidden={this.visibleMenuItemsCount === undefined}\r\n ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n class=\"dropdown-menu-item\"\r\n >\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.hiddenMainMenuItems.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li\r\n class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n >\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\" class=\"main-menu-item-icon\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-highlight-box.js CHANGED Viewed

@@ -1,11 +1,13 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-Dm38fPV4.js';
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-BeWimuZg.js';
-const highlightBoxCss = "*,*::after,*::before{box-sizing:border-box}.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;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset)}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}:host{display:block;container-type:inline-size;position:relative;z-index:1}";
+const highlightBoxCss = () => `*,*::after,*::before{box-sizing:border-box}.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;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset)}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}:host{display:block;container-type:inline-size;position:relative;z-index:1}`;
 const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
@@ -14,7 +16,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
         return (h(Host, { key: 'baa2e7b69d8594b34bb3f87b10e50155fcb8bbeb', "has-counter": hasCounter }, hasCounter && h("div", { key: 'e1a29441395455061a92191c2a0d09cac29a1e3d', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'db2bf2c61f04cc0f0a6ac8cd17af5c083cea10f5', name: "icon" })), h("slot", { key: '9ab5693fccdaed92f15dce9c7a76b954f5b53693' })));
     }
     get element() { return this; }
-    static get style() { return highlightBoxCss; }
+    static get style() { return highlightBoxCss(); }
 }, [257, "dso-highlight-box", {
         "yellow": [516],
         "border": [516],
@@ -29,8 +31,8 @@ function defineCustomElement$1() {
     const components = ["dso-highlight-box"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-highlight-box":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, HighlightBox);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), HighlightBox);
             }
             break;
     } });

package/dist/bundle/dso-highlight-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,~~yuBAAyuB~~;;~~MCOpvB~~,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA~~;;;;;;~~IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n @include highlight-box.root();\r\n\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop({ reflect: true })\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop({ reflect: true })\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n return (\r\n <Host has-counter={hasCounter}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,uuBAAuuB,CAAC;;MCO1vB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n @include highlight-box.root();\r\n\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop({ reflect: true })\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop({ reflect: true })\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n return (\r\n <Host has-counter={hasCounter}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}