@nanoporetech-digital/components 5.11.9 → 5.12.1

package/dist/types/components.d.ts

@@ -1868,6 +1868,10 @@ export namespace Components {
           * Maximum number of options that can be selected when multiple is true
          */
         "max"?: number;
+        /**
+          * When `multiple="true"`, control how many values to show within the control at once. After the maximum, "+n" will be shown to indicate the number of additional items that are selected.
+         */
+        "maxValuesVisible"?: boolean | number;
         /**
           * Minimum number of options that can be selected when multiple is true
          */
@@ -1930,6 +1934,13 @@ export namespace Components {
           * The value of the select.
          */
         "value": string | string[];
+        /**
+          * A function that customizes the tag value to be rendered when `multiple="true"`.
+          * @param option - the incoming option that was selected
+          * @param index - the incoming option index
+          * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement
+         */
+        "valueTagTemplate": (option: OptionInterface1, index: number) => string;
     }
     /**
      * Skeletons are used to show where content will eventually be drawn.
@@ -2047,11 +2058,6 @@ export namespace Components {
           * Update the underlying flickity implementation. Call this if you've added or removed child slides.
          */
         "update": () => Promise<void>;
-        /**
-          * Force flickity to update its height (when adaptiveHeight is enabled) for the duration equal to 'speed' parameter.
-          * @param speed The transition duration (in ms).
-         */
-        "updateAutoHeight": (speed?: number) => Promise<void>;
     }
     /**
      * An accessible and flexible re-order / sort utility component.
@@ -5224,6 +5230,10 @@ declare namespace LocalJSX {
           * Maximum number of options that can be selected when multiple is true
          */
         "max"?: number;
+        /**
+          * When `multiple="true"`, control how many values to show within the control at once. After the maximum, "+n" will be shown to indicate the number of additional items that are selected.
+         */
+        "maxValuesVisible"?: boolean | number;
         /**
           * Minimum number of options that can be selected when multiple is true
          */
@@ -5293,6 +5303,13 @@ declare namespace LocalJSX {
           * The value of the select.
          */
         "value"?: string | string[];
+        /**
+          * A function that customizes the tag value to be rendered when `multiple="true"`.
+          * @param option - the incoming option that was selected
+          * @param index - the incoming option index
+          * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement
+         */
+        "valueTagTemplate"?: (option: OptionInterface1, index: number) => string;
     }
     /**
      * Skeletons are used to show where content will eventually be drawn.

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-03-01T11:55:15",
+  "timestamp": "2024-03-26T16:11:04",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.2",
@@ -3425,6 +3425,10 @@
           "name": "date-picker",
           "docs": ""
         },
+        {
+          "name": "dropdown",
+          "docs": ""
+        },
         {
           "name": "input",
           "docs": ""
@@ -12366,11 +12370,11 @@
         },
         {
           "name": "slot",
-          "text": "value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+          "text": "value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist"
         },
         {
           "name": "slot",
-          "text": "value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+          "text": "value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist"
         },
         {
           "name": "slot",
@@ -12689,6 +12693,28 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "maxValuesVisible",
+          "type": "boolean | number",
+          "mutable": true,
+          "attr": "max-values-visible",
+          "reflectToAttr": false,
+          "docs": "When `multiple=\"true\"`, control how many values to show within the control at once.\nAfter the maximum, \"+n\" will be shown to indicate the number of additional items that are selected.",
+          "docsTags": [],
+          "default": "3",
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "min",
           "type": "number",
@@ -12771,7 +12797,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.",
+          "docs": "Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set.\nIf you don't want this behaviour just set the first option to have no value.",
           "docsTags": [],
           "values": [
             {
@@ -12925,6 +12951,36 @@
           "required": false,
           "getter": true,
           "setter": true
+        },
+        {
+          "name": "valueTagTemplate",
+          "type": "(option: OptionInterface, index: number) => string",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "A function that customizes the tag value to be rendered when `multiple=\"true\"`.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "option - the incoming option that was selected"
+            },
+            {
+              "name": "param",
+              "text": "index - the incoming option index"
+            },
+            {
+              "name": "returns",
+              "text": "Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement"
+            }
+          ],
+          "values": [
+            {
+              "type": "(option: OptionInterface, index: number) => string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [
@@ -13261,11 +13317,11 @@
         },
         {
           "name": "value-end",
-          "docs": "similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+          "docs": "similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist"
         },
         {
           "name": "value-start",
-          "docs": "similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist"
+          "docs": "similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist"
         }
       ],
       "parts": [],
@@ -13826,22 +13882,6 @@
           "parameters": [],
           "docs": "Update the underlying flickity implementation. Call this if you've added or removed\nchild slides.",
           "docsTags": []
-        },
-        {
-          "name": "updateAutoHeight",
-          "returns": {
-            "type": "Promise<void>",
-            "docs": ""
-          },
-          "signature": "updateAutoHeight(speed?: number) => Promise<void>",
-          "parameters": [],
-          "docs": "Force flickity to update its height (when adaptiveHeight is enabled) for the duration\nequal to 'speed' parameter.",
-          "docsTags": [
-            {
-              "name": "param",
-              "text": "speed The transition duration (in ms)."
-            }
-          ]
         }
       ],
       "events": [

package/docs-vscode.json

@@ -2293,6 +2293,10 @@
           "name": "max",
           "description": "Maximum number of options that can be selected when multiple is true"
         },
+        {
+          "name": "max-values-visible",
+          "description": "When `multiple=\"true\"`, control how many values to show within the control at once.\nAfter the maximum, \"+n\" will be shown to indicate the number of additional items that are selected."
+        },
         {
           "name": "min",
           "description": "Minimum number of options that can be selected when multiple is true"
@@ -2307,7 +2311,7 @@
         },
         {
           "name": "placeholder",
-          "description": "Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value."
+          "description": "Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set.\nIf you don't want this behaviour just set the first option to have no value."
         },
         {
           "name": "readonly",