@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,231 @@
+import { h, } from "@stencil/core";
+import { sanitizeHref } from "../../../shared/utils/url-utils";
+export class DropdownItem {
+    /** Icon to show in the dropdown item. */
+    icon = "";
+    /** Link the dropdown item should navigate to when clicked. */
+    href = "";
+    /** Where to open the link. */
+    target = "_self";
+    /** If true, this dropdown item is hidden. */
+    hide = false;
+    /** If true, this item is shown in an error style. */
+    error = false;
+    /** If true, this item is disabled and not interactive. */
+    disabled = false;
+    size = "l";
+    /** Fired when the dropdown item is clicked or selected. */
+    ifxDropdownItem;
+    el;
+    handleMenuSize(event) {
+        this.size = event.detail;
+    }
+    handleHostClick(e) {
+        if (this.disabled) {
+            e.stopPropagation();
+        }
+    }
+    handleEventEmission(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        this.ifxDropdownItem.emit(this.el.textContent);
+    }
+    render() {
+        const hasHref = this.href !== undefined && this.href !== null && this.href !== "";
+        const common = {
+            class: `dropdown-item ${this.size === "s" ? "small" : ""} ${this.hide ? "hide" : ""} ${this.disabled ? "disabled" : this.error ? "error" : ""}`,
+            onClick: (e) => this.handleEventEmission(e),
+            role: "menuitem",
+            "aria-disabled": this.disabled ? "true" : undefined,
+        };
+        if (this.disabled) {
+            common.tabIndex = -1;
+        }
+        else if (!hasHref) {
+            common.tabIndex = 0;
+        }
+        const content = [
+            this.icon && h("ifx-icon", { key: '6184b1f64e26236d0e6b1b27c43417d3ad52b193', class: "icon", icon: this.icon }),
+            h("span", { key: 'a0f4342309edaeb59f792d243ff93466cba34c3f' }, h("slot", { key: '6dd30c60f28f3f8d4fab2698d578ad74e150e78b' })),
+        ];
+        return hasHref ? (h("a", { ...common, href: sanitizeHref(this.href), target: this.target }, content)) : (h("button", { ...common, type: "button", disabled: this.disabled }, content));
+    }
+    static get is() { return "ifx-dropdown-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to show in the dropdown item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "\"\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link the dropdown item should navigate to when clicked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "\"\""
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to open the link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "\"_self\""
+            },
+            "hide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, this dropdown item is hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, this item is shown in an error style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, this item is disabled and not interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "size": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxDropdownItem",
+                "name": "ifxDropdownItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the dropdown item is clicked or selected."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "menuSize",
+                "method": "handleMenuSize",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleHostClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,32 @@
+:host {
+  position: relative;
+  z-index: 1000;
+}
+
+.dropdown-menu {
+  display: none;
+  visibility: hidden;
+  flex-direction: column;
+  width: 224px;
+  max-height: 289px;
+  min-width: 224px;
+  overflow-y: auto;
+  background: #ffffff;
+  box-shadow: 0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);
+  border: 1px solid #eeeded;
+  padding: 8px 4px;
+  font-family: var(--ifx-font-family);
+}
+.dropdown-menu.small {
+  max-height: 266px;
+  max-width: 186px;
+  overflow-y: auto;
+}
+.dropdown-menu.hideTopPadding {
+  padding-top: 0px;
+}
+
+.dropdown-menu.show {
+  display: flex;
+  visibility: visible;
+}

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

