@nanoporetech-digital/components 8.0.0-alpha.2 → 8.0.0-alpha.4

package/dist/types/components/file-upload/file-upload.d.ts

@@ -8,11 +8,14 @@ interface FileValidation {
     location?: string;
 }
 /**
- * A better UI experience for `input type="file"` form controls.
+ * Enables the selection of files for upload.
  *
- *   - Drag and Drop
- *   - Validation options
- *   - Preview and manage multiple files
+ * @version 1.0.0
+ * @status stable
+ *
+ * @slot label - A label for the file input. If not provided, the `label` prop will be used.
+ * @slot helper - A helper text to display below the input.
+ * @slot - The default slot can be used to add additional content, such as instructions or a message.
  */
 export declare class FileUpload implements ComponentInterface {
     private inputEl;
@@ -40,10 +43,12 @@ export declare class FileUpload implements ComponentInterface {
     capture?: 'user' | 'environment';
     /** The maximum file size allowed per file (Megabytes) */
     maxFileSize: number;
-    /** The maximum file size allowed per file (bytes).  */
+    /** The maximum number of files that can be selected. Defaults to 1 */
     maxFiles: number;
+    private _label;
     /** String to place within a label element. */
-    label: string;
+    get label(): string;
+    set label(value: string);
     /** Placeholder only used within single file uploads. */
     placeholder: string;
     /** Visually hide the label - but make it accessible. */
@@ -54,7 +59,7 @@ export declare class FileUpload implements ComponentInterface {
     disabled: boolean;
     /** If `true`, a clear icon will appear in the input when there is a value.
      * Clicking it clears the input. Only used within single file uploads. */
-    clearInput: boolean;
+    clearable: boolean;
     /** Whether to show validation errors underneath input */
     showInlineError: boolean;
     /** When should the field perform validation */
@@ -62,10 +67,10 @@ export declare class FileUpload implements ComponentInterface {
     /** The form element to associate with this input (its form owner). Must be the id of a form. */
     form?: string | null;
     protected shouldValidate(): void;
-    _invalid: boolean;
+    _invalid: any;
     /** This will be true when the control is in an invalid state.
      * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
-    get invalid(): boolean;
+    get invalid(): any;
     /**
      * Current validation message - if any. @readonly
      */

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -1,22 +1,15 @@
 /**
  * Shows the status of an ongoing operation.
  *
- * @version 3.0.0
- * @status stable
+ * @version 8.0.0
+ * @status new
+ * @type CSS Only
  *
- * @slot - A label to show inside the indicator.
- *
- * @part base - The component's base wrapper.
- * @part indicator - The progress bar indicator.
- * @part label - The progress bar label.
+ * @slot - Used for mandatory `<progress>` element and optional `<label>`
  */
 export declare class ProgressBar {
-    host: HTMLNanoProgressBarElement;
-    /** The progress bar's percentage, 0 to 100. */
-    value: number;
-    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-    indeterminate: boolean;
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent: boolean;
-    render(): any;
+    /** The height of the progress-bar */
+    size: 'small' | 'medium' | 'large';
 }

package/dist/types/components.d.ts

@@ -1394,10 +1394,9 @@ export namespace Components {
         "validationState": ValidationState[];
     }
     /**
-     * A better UI experience for `input type="file"` form controls.
-     *   - Drag and Drop
-     *   - Validation options
-     *   - Preview and manage multiple files
+     * Enables the selection of files for upload.
+     * @version 1.0.0
+     * @status stable
      */
     interface NanoFileUpload {
         /**
@@ -1412,7 +1411,7 @@ export namespace Components {
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Only used within single file uploads.
           * @default false
          */
-        "clearInput": boolean;
+        "clearable": boolean;
         /**
           * If `true`, the user cannot interact with the select.
           * @default false
@@ -1438,9 +1437,9 @@ export namespace Components {
         /**
           * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
           * @readonly 
-          * @default false
+          * @default null
          */
-        "invalid": boolean;
+        "invalid": any;
         /**
           * String to place within a label element.
          */
@@ -1451,7 +1450,7 @@ export namespace Components {
          */
         "maxFileSize": number;
         /**
-          * The maximum file size allowed per file (bytes).
+          * The maximum number of files that can be selected. Defaults to 1
           * @default 1
          */
         "maxFiles": number;
@@ -1461,7 +1460,7 @@ export namespace Components {
         "name": string;
         /**
           * Placeholder only used within single file uploads.
-          * @default 'Choose a file...'
+          * @default 'Choose a file'
          */
         "placeholder": string;
         /**
@@ -1491,7 +1490,7 @@ export namespace Components {
         "showInlineError": boolean;
         /**
           * When should the field perform validation
-          * @default 'submit'
+          * @default 'submitThenDirty'
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
         /**
@@ -2396,25 +2395,21 @@ export namespace Components {
     }
     /**
      * Shows the status of an ongoing operation.
-     * @version 3.0.0
-     * @status stable
+     * @version 8.0.0
+     * @status new
+     * @type CSS Only
      */
     interface NanoProgressBar {
-        /**
-          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
-          * @default false
-         */
-        "indeterminate": boolean;
         /**
           * Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.
           * @default false
          */
         "showPercent": boolean;
         /**
-          * The progress bar's percentage, 0 to 100.
-          * @default 0
+          * The height of the progress-bar
+          * @default 'medium'
          */
-        "value": number;
+        "size": 'small' | 'medium' | 'large';
     }
     /**
      * Ranges allow the user to select a value within a given range using a slider.
@@ -2705,18 +2700,6 @@ export namespace Components {
          */
         "valueTagTemplate": (option: OptionInterface, index: number) => string;
     }
-    /**
-     * Skeletons are used to show where content will eventually be drawn.
-     * @version 1.0.0
-     * @status stable
-     */
-    interface NanoSkeleton {
-        /**
-          * When `true`, the skeleton will animate.
-          * @default true
-         */
-        "animated": boolean;
-    }
     interface NanoSlide {
         /**
           * Used to to inform the parent slides components of readiness. This will automatically be set to true when the slide has loaded but can be set and updated manually.
@@ -4037,10 +4020,9 @@ declare global {
         "nanoValidate": ControlValidityEventDetail;
     }
     /**
-     * A better UI experience for `input type="file"` form controls.
-     *   - Drag and Drop
-     *   - Validation options
-     *   - Preview and manage multiple files
+     * Enables the selection of files for upload.
+     * @version 1.0.0
+     * @status stable
      */
     interface HTMLNanoFileUploadElement extends Components.NanoFileUpload, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNanoFileUploadElementEventMap>(type: K, listener: (this: HTMLNanoFileUploadElement, ev: NanoFileUploadCustomEvent<HTMLNanoFileUploadElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4385,8 +4367,9 @@ declare global {
     };
     /**
      * Shows the status of an ongoing operation.
-     * @version 3.0.0
-     * @status stable
+     * @version 8.0.0
+     * @status new
+     * @type CSS Only
      */
     interface HTMLNanoProgressBarElement extends Components.NanoProgressBar, HTMLStencilElement {
     }
@@ -4495,17 +4478,6 @@ declare global {
         prototype: HTMLNanoSelectElement;
         new (): HTMLNanoSelectElement;
     };
-    /**
-     * Skeletons are used to show where content will eventually be drawn.
-     * @version 1.0.0
-     * @status stable
-     */
-    interface HTMLNanoSkeletonElement extends Components.NanoSkeleton, HTMLStencilElement {
-    }
-    var HTMLNanoSkeletonElement: {
-        prototype: HTMLNanoSkeletonElement;
-        new (): HTMLNanoSkeletonElement;
-    };
     interface HTMLNanoSlideElementEventMap {
         "nanoSlideReady": void;
     }
@@ -4811,7 +4783,6 @@ declare global {
         "nano-rating": HTMLNanoRatingElement;
         "nano-resize-observe": HTMLNanoResizeObserveElement;
         "nano-select": HTMLNanoSelectElement;
-        "nano-skeleton": HTMLNanoSkeletonElement;
         "nano-slide": HTMLNanoSlideElement;
         "nano-slides": HTMLNanoSlidesElement;
         "nano-sortable": HTMLNanoSortableElement;
@@ -6233,10 +6204,9 @@ declare namespace LocalJSX {
         "validationState"?: ValidationState[];
     }
     /**
-     * A better UI experience for `input type="file"` form controls.
-     *   - Drag and Drop
-     *   - Validation options
-     *   - Preview and manage multiple files
+     * Enables the selection of files for upload.
+     * @version 1.0.0
+     * @status stable
      */
     interface NanoFileUpload {
         /**
@@ -6251,7 +6221,7 @@ declare namespace LocalJSX {
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Only used within single file uploads.
           * @default false
          */
-        "clearInput"?: boolean;
+        "clearable"?: boolean;
         /**
           * If `true`, the user cannot interact with the select.
           * @default false
@@ -6273,20 +6243,20 @@ declare namespace LocalJSX {
         /**
           * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
           * @readonly 
-          * @default false
+          * @default null
          */
-        "invalid"?: boolean;
+        "invalid"?: any;
         /**
           * String to place within a label element.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The maximum file size allowed per file (Megabytes)
           * @default 1
          */
         "maxFileSize"?: number;
         /**
-          * The maximum file size allowed per file (bytes).
+          * The maximum number of files that can be selected. Defaults to 1
           * @default 1
          */
         "maxFiles"?: number;
@@ -6313,7 +6283,7 @@ declare namespace LocalJSX {
         "onNanoValidate"?: (event: NanoFileUploadCustomEvent<ControlValidityEventDetail>) => void;
         /**
           * Placeholder only used within single file uploads.
-          * @default 'Choose a file...'
+          * @default 'Choose a file'
          */
         "placeholder"?: string;
         /**
@@ -6328,7 +6298,7 @@ declare namespace LocalJSX {
         "showInlineError"?: boolean;
         /**
           * When should the field perform validation
-          * @default 'submit'
+          * @default 'submitThenDirty'
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
         /**
@@ -7272,25 +7242,21 @@ declare namespace LocalJSX {
     }
     /**
      * Shows the status of an ongoing operation.
-     * @version 3.0.0
-     * @status stable
+     * @version 8.0.0
+     * @status new
+     * @type CSS Only
      */
     interface NanoProgressBar {
-        /**
-          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
-          * @default false
-         */
-        "indeterminate"?: boolean;
         /**
           * Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.
           * @default false
          */
         "showPercent"?: boolean;
         /**
-          * The progress bar's percentage, 0 to 100.
-          * @default 0
+          * The height of the progress-bar
+          * @default 'medium'
          */
-        "value"?: number;
+        "size"?: 'small' | 'medium' | 'large';
     }
     /**
      * Ranges allow the user to select a value within a given range using a slider.
@@ -7619,18 +7585,6 @@ declare namespace LocalJSX {
          */
         "valueTagTemplate"?: (option: OptionInterface, index: number) => string;
     }
-    /**
-     * Skeletons are used to show where content will eventually be drawn.
-     * @version 1.0.0
-     * @status stable
-     */
-    interface NanoSkeleton {
-        /**
-          * When `true`, the skeleton will animate.
-          * @default true
-         */
-        "animated"?: boolean;
-    }
     interface NanoSlide {
         /**
           * Fired when the slide has loaded.
@@ -8267,7 +8221,6 @@ declare namespace LocalJSX {
         "nano-rating": NanoRating;
         "nano-resize-observe": NanoResizeObserve;
         "nano-select": NanoSelect;
-        "nano-skeleton": NanoSkeleton;
         "nano-slide": NanoSlide;
         "nano-slides": NanoSlides;
         "nano-sortable": NanoSortable;
@@ -8450,10 +8403,9 @@ declare module "@stencil/core" {
              */
             "nano-field-validator": LocalJSX.NanoFieldValidator & JSXBase.HTMLAttributes<HTMLNanoFieldValidatorElement>;
             /**
-             * A better UI experience for `input type="file"` form controls.
-             *   - Drag and Drop
-             *   - Validation options
-             *   - Preview and manage multiple files
+             * Enables the selection of files for upload.
+             * @version 1.0.0
+             * @status stable
              */
             "nano-file-upload": LocalJSX.NanoFileUpload & JSXBase.HTMLAttributes<HTMLNanoFileUploadElement>;
             /**
@@ -8572,8 +8524,9 @@ declare module "@stencil/core" {
             "nano-option": LocalJSX.NanoOption & JSXBase.HTMLAttributes<HTMLNanoOptionElement>;
             /**
              * Shows the status of an ongoing operation.
-             * @version 3.0.0
-             * @status stable
+             * @version 8.0.0
+             * @status new
+             * @type CSS Only
              */
             "nano-progress-bar": LocalJSX.NanoProgressBar & JSXBase.HTMLAttributes<HTMLNanoProgressBarElement>;
             /**
@@ -8596,12 +8549,6 @@ declare module "@stencil/core" {
              * @version 1.0.0
              */
             "nano-select": LocalJSX.NanoSelect & JSXBase.HTMLAttributes<HTMLNanoSelectElement>;
-            /**
-             * Skeletons are used to show where content will eventually be drawn.
-             * @version 1.0.0
-             * @status stable
-             */
-            "nano-skeleton": LocalJSX.NanoSkeleton & JSXBase.HTMLAttributes<HTMLNanoSkeletonElement>;
             "nano-slide": LocalJSX.NanoSlide & JSXBase.HTMLAttributes<HTMLNanoSlideElement>;
             /**
              * A toolbox for creating carousel or slide-show widgets, allowing users to navigate through a collection of items one at a time.