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

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.js

@@ -1,45 +1,181 @@
 import { Host, h } from "@stencil/core";
-import { cloneAttributes } from "../../utils/clone-attributes";
 import { emitInputEvent } from "../../utils/form";
+import { setupAttributeSync } from "../../utils/attribute-sync";
+/**
+ * @component vds-sidenav-item-input
+ * @description A search/filter input component designed for side navigation bars. Supports expanded/collapsed states, icons, form association, and dynamic action icons. Ideal for filtering navigation items or searching within sidebar content.
+ *
+ * @example
+ * <!-- Basic expanded search input -->
+ * <vds-sidenav-item-input
+ *   placeholder="Search..."
+ *   expanded="true">
+ * </vds-sidenav-item-input>
+ *
+ * @example
+ * <!-- Collapsed search icon -->
+ * <vds-sidenav-item-input
+ *   expanded="false"
+ *   action-icon="zoom">
+ * </vds-sidenav-item-input>
+ *
+ * @example
+ * <!-- Input with value -->
+ * <vds-sidenav-item-input
+ *   value="Project"
+ *   placeholder="Search projects"
+ *   expanded="true">
+ * </vds-sidenav-item-input>
+ *
+ * @example
+ * <!-- Input with custom action icon -->
+ * <vds-sidenav-item-input
+ *   placeholder="Filter items"
+ *   action-icon="filter"
+ *   expanded="true">
+ * </vds-sidenav-item-input>
+ *
+ * @example
+ * <!-- Input with informative icon -->
+ * <vds-sidenav-item-input
+ *   placeholder="Search"
+ *   informative-icon="magnify"
+ *   expanded="true">
+ * </vds-sidenav-item-input>
+ *
+ * @example
+ * <!-- Disabled input -->
+ * <vds-sidenav-item-input
+ *   placeholder="Search disabled"
+ *   disabled="true"
+ *   expanded="true">
+ * </vds-sidenav-item-input>
+ *
+ * @example
+ * <!-- Readonly input -->
+ * <vds-sidenav-item-input
+ *   value="Read only value"
+ *   is-readonly="true"
+ *   expanded="true">
+ * </vds-sidenav-item-input>
+ *
+ * @example
+ * <!-- Input in error state -->
+ * <vds-sidenav-item-input
+ *   value="Invalid"
+ *   error="true"
+ *   expanded="true">
+ * </vds-sidenav-item-input>
+ *
+ * @example
+ * <!-- Input with event handling -->
+ * <vds-sidenav-item-input
+ *   id="search-input"
+ *   placeholder="Search navigation"
+ *   expanded="true">
+ * </vds-sidenav-item-input>
+ * <script>
+ *   const input = document.getElementById('search-input');
+ *   input.addEventListener('changeInput', (e) => console.log('Search:', e.detail));
+ *   input.addEventListener('iconClick', () => console.log('Icon clicked'));
+ * </script>
+ *
+ * @example
+ * <!-- Complete sidebar with search -->
+ * <vds-sidenav style="width: 240px;">
+ *   <vds-sidenav-item-input
+ *     placeholder="Search menu..."
+ *     expanded="true">
+ *   </vds-sidenav-item-input>
+ *
+ *   <vds-sidenav-item-category value="Navigation" expanded="true">
+ *     <vds-sidenav-item slot="category-items" icon="home" value="Home"></vds-sidenav-item>
+ *     <vds-sidenav-item slot="category-items" icon="dashboard" value="Dashboard"></vds-sidenav-item>
+ *   </vds-sidenav-item-category>
+ * </vds-sidenav>
+ */
 export class VdsSidenavItemInput {
     constructor() {
-        /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+        /**
+         * When true expands the nav item to show both text and icon. When false, only shows the icon
+         * @type {boolean}
+         * @default true
+         */
         this.expanded = true;
-        /** Sets the input's value. */
+        /**
+         * Sets the input's value.
+         * @type {string}
+         * @default ""
+         */
         this.value = "";
-        /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+        /**
+         * Allows user to define a search icon inside the input at its right (zoom by default).
+         * @type {string}
+         * @default "zoom"
+         */
         this.actionIcon = "zoom";
         this.inputIcon = this.actionIcon;
     }
+    /**
+     * Component lifecycle hook - setup form value and attribute sync
+     * @private
+     */
     componentDidLoad() {
         this.setFormValue();
+        this.cleanupAttributeSync = setupAttributeSync(this.hostEl, () => this.inputEl, ["expanded", "action-icon"]);
+    }
+    /**
+     * Component lifecycle hook - cleanup attribute sync
+     * @private
+     */
+    disconnectedCallback() {
+        if (this.cleanupAttributeSync) {
+            this.cleanupAttributeSync();
+        }
     }
+    /**
+     * Watch value changes and update form value
+     * @private
+     */
     setFormValue() {
-        emitInputEvent(this.hostEl, this.value);
+        const safeValue = this.getSafeValue();
+        emitInputEvent(this.hostEl, safeValue);
         if (this.internals && !!this.internals.setFormValue) {
-            this.internals.setFormValue(this.value);
+            this.internals.setFormValue(safeValue);
         }
     }
+    /**
+     * Get safe value (empty string if undefined/null)
+     * @private
+     * @returns {string} Safe value
+     */
+    getSafeValue() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : "";
+    }
     /**
        * Sets focus on the vds-input element.
-       *
-       * @returns Promise<void>
+       * @method
+       * @public
+       * @returns {Promise<void>}
        */
     setFocus() {
         return this.inputEl.setFocus();
     }
     /**
        * Gets value prop from the vds-input element.
-       *
-       * @returns Promise<string>
+       * @method
+       * @public
+       * @returns {Promise<string>}
        */
     getValue() {
         return this.inputEl.getValue();
     }
     /**
        * Clears value prop from the vds-input element.
-       *
-       * @returns Promise<void>
+       * @method
+       * @public
+       * @returns {Promise<void>}
        */
     clear() {
         this.value = "";
@@ -48,12 +184,11 @@ export class VdsSidenavItemInput {
         return Promise.resolve();
     }
     /**
-       * Handles change input event from vds-basic-input
+       * Handles change input event from vds-basic-input.
      * Emits changeInput event.
-     * Sets icon to close when value is not blank otherwise zoom.
-       *
-     * @params evt - VdsBasicInputCustomEvent
-       * @returns void
+     * Sets icon to close when value is not blank otherwise to action icon.
+       * @private
+     * @param {VdsBasicInputCustomEvent<string>} evt - Input change event
        */
     handleChangeInput(evt) {
         evt.preventDefault();
@@ -64,11 +199,10 @@ export class VdsSidenavItemInput {
     /**
        * Handles click event from vds-icon-button inside the input.
      * Emits iconClick event.
-     * When inputIcon equals close, vds-basic-input gets clear.
-     * When inputIcon equals zoom, vds-basic-input gets focus.
-       *
-     * @params evt - MouseEvent
-       * @returns void
+     * When inputIcon equals close, vds-basic-input gets cleared.
+     * When inputIcon equals action icon, vds-basic-input gets focus.
+       * @private
+     * @param {MouseEvent} evt - Click event
        */
     handleIconClick(evt) {
         if (this.inputIcon === "close") {
@@ -80,37 +214,40 @@ export class VdsSidenavItemInput {
         this.iconClick.emit(evt);
     }
     /**
-       * Handles click event from vds-icon-button when expanded is false
+       * Handles click event from vds-icon-button when expanded is false.
      * Emits collapseIconClick event.
-       *
-     * @params evt - MouseEvent
-       * @returns void
+       * @private
+     * @param {MouseEvent} evt - Click event
        */
     handleCollapseIconClick(evt) {
         this.collapseIconClick.emit(evt);
     }
     /**
-       * Renders input when expanded is to set true.
-       *
-       * @returns HTMLStencilElement
+       * Renders input when expanded is set to true.
+       * @private
+       * @returns {HTMLStencilElement} Input element
        */
     renderInput() {
-        return h("vds-basic-input", Object.assign({ ref: (el) => {
+        return h("vds-basic-input", { ref: (el) => {
                 if (el) {
                     this.inputEl = el;
                 }
-            }, size: "medium", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, isReadonly: this.isReadonly, formatter: this.formatter, class: "vds-sidenav-item-input", error: this.error, informativeIcon: this.informativeIcon, onChangeInput: (evt) => { this.handleChangeInput(evt); } }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style")), h("vds-icon-button", { slot: "primaryActionIcon", onClick: (evt) => { this.handleIconClick(evt); }, icon: this.inputIcon, variant: "secondary", disabled: this.disabled, size: "medium" }));
+            }, size: "medium", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, isReadonly: this.isReadonly, formatter: this.formatter, class: "vds-sidenav-item-input", error: this.error, informativeIcon: this.informativeIcon, onChangeInput: (evt) => { this.handleChangeInput(evt); } }, h("vds-icon-button", { slot: "primaryActionIcon", onClick: (evt) => { this.handleIconClick(evt); }, icon: this.inputIcon, variant: "secondary", disabled: this.disabled, size: "medium" }));
     }
     /**
-       * Renders sidenav-item icon when expanded is to set false.
-       *
-       * @returns HTMLStencilElement
+       * Renders sidenav-item icon when expanded is set to false.
+       * @private
+       * @returns {HTMLStencilElement} Icon element
        */
     renderIcon() {
         return h("vds-sidenav-item", { onClick: (evt) => { this.handleCollapseIconClick(evt); }, icon: this.actionIcon, expanded: false });
     }
+    /**
+     * Render the sidenav item input component
+     * @returns {HTMLStencilElement} The rendered sidenav item input element
+     */
     render() {
-        return (h(Host, { key: 'ec9848d49266fee8c3bffd610d449a32d3e7f210', class: this.disabled ? 'vds__sidenav-item-input--disabled' : '' }, this.expanded ? this.renderInput() : this.renderIcon()));
+        return (h(Host, { key: 'b72d6b7b2f7b41ca284c2d9c1abe623d36e8777b', class: this.disabled ? 'vds__sidenav-item-input--disabled' : '' }, this.expanded ? this.renderInput() : this.renderIcon()));
     }
     static get is() { return "vds-sidenav-item-input"; }
     static get encapsulation() { return "shadow"; }
@@ -138,7 +275,13 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
                     "text": "When true expands the nav item to show both text and icon. When false, only shows the icon"
                 },
                 "getter": false,
@@ -158,7 +301,13 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
                     "text": "Sets the input's value."
                 },
                 "getter": false,
@@ -178,7 +327,10 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets the input's placeholder."
                 },
                 "getter": false,
@@ -197,7 +349,10 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
                     "text": "Sets the input in disabled state."
                 },
                 "getter": false,
@@ -216,7 +371,10 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
                     "text": "Sets the input in readonly state."
                 },
                 "getter": false,
@@ -235,12 +393,15 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
                     "text": "Sets the input in error state."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "error"
             },
             "informativeIcon": {
@@ -254,8 +415,11 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allows user to define a information icon inside the input at its left ."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Allows user to define an information icon inside the input at its left."
                 },
                 "getter": false,
                 "setter": false,
@@ -273,8 +437,14 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allows user to define a search icon inside the input at its right (zoom by default) ."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"zoom\""
+                        }],
+                    "text": "Allows user to define a search icon inside the input at its right (zoom by default)."
                 },
                 "getter": false,
                 "setter": false,
