wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

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

@@ -2,34 +2,102 @@ import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { handleRefClick } from "../../utils/utils";
 import { generateCheckbox, generateCheckmarkIconButton, generateInformativeIcon, generateLabel } from "../base-item/base-item";
+/**
+ * @component vds-dropdown-item
+ * @description A dropdown item component that can display as a selectable option with optional checkmarks, icons, and link functionality. Supports custom content mode and various styling states.
+ * @slot - The default slot for custom content (only when type is "custom")
+ */
 export class VdsDropdownItem {
     constructor() {
-        /** Puts the VdsDropdownItem in disabled state */
+        /**
+         * Puts the VdsDropdownItem in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Define item as active when is true */
+        /**
+         * Define item as active when is true
+         * @type {boolean}
+         * @default false
+         */
         this.isActive = false;
-        /** Defines the element as a link */
+        /**
+         * Defines the element as a link
+         * @type {string}
+         * @default null
+         */
         this.linkHref = null;
-        /** Sets the link target value */
+        /**
+         * Sets the link target value
+         * @type {"_self" | "_blank" | "_parent" | "_top"}
+         * @default "_self"
+         */
         this.linkTarget = '_self';
-        /** Sets the link rel value */
+        /**
+         * Sets the link rel value
+         * @type {string}
+         * @default null
+         */
         this.linkRel = null;
-        /** Set size of menu item */
+        /**
+         * Set size of dropdown item
+         * @type {"small" | "medium" | "large"}
+         * @default "medium"
+         */
         this.size = 'medium';
-        /** Shows checkmark */
+        /**
+         * Shows checkmark
+         * @type {boolean}
+         * @default false
+         */
         this.hasCheckmark = false;
-        /** Set state of checkmark */
+        /**
+         * Set state of checkmark
+         * @type {boolean}
+         * @default false
+         */
         this.isSelected = false;
-        /** When has-checkmark is true, sets the checks element as checkmark or checkbox.  */
+        /**
+         * When has-checkmark is true, sets the check element as checkmark or checkbox
+         * @type {"checkbox" | "checkmark"}
+         * @default "checkmark"
+         */
         this.checkmarkVariant = 'checkmark';
-        /** When has-checkmark is true, sets the checks element at the beginning or end.  */
+        /**
+         * When has-checkmark is true, sets the check element at the beginning or end
+         * @type {"start" | "end"}
+         * @default "start"
+         */
         this.checkmarkAlignment = 'start';
-        /** Sets the dropdown item to danger state.  */
+        /**
+         * Sets the dropdown item to danger state
+         * @type {boolean}
+         * @default false
+         */
         this.danger = false;
+        /**
+         * Controls the rendering mode of the dropdown item.
+         * - 'default': Renders the item with the standard layout and functionality.
+         * - 'custom': Allows insertion of custom HTML/content inside the item.
+         * When set to 'custom', you can provide custom HTML as children to this component.
+         * @type {"default" | "custom"}
+         * @default "default"
+         */
+        this.type = 'default';
     }
+    /**
+     * Updates the item active state when isSelected changes
+     * @returns {void}
+     */
     updateItemState() {
         this.isActive = this.isSelected;
     }
+    /**
+     * Handles click events on the dropdown item
+     * @private
+     * @param {MouseEvent} evt - The mouse click event
+     * @returns {void}
+     */
     handleClick(evt) {
         handleRefClick(this.linkHref, this.linkTarget, this.linkRel);
         this.handleSelected(evt);
@@ -41,29 +109,81 @@ export class VdsDropdownItem {
             selected: this.isSelected,
         });
     }
+    /**
+     * Handles selected/deselected state changes and emits appropriate events
+     * @private
+     * @param {MouseEvent} evt - The mouse event
+     * @returns {void}
+     */
     handleSelected(evt) {
         if (this.isSelected)
             this.selected.emit(evt);
         else
             this.deselected.emit(evt);
     }
