@prioticket/design-system-web 1.3.2 → 1.4.0

package/COMPONENT-DOCUMENTATION.md

@@ -1,6 +1,6 @@
 # @prioticket/design-system-web Components
 
-Version: 1.3.2
+Version: 1.4.0
 
 ### <pd-box> (PdBox)
 
@@ -530,7 +530,7 @@ A segmented button variant that functions as a stepper with completion tracking.
 
 ### <pd-select> (PdSelect)
 
-A thin wrapper around the Material Web Select component.
+A thin wrapper around the Material Web Select component with multi-select support.
 
 **Properties**
 
@@ -538,7 +538,7 @@ A thin wrapper around the Material Web Select component.
 |----------|-----------|------|---------|-------------|
 | `variant` | `variant` | `'filled' \| 'outlined'` | `'outlined'` | The variant of the select field. |
 | `label` | `label` | `string` | `''` | The label for the select field. |
-| `value` | `value` | `string` | `''` | The selected value. |
+| `value` | `value` | `string \| string[]` | `''` | The selected value. For multi-select, use an array of values. |
 | `disabled` | `disabled` | `boolean` | `false` | Whether the select is disabled. |
 | `required` | `required` | `boolean` | `false` | Whether the select is required. |
 | `errorText` | `error-text` | `string` | `''` | The error message to display when `error` is true. |
@@ -546,12 +546,19 @@ A thin wrapper around the Material Web Select component.
 | `supportingText` | `supporting-text` | `string` | `''` | The supporting text to display below the select. |
 | `options` | `options` | `SelectOption[]` | `[]` | An array of options to be rendered. |
 | `leadingIcon` | `leading-icon` | `string` | `''` | The leading icon name. |
+| `multiple` | `multiple` | `boolean` | `false` | Enable multi-select mode. |
+| `maxSelections` | `max-selections` | `number \| undefined` |  | Maximum number of selections allowed (only for multi-select). |
+| `showChips` | `show-chips` | `boolean` | `true` | Show selected items as chips (default true when multiple). |
+| `chipVariant` | `chip-variant` | `'input' \| 'filter'` | `'input'` | Chip style variant. |
+| `placeholder` | `placeholder` | `string` | `''` | Placeholder text when nothing is selected. |
+| `searchable` | `searchable` | `boolean` | `false` | Enable search/filter functionality in dropdown. |
 
 **Events**
 
 | Event | Type | Description |
 |-------|------|-------------|
 | `change` | `CustomEvent` | Fired when the selected value changes. |
+| `chip-remove` | `CustomEvent` | Fired when a chip is removed in multi-select mode. |
 
 ### <pd-slider> (PdSlider)
 

package/component-documentation.json

@@ -1,11 +1,11 @@
 {
   "package": {
     "name": "@prioticket/design-system-web",
-    "version": "1.3.2",
+    "version": "1.4.0",
     "description": "",
     "installation": "npm install @prioticket/design-system-web"
   },
-  "generatedAt": "2025-12-15T12:09:38.959Z",
+  "generatedAt": "2025-12-16T12:18:22.497Z",
   "components": {
     "pd-box": {
       "tagName": "pd-box",
@@ -1586,7 +1586,7 @@
     "pd-select": {
       "tagName": "pd-select",
       "className": "PdSelect",
-      "description": "A thin wrapper around the Material Web Select component.",
+      "description": "A thin wrapper around the Material Web Select component with multi-select support.",
       "properties": [
         {
           "name": "variant",
@@ -1606,9 +1606,9 @@
         },
         {
           "name": "value",
-          "type": "string",
+          "type": "string | string[]",
           "attribute": "value",
-          "description": "The selected value.",
+          "description": "The selected value. For multi-select, use an array of values.",
           "default": "''",
           "required": false
         },
@@ -1667,6 +1667,54 @@
           "description": "The leading icon name.",
           "default": "''",
           "required": false
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "attribute": "multiple",
+          "description": "Enable multi-select mode.",
+          "default": "false",
+          "required": false
+        },
+        {
+          "name": "maxSelections",
+          "type": "number | undefined",
+          "attribute": "max-selections",
+          "description": "Maximum number of selections allowed (only for multi-select).",
+          "default": null,
+          "required": false
+        },
+        {
+          "name": "showChips",
+          "type": "boolean",
+          "attribute": "show-chips",
+          "description": "Show selected items as chips (default true when multiple).",
+          "default": "true",
+          "required": false
+        },
+        {
+          "name": "chipVariant",
+          "type": "'input' | 'filter'",
+          "attribute": "chip-variant",
+          "description": "Chip style variant.",
+          "default": "'input'",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "attribute": "placeholder",
+          "description": "Placeholder text when nothing is selected.",
+          "default": "''",
+          "required": false
+        },
+        {
+          "name": "searchable",
+          "type": "boolean",
+          "attribute": "searchable",
+          "description": "Enable search/filter functionality in dropdown.",
+          "default": "false",
+          "required": false
         }
       ],
       "events": [
@@ -1674,6 +1722,11 @@
           "name": "change",
           "type": "CustomEvent",
           "description": "Fired when the selected value changes."
+        },
+        {
+          "name": "chip-remove",
+          "type": "CustomEvent",
+          "description": "Fired when a chip is removed in multi-select mode."
         }
       ],
       "slots": [],

package/custom-elements.json

@@ -4479,6 +4479,24 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "dropdown",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -4503,10 +4521,10 @@
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "string | string[]"
               },
               "default": "''",
-              "description": "The selected value.",
+              "description": "The selected value. For multi-select, use an array of values.",
               "attribute": "value",
               "reflects": true
             },