@@ -298,7 +468,10 @@ export class VdsSidenavItemInput {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Function}"
+                        }],
                     "text": "Sets character formatting for user input. Useful for adding a mask to the input."
                 },
                 "getter": false,
@@ -319,8 +492,14 @@ export class VdsSidenavItemInput {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits an event when the user change the value"
+                    "tags": [{
+                            "name": "event",
+                            "text": "changeInput"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string>}"
+                        }],
+                    "text": "Emits an event when the user changes the value"
                 },
                 "complexType": {
                     "original": "string",
@@ -334,7 +513,13 @@ export class VdsSidenavItemInput {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "iconClick"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits an event when the user clicks on input's icon"
                 },
                 "complexType": {
@@ -354,7 +539,13 @@ export class VdsSidenavItemInput {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "collapseIconClick"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits an event when the user clicks on icon when expanded is false"
                 },
                 "complexType": {
@@ -386,8 +577,14 @@ export class VdsSidenavItemInput {
                 "docs": {
                     "text": "Sets focus on the vds-input element.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "Promise<void>"
+                            "text": undefined
                         }]
                 }
             },
@@ -406,8 +603,14 @@ export class VdsSidenavItemInput {
                 "docs": {
                     "text": "Gets value prop from the vds-input element.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "Promise<string>"
+                            "text": undefined
                         }]
                 }
             },
@@ -426,8 +629,14 @@ export class VdsSidenavItemInput {
                 "docs": {
                     "text": "Clears value prop from the vds-input element.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "Promise<void>"
+                            "text": undefined
                         }]
                 }
             }
@@ -442,4 +651,3 @@ export class VdsSidenavItemInput {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=vds-sidenav-item-input.js.map

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.stories.js

@@ -85,4 +85,3 @@ CustomWidthUsage.args = {
     ExpandedWidth: '17.5rem',
     CollapsedWidth: '3.5rem',
 };
-//# sourceMappingURL=vds-sidenav-item-input.stories.js.map

package/dist/collection/components/skeleton-loading/vds-skeleton-loading.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,17 +909,6 @@
   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;
   --vds-skeleton-background-color: var(--surface-lower);