@@ -0,0 +1,177 @@
+import { h, } from "@stencil/core";
+export class DropdownMenu {
+    /** Controls wether the dropdown menu is open or closed. */
+    isOpen = false;
+    /**
+     * Size of the dropdown menu.
+     * @default "l"
+     */
+    size = "l";
+    hideTopPadding = false;
+    el;
+    /** Emits the calculated size of the menu */
+    menuSize;
+    filteredItems = [];
+    /** Fired when a dropdown menu item is selected */
+    ifxDropdownMenuItem;
+    handleMenuFilter(event) {
+        const searchValue = event.detail;
+        this.filterDropdownItems(searchValue);
+    }
+    handleDropdownItemValueEmission(event) {
+        this.ifxDropdownMenuItem.emit(event.detail);
+    }
+    filterDropdownItems(searchValue) {
+        const allItems = Array.from(this.el.querySelectorAll("ifx-dropdown-item"));
+        let dropdownItem, txtValue;
+        const query = searchValue.toUpperCase();
+        for (let i = 0; i < allItems.length; i++) {
+            dropdownItem = allItems[i];
+            txtValue = dropdownItem.textContent || dropdownItem.innerText;
+            if (txtValue.toUpperCase().indexOf(query) > -1) {
+                dropdownItem.setAttribute("hide", false);
+            }
+            else {
+                dropdownItem.setAttribute("hide", true);
+            }
+        }
+    }
+    componentWillUpdate() {
+        this.menuSize.emit(this.size);
+    }
+    componentWillLoad() {
+        this.filteredItems = Array.from(this.el.querySelectorAll("ifx-dropdown-item"));
+        const searchField = this.el.querySelector("ifx-search-field");
+        const dropdownHeader = this.el.querySelector("ifx-dropdown-header");
+        if (searchField || dropdownHeader) {
+            this.hideTopPadding = true;
+        }
+        else
+            this.hideTopPadding = false;
+    }
+    render() {
+        return (h("div", { key: '63c4cd96ebf86e6a7ec427ba94c239958128e414', class: `dropdown-menu 
+      ${this.isOpen ? "show" : ""} 
+      ${this.hideTopPadding ? "hideTopPadding" : ""}
+      ${this.size === "s" ? "small" : ""}` }, h("slot", { key: 'a04e1008747a8c868004d947ca042a4d763a4f7b' })));
+    }
+    static get is() { return "ifx-dropdown-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls wether the dropdown menu is open or closed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"s\" | \"l\"",
+                    "resolved": "\"l\" | \"s\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"l\""
+                        }],
+                    "text": "Size of the dropdown menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"l\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hideTopPadding": {},
+            "filteredItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "menuSize",
+                "name": "menuSize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the calculated size of the menu"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxDropdownMenuItem",
+                "name": "ifxDropdownMenuItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a dropdown menu item is selected"
+                },
+                "complexType": {
+                    "original": "CustomEvent",
+                    "resolved": "CustomEvent<any>",
+                    "references": {
+                        "CustomEvent": {
+                            "location": "global",
+                            "id": "global::CustomEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "ifxInput",
+                "method": "handleMenuFilter",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "ifxDropdownItem",
+                "method": "handleDropdownItemValueEmission",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/dropdown/dropdown-seperator/dropdown-separator.css

@@ -0,0 +1,5 @@
+.dropdown-separator {
+  height: 1px;
+  background-color: #eeeded;
+  margin: 8px 16px;
+}

package/dist/collection/components/dropdown/dropdown-seperator/dropdown-separator.js

@@ -0,0 +1,19 @@
+// dropdown-separator.tsx
+import { h } from "@stencil/core";
+export class DropdownSeparator {
+    render() {
+        return h("div", { key: 'bba5fef6f55e3188c1e7eaec9907856ea7d06339', class: "dropdown-separator" });
+    }
+    static get is() { return "ifx-dropdown-separator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-separator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-separator.css"]
+        };
+    }
+}

package/dist/collection/components/dropdown/dropdown-trigger/dropdown-trigger.css

@@ -0,0 +1,4 @@
+:host {
+  display: inline-block;
+  cursor: pointer;
+}

package/dist/collection/components/dropdown/dropdown-trigger/dropdown-trigger.js

@@ -0,0 +1,45 @@
+// dropdown-trigger-button.tsx
+import { h } from "@stencil/core";
+export class DropdownItem {
+    /** Controls wether the dropdown is currently open. */
+    isOpen = false;
+    render() {
+        return h("slot", { key: 'd81c4b88d4acac4f2a6ba054d830650d4a3e9268' });
+    }
+    static get is() { return "ifx-dropdown-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-trigger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls wether the dropdown is currently open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.css

@@ -0,0 +1,14 @@
+:host {
+  display: inline-block;
+}
+
+.rotate {
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(-180deg);
+  margin-top: 0em;
+}
+
+.icon {
+  margin-top: 0em;
+  transition: transform 0.2s ease-in-out;
+}

package/dist/collection/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.js

@@ -0,0 +1,155 @@
+// dropdown-trigger-button.tsx
+import { h } from "@stencil/core";
+export class DropdownTriggerButton {
+    /** Controls wether the dropdown trigger is open */
+    isOpen = false;
+    /** Color theme of the trigger. */
+    theme = "default";
+    /** Visual style variant. */
+    variant = "primary";
+    /** Size of the trigger button. */
+    size = "m";
+    /** If true, trigger is disabled and not clickable. */
+    disabled = false;
+    /** If true, hides the dropdown arrow icon. */
+    hideArrow = false;
+    render() {
+        return (h("ifx-button", { key: '8cdf759289dfb3efa13847a758646f064fbc5ced', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: 'd1e9c10b3bb2130728e97e41b45bfe915142134a' }), !this.hideArrow && (h("ifx-icon", { key: '327f3d907b78573dc2f4bc7e8bbf97fdda213e0d', icon: "chevron-down-16", class: `icon${this.isOpen ? " rotate" : ""}` }))));
+    }
+    static get is() { return "ifx-dropdown-trigger-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-trigger-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-trigger-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls wether the dropdown trigger is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"default\" | \"danger\" | \"inverse\"",
+                    "resolved": "\"danger\" | \"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color theme of the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "\"default\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\"",
+                    "resolved": "\"primary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"primary\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"s\" | \"m\"",
+                    "resolved": "\"m\" | \"s\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"m\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, trigger is disabled and not clickable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "hideArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, hides the dropdown arrow icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-arrow",
+                "defaultValue": "false"
+            }
+        };
+    }
+}