@dso-toolkit/core 97.1.0 → 98.0.0

package/dist/collection/components/document-component/document-component.css

@@ -27,7 +27,7 @@ label.dso-primary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -58,13 +58,13 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -74,7 +74,7 @@ label.dso-primary:hover {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -82,7 +82,7 @@ label.dso-primary:active {
   background-color: var(--_dso-button-primary-active-background-color, #173521);
   border-color: var(--_dso-button-primary-active-border-color, #173521);
   color: var(--_dso-button-primary-active-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -92,7 +92,7 @@ label.dso-primary[disabled]:hover {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -233,7 +233,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -264,13 +264,13 @@ label.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -280,7 +280,7 @@ label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -288,7 +288,7 @@ label.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -298,7 +298,7 @@ label.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -495,7 +495,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -529,7 +529,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -560,13 +560,13 @@ label.dso-tertiary {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -576,7 +576,7 @@ label.dso-tertiary:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -584,7 +584,7 @@ label.dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -594,7 +594,7 @@ label.dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -665,7 +665,7 @@ label.dso-tertiary {
   border: 0;
   line-height: 1;
   padding-inline: 0;
-  padding-block: var(--_dt-button-padding-block-tertiary, 0);
+  padding-block: var(--_dso-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -810,7 +810,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -833,13 +833,13 @@ label.dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -849,7 +849,7 @@ label.dso-map:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -857,7 +857,7 @@ label.dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -867,7 +867,7 @@ label.dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -1074,15 +1074,15 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
-  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
+  margin-block-start: var(--_dso-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dso-button-after-button-margin-inline-start, 16px);
 }
 
 mark {
-  background-color: var(--_dt-mark-bg-color, #f8f5ce);
-  color: var(--_dt-mark-color, #000);
-  padding-block: var(--_dt-mark-padding-block, 0.2rem);
-  font-weight: var(--_dt-mark-font-weight, normal);
+  background-color: var(--_dso-mark-bg-color, #f8f5ce);
+  color: var(--_dso-mark-color, #000);
+  padding-block: var(--_dso-mark-padding-block, 0.2rem);
+  font-weight: var(--_dso-mark-font-weight, normal);
 }
 mark.dso-highlight {
   background-color: #dbd136;
@@ -1161,13 +1161,13 @@ mark.dso-highlight {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 .heading-element,
 .content {
   text-decoration: var(--_dso-document-component-text-decoration);
-  --_dt-ozon-content-toggletip-text-decoration: underline var(--_dso-document-component-text-decoration);
+  --_dso-ozon-content-toggletip-text-decoration: underline var(--_dso-document-component-text-decoration);
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .heading-element,
@@ -1222,7 +1222,7 @@ mark.dso-highlight {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 :host([filtered]) {

package/dist/collection/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+}
+
+.group-label {
+  color: #999;
+  font-size: 0.875em;
+  font-weight: 400;
+  margin: 0;
+  padding-block: 4px 2px;
+  padding-inline: 20px;
+  text-transform: uppercase;
+}
+.group-label.checkable {
+  padding-inline-start: 40px;
+}

package/dist/collection/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.js

@@ -0,0 +1,55 @@
+import { Host, forceUpdate, h } from "@stencil/core";
+import { clsx } from "clsx";
+import { v4 as uuidv4 } from "uuid";
+export class DropdownMenuGroup {
+    get dropdownMenu() {
+        return this.host.closest("dso-dropdown-menu");
+    }
+    componentWillLoad() {
+        this.dropdownMenu?._getState().then((state) => {
+            this.dropdownMenuState = state;
+            forceUpdate(this.host);
+        });
+    }
+    render() {
+        const checkable = this.dropdownMenuState?.checkable;
+        const labelId = this.label ? uuidv4() : undefined;
+        return (h(Host, { key: 'fd56a3098a6ba86fd7ebf8a6b35a3bf17887ca58' }, h("div", { key: 'bccf44c95f26f209d6ef13019690919e392ca999', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: '0420c88dccdda6c3370342bccc9565851201b9c8', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: '18a6da7739b3e98ce2773ae88217846a3e3e929a' }))));
+    }
+    static get is() { return "dso-dropdown-menu-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-menu-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-menu-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the dropdown menu group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.css

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+}
+
+a:visited {
+  color: #191919;
+}
+
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+button {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  text-align: inherit;
+  inline-size: 100%;
+}
+
+a,
+button {
+  text-decoration: none;
+}
+a:hover, a:focus-visible, a:active,
+button:hover,
+button:focus-visible,
+button:active {
+  text-decoration: underline;
+}
+a,
+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;
+}
+a:hover, a:focus,
+button:hover,
+button:focus {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+  text-decoration: none;
+}
+a dso-icon,
+button dso-icon {
+  margin-inline: -12px 4px;
+}
+
+.checkable:not(.checked) a,
+.checkable:not(.checked) button {
+  padding-inline-start: 40px;
+}
+
+.checked a:not(:focus),
+.checked button:not(:focus) {
+  background-color: #39870c;
+  color: #fff;
+}

package/dist/collection/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.js

@@ -0,0 +1,160 @@
+import { Host, forceUpdate, h, } from "@stencil/core";
+import { clsx } from "clsx";
+import { isModifiedEvent } from "../../../utils/is-modified-event";
+export class DropdownMenuItem {
+    constructor() {
+        this.handleClick = (event) => {
+            this.dsoClick.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event) });
+        };
+    }
+    /**
+     * @internal
+     */
+    async _dsoFocus() {
+        this.anchorOrButtonRef?.focus();
+    }
+    get dropdownMenu() {
+        return this.host.closest("dso-dropdown-menu");
+    }
+    componentWillLoad() {
+        this.dropdownMenu?._getState().then((state) => {
+            this.dropdownMenuState = state;
+            forceUpdate(this.host);
+        });
+    }
+    render() {
+        const checkable = this.dropdownMenuState?.checkable;
+        const checked = checkable ? Boolean(this.checked) : undefined;
+        return (h(Host, { key: 'f700cb84700b69871c501c2271999e401e81cc58' }, h("div", { key: '07c16294801a24b6e2aaf5121aa4ebd549bc8005', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: 'e97213fd0cd98c9a9a671c2d4c6d0fddf71fa619', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '881f53d052f831e14cd72bbc5ad60557a33328ce', icon: "check" }), h("slot", { key: '384f6c4561eb265c5d2f3a261ee16ea5f9b6ba76' }))), this.type === "link" && this.href && (h("a", { key: '7bad8be7f74e7573fcf985119e3cfc15951465e9', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'ea9a728a15f67a054f0f30605870dc661fd1528c', icon: "check" }), h("slot", { key: '56bbc919c07001d8d54bb324aae46b1c73ace561' }))))));
+    }
+    static get is() { return "dso-dropdown-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenuItemType | undefined",
+                    "resolved": "\"button\" | \"link\" | undefined",
+                    "references": {
+                        "DropdownMenuItemType": {
+                            "location": "import",
+                            "path": "../dropdown-menu.interfaces",
+                            "id": "src/components/dropdown-menu/dropdown-menu.interfaces.ts::DropdownMenuItemType",
+                            "referenceLocation": "DropdownMenuItemType"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the dropdown menu item. Can be one of `button` or `link`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The href of the link when the type is `Link`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "href"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the Dropdown Menu Item is checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoClick",
+                "name": "dsoClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks the Dropdown Menu Item."
+                },
+                "complexType": {
+                    "original": "DropdownMenuItemClickEvent",
+                    "resolved": "DropdownMenuItemClickEvent",
+                    "references": {
+                        "DropdownMenuItemClickEvent": {
+                            "location": "import",
+                            "path": "../dropdown-menu.interfaces",
+                            "id": "src/components/dropdown-menu/dropdown-menu.interfaces.ts::DropdownMenuItemClickEvent",
+                            "referenceLocation": "DropdownMenuItemClickEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "_dsoFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}