+    /**
+     * Generates the checkmark icon button element
+     * @private
+     * @returns {JSX.Element} The rendered checkmark icon button
+     */
     generateCheckmarkIconButton() {
         return generateCheckmarkIconButton(this.isSelected, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generates the checkbox element
+     * @private
+     * @returns {JSX.Element} The rendered checkbox
+     */
     generateCheckbox() {
         return generateCheckbox(this.isSelected, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generates the informative icon element
+     * @private
+     * @returns {JSX.Element} The rendered informative icon
+     */
     generateInformativeIcon() {
         return generateInformativeIcon(this.informativeIcon, this.value, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generates the label element
+     * @private
+     * @returns {JSX.Element} The rendered label
+     */
     generateLabel() {
         return generateLabel(this.label, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Sets the aria-label text from setAriaLabel, label, or value props
+     * @private
+     * @returns {string} The aria-label text
+     */
     setAriaLabelText() {
         return this.setAriaLabel ? this.setAriaLabel : this.label ? this.label : this.value;
     }
+    /**
+     * Renders the dropdown content based on the type prop (default or custom)
+     * @private
+     * @returns {JSX.Element} The rendered dropdown content
+     */
+    renderDropdownContent() {
+        if (this.type === 'custom') {
+            return h("slot", null);
+        }
+        else {
+            return (h("div", { class: "vds-dropdown-item__content" }, this.checkmarkAlignment === 'start' && this.hasCheckmark
+                ? this.checkmarkVariant === 'checkmark'
+                    ? this.generateCheckmarkIconButton()
+                    : this.generateCheckbox()
+                : null, this.informativeIcon && this.generateInformativeIcon(), this.generateLabel(), this.checkmarkAlignment === 'end' && this.hasCheckmark ? (this.checkmarkVariant === 'checkmark' ? this.generateCheckmarkIconButton() : this.generateCheckbox()) : null));
+        }
+    }
+    /**
+     * Renders the dropdown item component
+     * @returns {HTMLStencilElement} The rendered dropdown item element
+     */
     render() {
-        return (h(Host, { key: '0161c2c36ca4c3c08af0020ed3d4ea3bc3c556a7', class: this.disabled ? 'vds-dropdown-item--disabled' : '' }, h("button", { key: '5582f2f3c35be1855156a2398f3c8cc827e7127b', type: "button", tabindex: "0", disabled: this.disabled, title: this.setAriaLabelText(), "aria-label": this.setAriaLabelText(), onClick: (evt) => {
+        return (h(Host, { key: 'e0898d145994922eb36955e898d53f67e80f1bbf', class: this.disabled ? 'vds-dropdown-item--disabled' : '' }, h("button", { key: '60574318f68eff276512dc95a1ba43929ff8fe2f', type: "button", tabindex: "0", disabled: this.disabled, title: this.setAriaLabelText(), "aria-label": this.setAriaLabelText(), onClick: (evt) => {
                 if (this.disabled) {
                     evt.stopPropagation();
                     evt.preventDefault();
@@ -71,11 +191,7 @@ export class VdsDropdownItem {
                 else {
                     this.handleClick(evt);
                 }
-            }, class: combineClasses('vds-dropdown-item', `vds-dropdown-item--size-${this.size}`, this.disabled ? 'vds-dropdown-item--disabled' : '', this.isActive || this.isSelected ? 'vds-dropdown-item--active' : '', this.danger ? 'vds-dropdown-item--danger' : '', `vds-dropdown-item__alignment-${this.checkmarkAlignment}`) }, h("div", { key: 'a9f2dc0e6fca2fc14b36f11c0ddbcbc186e316bd', class: "vds-dropdown-item__content" }, this.checkmarkAlignment === 'start' && this.hasCheckmark
-            ? this.checkmarkVariant === 'checkmark'
-                ? this.generateCheckmarkIconButton()
-                : this.generateCheckbox()
-            : null, this.informativeIcon && this.generateInformativeIcon(), this.generateLabel(), this.checkmarkAlignment === 'end' && this.hasCheckmark ? (this.checkmarkVariant === 'checkmark' ? this.generateCheckmarkIconButton() : this.generateCheckbox()) : null))));
+            }, class: combineClasses('vds-dropdown-item', `vds-dropdown-item--size-${this.size}`, this.disabled ? 'vds-dropdown-item--disabled' : '', this.isActive || this.isSelected ? 'vds-dropdown-item--active' : '', this.danger ? 'vds-dropdown-item--danger' : '', `vds-dropdown-item__alignment-${this.checkmarkAlignment}`) }, this.renderDropdownContent())));
     }
     static get is() { return "vds-dropdown-item"; }
     static get encapsulation() { return "shadow"; }
@@ -102,7 +218,13 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Puts the VdsDropdownItem in disabled state"
                 },
                 "getter": false,
@@ -122,7 +244,10 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define the icon value"
                 },
                 "getter": false,
@@ -141,7 +266,13 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Define item as active when is true"
                 },
                 "getter": false,
@@ -161,7 +292,13 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "null"
+                        }],
                     "text": "Defines the element as a link"
                 },
                 "getter": false,
@@ -181,7 +318,13 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"_self\" | \"_blank\" | \"_parent\" | \"_top\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"_self\""
+                        }],
                     "text": "Sets the link target value"
                 },
                 "getter": false,
@@ -201,7 +344,13 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "null"
+                        }],
                     "text": "Sets the link rel value"
                 },
                 "getter": false,
