@dso-toolkit/core 97.1.1 → 99.0.0

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: 'd0b9227e1449f5eb98fd4f664e3ca9f60bfa37b3' }, h("div", { key: '58478b26df4d850da5f49396e1a0b8cbd49fdf62', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: '78154e5c35356b63ee9b381e266743ae4a4eac55', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: '40cf594b9fedffc978e9215783b5af2cb7712a14' }))));
+    }
+    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: '257dac25255988efe01d968337aa669459a3034b' }, h("div", { key: 'f4a1a13304f902665199a121e7c01c93b6cf4973', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: 'f950f23cf369a2e61801ffbe04653b7939dfe1cc', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '3b3d10104e82dab4b26103c6356fc581f3eaf32f', icon: "check" }), h("slot", { key: '940cc740d3c0de6be7a506a069ec5c82cae5c16e' }))), this.type === "link" && this.href && (h("a", { key: 'c00d372b7748fbd6a9cbce80041ba05d5f5c5a66', 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: 'bd82e14286cd9290f92c382eced57e070c591172', icon: "check" }), h("slot", { key: '568ea2fbc9c423ec461588dbe1bade210f96bc6f' }))))));
+    }
+    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"; }
+}