@@ -4581,6 +4599,110 @@
               "description": "The leading icon name.",
               "attribute": "leading-icon"
             },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable multi-select mode.",
+              "attribute": "multiple"
+            },
+            {
+              "kind": "field",
+              "name": "maxSelections",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Maximum number of selections allowed (only for multi-select).",
+              "attribute": "max-selections"
+            },
+            {
+              "kind": "field",
+              "name": "showChips",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show selected items as chips (default true when multiple).",
+              "attribute": "show-chips"
+            },
+            {
+              "kind": "field",
+              "name": "chipVariant",
+              "type": {
+                "text": "'input' | 'filter'"
+              },
+              "default": "'input'",
+              "description": "Chip style variant.",
+              "attribute": "chip-variant"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text when nothing is selected.",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "searchable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable search/filter functionality in dropdown.",
+              "attribute": "searchable"
+            },
+            {
+              "kind": "field",
+              "name": "isOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Internal state for dropdown open/close"
+            },
+            {
+              "kind": "field",
+              "name": "searchQuery",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''",
+              "description": "Internal state for search query"
+            },
+            {
+              "kind": "field",
+              "name": "selectedValues",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "Internal array of selected values for multi-select"
+            },
+            {
+              "kind": "field",
+              "name": "boundHandleClickOutside",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "boundHandleKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "boundUpdateDropdownPosition",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleChange",
@@ -4603,6 +4725,165 @@
               "kind": "method",
               "name": "handleClose",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleTriggerClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOptionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "optionValue",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleChipRemove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "optionValue",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClickOutside",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSearchInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateDropdownPosition",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getOptionLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "isSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "filteredOptions",
+              "type": {
+                "text": "SelectOption[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "displayPlaceholder",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "renderMultiSelect",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderSingleSelect",
+              "privacy": "private"
             }
           ],
           "events": [
@@ -4612,6 +4893,13 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the selected value changes."
+            },
+            {
+              "name": "chip-remove",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when a chip is removed in multi-select mode."
             }
           ],
           "attributes": [
@@ -4636,10 +4924,10 @@
             {
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "string | string[]"
               },
               "default": "''",
-              "description": "The selected value.",
+              "description": "The selected value. For multi-select, use an array of values.",
               "fieldName": "value"
             },
             {
@@ -4704,13 +4992,66 @@
               "default": "''",
               "description": "The leading icon name.",
               "fieldName": "leadingIcon"
+            },
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable multi-select mode.",
+              "fieldName": "multiple"
+            },
+            {
+              "name": "max-selections",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Maximum number of selections allowed (only for multi-select).",
+              "fieldName": "maxSelections"
+            },
+            {
+              "name": "show-chips",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show selected items as chips (default true when multiple).",
+              "fieldName": "showChips"
+            },
+            {
+              "name": "chip-variant",
+              "type": {
+                "text": "'input' | 'filter'"
+              },
+              "default": "'input'",
+              "description": "Chip style variant.",
+              "fieldName": "chipVariant"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text when nothing is selected.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "searchable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable search/filter functionality in dropdown.",
+              "fieldName": "searchable"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "summary": "A thin wrapper around the Material Web Select component.",
+          "summary": "A thin wrapper around the Material Web Select component with multi-select support.",
           "tagName": "pd-select",
           "customElement": true
         }