@@ -221,7 +370,10 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define item value"
                 },
                 "getter": false,
@@ -240,7 +392,10 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define item label"
                 },
                 "getter": false,
@@ -259,7 +414,10 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define aria-label"
                 },
                 "getter": false,
@@ -278,8 +436,14 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set size of menu item"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"small\" | \"medium\" | \"large\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Set size of dropdown item"
                 },
                 "getter": false,
                 "setter": false,
@@ -298,7 +462,13 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Shows checkmark"
                 },
                 "getter": false,
@@ -318,12 +488,18 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Set state of checkmark"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "is-selected",
                 "defaultValue": "false"
             },
@@ -338,8 +514,14 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "When has-checkmark is true, sets the checks element as checkmark or checkbox."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"checkbox\" | \"checkmark\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"checkmark\""
+                        }],
+                    "text": "When has-checkmark is true, sets the check element as checkmark or checkbox"
                 },
                 "getter": false,
                 "setter": false,
@@ -358,8 +540,14 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "When has-checkmark is true, sets the checks element at the beginning or end."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"start\" | \"end\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"start\""
+                        }],
+                    "text": "When has-checkmark is true, sets the check element at the beginning or end"
                 },
                 "getter": false,
                 "setter": false,
@@ -378,14 +566,46 @@ export class VdsDropdownItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown item to danger state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the dropdown item to danger state"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "danger",
                 "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'custom'",
+                    "resolved": "\"custom\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"default\" | \"custom\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"default\""
+                        }],
+                    "text": "Controls the rendering mode of the dropdown item.\n- 'default': Renders the item with the standard layout and functionality.\n- 'custom': Allows insertion of custom HTML/content inside the item.\nWhen set to 'custom', you can provide custom HTML as children to this component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
             }
         };
     }
@@ -397,7 +617,13 @@ export class VdsDropdownItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "dropdownItemClicked"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<DropdownItemClickedEvent>}"
+                        }],
                     "text": "Emits event when item gets clicked"
                 },
                 "complexType": {
@@ -407,7 +633,8 @@ export class VdsDropdownItem {
                         "DropdownItemClickedEvent": {
                             "location": "import",
                             "path": "./vds-dropdown-item-clicked-event",
-                            "id": "src/components/dropdown-item/vds-dropdown-item-clicked-event.tsx::DropdownItemClickedEvent"
+                            "id": "src/components/dropdown-item/vds-dropdown-item-clicked-event.tsx::DropdownItemClickedEvent",
+                            "referenceLocation": "DropdownItemClickedEvent"
                         }
                     }
                 }
@@ -418,7 +645,13 @@ export class VdsDropdownItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "selected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits event when item is selected"
                 },
                 "complexType": {
@@ -438,7 +671,13 @@ export class VdsDropdownItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "deselected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits event when item is deselected"
                 },
                 "complexType": {
@@ -461,4 +700,3 @@ export class VdsDropdownItem {
             }];
     }
 }
-//# sourceMappingURL=vds-dropdown-item.js.map

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,20 +909,12 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
 :host {
   display: block;
   width: 100%;
+  --vds-basic-dropdown-multiselect-backdrop-background-color: var(--color-interaction-black-lower);
+  --vds-basic-dropdown-multiselect-backdrop-z-index: var(--elevation-layer-1);
+  --vds-basic-dropdown-multiselect-content-z-index: var(--elevation-layer-2);
 }
 :host .vds-dropdown-multiselect__container {
   display: block;
@@ -1021,7 +1029,7 @@
   box-shadow: var(--elevation-shadow-2);
   box-sizing: border-box;
   border: 0.0625rem solid var(--color-border-lowest);
-  z-index: var(--elevation-layer-5);
+  z-index: var(--vds-basic-dropdown-multiselect-content-z-index);
 }
 :host .vds-dropdown-multiselect__content.no-shadow {
   box-shadow: none;
@@ -1057,9 +1065,9 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: var(--color-interaction-black-lower);
-  opacity: 0.06;
-  z-index: var(--elevation-layer-4);
+  background-color: var(--vds-basic-dropdown-multiselect-backdrop-background-color);
+  z-index: var(--vds-basic-dropdown-multiselect-backdrop-z-index);
+  pointer-events: auto;
 }
 
 :host-context(.vds-basic-dropdown-multiselect--disabled) {