@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/types/components/date-input/date-input.d.ts

@@ -5,7 +5,12 @@ import type { Dropdown } from '../dropdown/dropdown';
 import type { DateInputChangeEventDetail, DuetLocalizedText, LocalDateOpts } from './date-input-interface';
 import type { DateDisabledPredicate } from '../date-picker/date-picker-interface';
 /**
- * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.
+ * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
+ * It has specific options for localisation, date formatting and validation.
+ *
+ * @version 1.0.0
+ * @status deprecated
+ * @deprecated - use `nano-input` with `type="date"` instead.
  *
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
@@ -18,7 +23,6 @@ export declare class DateInput implements ComponentInterface {
     private pickerCloseBtn;
     private dropdown;
     private input;
-    private pickerOpenSource;
     private directInput;
     private dateOrderIndeces;
     private inputId;
@@ -89,7 +93,7 @@ export declare class DateInput implements ComponentInterface {
     /**
      * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
      */
-    clearInput: boolean;
+    clearable: boolean;
     /**
      * String to place within a label element. Alternatively you may use a label slot.
      */
@@ -144,7 +148,7 @@ export declare class DateInput implements ComponentInterface {
      */
     picker: boolean;
     /**
-     * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.
+     * Initial picker date. Defaults to `value` if set and today's date if not.
      * Must be in IS0-8601 format: YYYY-MM-DD.
      */
     initialPickerDate?: string;
@@ -200,7 +204,6 @@ export declare class DateInput implements ComponentInterface {
     private onInputKey;
     private onDatePicked;
     private onDropdownHide;
-    private onDropdownShow;
     private onTriggerClick;
     private onTriggerKey;
     private onCloseClick;

package/dist/types/components/date-picker/date-picker.d.ts

@@ -1,20 +1,20 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { DaysOfWeek } from '../../utils/date-utils';
 import { type DuetLocalizedText } from './duet-date-picker/date-localization';
-import type { Color } from '../../types/shared';
 import type { DateDisabledPredicate, PickerChangeEvent } from './date-picker-interface';
 /**
- * A highly performant, small and accessible date-picker.
- * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).
+ * Enables the selection of a date from a calendar view.
+ *
+ * @version 1.0.0
+ * @status stable
  */
-export declare class DatePicker implements ComponentInterface {
+export declare class NanoDatePicker implements ComponentInterface {
     private dateId;
     private monthSelectId;
     private yearSelectId;
     private dialogLabelId;
     private firstFocusableElement;
     private monthSelectNode;
-    private yearSelectNode;
     private focusedDayNode;
     private focusTimeoutId;
     private initialTouchX;
@@ -22,30 +22,29 @@ export declare class DatePicker implements ComponentInterface {
     host: HTMLNanoDatePickerElement;
     activeFocus: boolean;
     focusedDay: Date;
+    private _selectedDate;
     /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */
-    selectedDate: string;
+    get selectedDate(): string;
+    set selectedDate(value: string);
     /** Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
      * This setting can be used alone or together with the max property. */
     min: string;
     /** Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
      * This setting can be used alone or together with the min property. */
     max: string;
-    /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
+    /** Which day is considered first day of the week. `0` for Sunday, `1` for Monday, etc.
      * Default is Monday. */
     firstDayOfWeek: DaysOfWeek;
     /** Button labels, day names, month names, etc, used for localization.
      * Default is English. */
     localization: DuetLocalizedText;
-    /** The color to use from the application's color palette. */
-    color?: Color;
     /**
      * Controls which days are disabled and therefore disallowed.
      * For example, this can be used to disallow selection of weekends.
      * @returns `false` for not disabled and `true` for disabled
      */
     isDateDisabled: DateDisabledPredicate;
-    /** Controls whether the picker is a modal or dialog,
-     * popup control and will therefore keep focus within the control */
+    /** Controls whether the picker is within a modal control and will therefore keep focus within the control */
     isModal: boolean;
     /** @internal First focusable element. Relevant for keeping focus within the control */
     firstFocusEle: HTMLElement;
@@ -55,7 +54,7 @@ export declare class DatePicker implements ComponentInterface {
      * @param day - focus to the current selected day
      * @param forceFocusVisible - force visible focus - required if opened via keyboad
      */
-    setFocus(day?: boolean, forceFocusVisible?: boolean): Promise<void>;
+    setFocus(day?: boolean): Promise<void>;
     handleSelectedDateChange(): void;
     private enableActiveFocus;
     private disableActiveFocus;
@@ -78,9 +77,6 @@ export declare class DatePicker implements ComponentInterface {
     private handleYearSelect;
     private setValue;
     private processFocusedDayNode;
-    connectedCallback(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/details/details.d.ts

@@ -1,67 +1,65 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.
- */
-/**
+ * Details show a brief summary and on interaction expand to show additional content.
+ *
+ * @version 1.0
+ * @status stable
+ *
  * @slot - content that will be hidden / revealed
- * @slot icon-start - used for icons at the start of the handle
+ * @slot icon-start - used for icons at the start of the handle. Rotates on open by default; use ::part selector to override.
  * @slot label - can be used when you wish to insert complex label markup
- * @slot icon-end - used for icons at the end of the handle
+ * @slot icon-end - used for icons at the end of the handle.
+ * Alternatively use `icon-expand` / `icon-collapse` slots. Rotates on open by default; use ::part selector to override.
+ * @slot icon-expand - used for icons at the end of the handle when closed. Rotates on open by default; use ::part selector to override.
+ * @slot icon-collapse - used for icons at the end of the handle when open. Rotates on open by default; use ::part selector to override.
  *
  * @part base - the root `details` element
  * @part header - the main `summary` ui control
  * @part label - the text wrapper of the ui control
+ * @part icon - the wrapper around both start and end icons
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
  * @part body - the wrapper around content
  * @part content - the main content wrapper
  */
-export declare class Details {
-    private hasStartSlot;
-    private hasEndSlot;
+export declare class NanoDetails {
     private mo?;
     private stateChanging;
-    private bodyEl;
+    private slotCtrl;
     private detailsEl;
     private headerEl;
-    private contentEl;
-    private cacheHeight;
-    private host;
+    private _bodyEl;
+    get bodyEl(): HTMLElement;
+    set bodyEl(el: HTMLElement);
     /** Summary / handle text. Use the `label` slot for HTML markup */
     label: string;
     /** Should item be open on load */
     open: boolean;
     /** Disables the details so it can't be toggled. */
     disabled: boolean;
-    /** Hide the handle. (You will need to control the hiding / showing of content with script) */
-    noHandle: boolean;
-    /** Icon slot rotation amount (degrees) on open */
-    iconRotation: number;
-    /**
-     * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.
-     * Set `useCacheHeight` to `true` try to keep animations smooth. */
-    useCacheHeight: boolean;
+    /** The size of the details. Primarily controls the trigger element and overall padding. */
+    size: 'small' | 'medium' | 'large';
     /**
      * Emitted when the component opens.
-     * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
      */
-    nanoOpened: EventEmitter;
+    nanoOpen: EventEmitter;
     /**
      * Emitted when the component closes.
-     * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
      */
-    nanoClosed: EventEmitter;
+    nanoClose: EventEmitter;
     /** Emitted after the details opens and all transitions are complete. */
-    nanoAfterOpened: EventEmitter;
+    nanoAfterOpen: EventEmitter;
     /** Emitted after the details closes and all transitions are complete. */
-    nanoAfterClosed: EventEmitter;
+    nanoAfterClose: EventEmitter;
     toggleClick(): void;
     private onKeyDown;
     private onMouseDown;
+    private handleTransitionEnd;
     private hide;
     private show;
     private attachMo;
-    componentWillLoad(): void;
     componentDidLoad(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/types/components/dialog/dialog.d.ts

@@ -3,6 +3,9 @@ import { StorageMethods } from '../../utils/store/component-store';
 /**
  * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
  *
+ * @version 1.0.0
+ * @status stable
+ *
  * @part base - The component’s base wrapper
  * @part overlay - The overlay that covers the screen behind the dialog
  * @part panel - The dialog’s panel (where the dialog and its content are rendered)
@@ -25,12 +28,12 @@ export declare class Dialog implements ComponentInterface {
     private originalTrigger;
     private overlay;
     private dialog;
+    private slotCtrl;
     get panel(): HTMLElement;
     set panel(p: HTMLElement);
     private _panel;
     host: HTMLNanoDialogElement;
     noDismiss: boolean;
-    hasFooter: boolean;
     hidden: boolean;
     /** Show a colour ribbon at the top of the modal */
     showRibbon: boolean;
@@ -43,9 +46,6 @@ export declare class Dialog implements ComponentInterface {
     /** Set to true to disable the header. This will also remove the default close button,
      * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */
     noHeader: boolean;
-    /** Set to true to disable the footer. This will also remove the footer close button,
-     * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */
-    noFooter: boolean;
     /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */
     noUserDismiss: boolean;
     /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */
@@ -75,7 +75,6 @@ export declare class Dialog implements ComponentInterface {
     private handleKeyDown;
     private requestClose;
     private handleTransitionEnd;
-    private handleSlotChange;
     private stopVideos;
     connectedCallback(): void;
     componentWillLoad(): void;

package/dist/types/components/dialog/dialog.helpers.d.ts

@@ -1,3 +1,4 @@
+import { ImperativeButton } from '../alert/alert.helpers';
 interface ImperativeDialogOptions {
     noUserDismiss: boolean;
     noHeader?: boolean;
@@ -11,9 +12,5 @@ interface ImperativeDialogOptions {
  * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }
  * @returns `Promise<void>`
  */
-export declare function nanoCreateDialog(body: string, buttons?: {
-    classes: string;
-    content: string;
-    handler: () => void;
-}[], dialogOptions?: ImperativeDialogOptions): HTMLNanoDialogElement;
+export declare function nanoCreateDialog(body: string, buttons?: ImperativeButton[], dialogOptions?: ImperativeDialogOptions): Promise<HTMLNanoDialogElement>;
 export {};

package/dist/types/components/drawer/drawer.d.ts

@@ -3,9 +3,13 @@ import { StorageMethods } from '../../utils/store/component-store';
 /**
  * Drawers slide in from a container to expose additional options and information.
  *
+ * @version 5.0.0
+ * @status stable
+ *
  * @slot - The drawer's main content
  * @slot label - The drawer's label. Alternatively, you can use the `label` attribute
  * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`
+ * @slot handle - The drawer's resize handle, used to resize the drawer when `resizable` is set
  * @slot footer - The drawer's footer, usually one or more buttons representing various options
  *
  * @part base - The component's base wrapper
@@ -13,6 +17,7 @@ import { StorageMethods } from '../../utils/store/component-store';
  * @part panel - The drawer's panel (where the drawer and its content are rendered)
  * @part header - The drawer's header. This element wraps the title and header actions
  * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`
+ * @part handle - The resize handle, used to resize the drawer when `resizable` is set
  * @part title - The drawer's title
  * @part close-button - The close button, an `<nano-icon-button>`
  * @part close-button__base - The close button's exported `base` part
@@ -25,11 +30,12 @@ export declare class Drawer implements ComponentInterface {
     private drawer;
     private overlay;
     private modal;
+    private slotCtrl;
     get panel(): HTMLElement;
     set panel(ele: HTMLElement);
     private _panel;
     noDismiss: boolean;
-    hasFooter: boolean;
+    isOpen: boolean;
     /**
      * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
      * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
@@ -60,6 +66,8 @@ export declare class Drawer implements ComponentInterface {
     noUserDismiss: boolean;
     /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */
     hoist: boolean;
+    /** Makes the drawer resizable */
+    resizable: boolean;
     handleHoistChange(): void;
     /** Emitted when the drawer opens. */
     nanoShow: EventEmitter;
@@ -80,7 +88,7 @@ export declare class Drawer implements ComponentInterface {
      * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
      * destructive behavior such as data loss.
      */
-    nanoRquestClose: EventEmitter<{
+    nanoRequestClose: EventEmitter<{
         source: 'close-button' | 'keyboard' | 'overlay';
     }>;
     /**
@@ -100,7 +108,10 @@ export declare class Drawer implements ComponentInterface {
     private removeOpenListeners;
     private handleDocumentKeyDown;
     private handleTransitionEnd;
-    private handleSlotChange;
+    get panelSize(): number;
+    set panelSize(size: number);
+    private handleKeyDown;
+    private handleDrag;
     connectedCallback(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;

package/dist/types/components/dropdown/dropdown.d.ts

@@ -1,10 +1,17 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { PopoverPlacement } from '../../utils/popover';
 /**
- * Dropdowns show additional content in a panel.
- * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
+ * Dropdowns expose additional content that “drops down” in a panel.
+ *
  * @slot trigger - The dropdown's trigger.
  * @slot - The dropdown's content.
+ *
+ * @part base - The base element of the dropdown.
+ * @part trigger - The trigger wrapper of the dropdown.
+ * @part panel - The wrapper around the dropdown content.
+ *
+ * @version 1.0.0
+ * @status stable
  */
 export declare class Dropdown implements ComponentInterface {
     private dropdownId;
@@ -16,6 +23,7 @@ export declare class Dropdown implements ComponentInterface {
     private positioner;
     private accessibleTrigger;
     private didLoad;
+    private focusFirstEle;
     private get menu();
     host: HTMLNanoDropdownElement;
     /** Determines if the dropdown should open automatically when the trigger is clicked */
@@ -85,13 +93,7 @@ export declare class Dropdown implements ComponentInterface {
     show(): Promise<void>;
     /** Hides the dropdown panel */
     hide(): Promise<void>;
-    /**
-     * Decides if the current active element or element
-     * connected to the current event is connected to the Dropdown
-     * @param e
-     * @returns whether the current focus is within the dropdown
-     */
-    private focusEleInDropDwn;
+    private afterHide;
     private togglePanel;
     private updateAccessibleTrigger;
     private handleDocumentKeyDown;

package/dist/types/components/field-validator/field-validator.d.ts

@@ -2,12 +2,10 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { ObservableMap } from '@stencil/store';
 import type { NanoFormEvent, PlainFormEvent, ValidationState, ValidatorValueStore } from './field-validator-interface';
 /**
- * A toolbox for `nano-...` form fields and form validation.
- * - Easy to add validation across field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
- * - Easy access to whole form and individual field validity states
- * - Easy access to form data payload
- * = Access to 2-way, data bound reactive store
- * - Scroll to invalid field on submit
+ * A toolbox to expose a form's data model and validation state
+ *
+ * @version 3.0.0
+ * @status stable
  */
 export declare class FieldValidator implements ComponentInterface {
     host: HTMLNanoFieldValidatorElement;

package/dist/types/components/footer/footer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The footer is used to provide navigation, copyright info and links to social media platforms.
+ *
+ * @slot top-start_heading - The heading for the top left section.
+ * @slot top-start_content - The content for the top left (form) section.
+ * @slot top-center_heading - The heading for the top center section.
+ * @slot top-center_content - The content for the top center (links) section.
+ * @slot top-end_heading - The heading for the top right section.
+ * @slot top-end_content - The content for the top right (links) section.
+ * @slot middle-end - The content for the middle end (certifications) section.
+ * @slot bottom-start - The content for the bottom left section (copyright notice - optional).
+ * @slot bottom-end - The content for the right side of the bottom section (language selector).
+ *
+ * @status new
+ * @version 8.0.0
+ */
+export declare class NanoFooter {
+    host: HTMLNanoFooterElement;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/form-control/form-control.d.ts

@@ -5,6 +5,7 @@ interface FormControlWrapProps {
     floatLabel: boolean;
     labelId: string;
     label: string;
+    alwaysShowPlaceholder: boolean;
     moreId: string;
     helperEndId: string;
     type?: TextFieldTypes;
@@ -20,6 +21,7 @@ interface FormControlWrapProps {
     maxlength?: number;
     charCount?: number;
     hasHelperEndSlot?: boolean;
+    class: any;
 }
 interface FormControlProps {
     clearControl: boolean;
@@ -28,9 +30,10 @@ interface FormControlProps {
     disabled: boolean;
     control: HTMLNanoInputElement | HTMLNanoSelectElement;
     ref?: (elm?: HTMLElement) => void;
-    endSlot?: VNode;
+    endSlot?: VNode | VNode[];
     endValueSlot?: VNode;
     startSlot?: VNode;
+    showInlineError: boolean;
 }
 export declare const FormControlWrap: FunctionalComponent<FormControlWrapProps>;
 export declare const FormControl: FunctionalComponent<FormControlProps>;