@loadsmart/miranda-wc 3.0.0-beta.7 → 3.0.0-beta.71

package/dist/components/table-v2/table-head.d.ts

@@ -0,0 +1,18 @@
+import { Component } from '../component';
+export declare class TableHead extends Component {
+    static styles: import("lit").CSSResult[][];
+    static get properties(): {
+        role: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static define(): void;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-table-head-v2': TableHead;
+    }
+}

package/dist/components/table-v2/table-row-expand.d.ts

@@ -0,0 +1,28 @@
+import { Component } from '../component';
+import '../button';
+import '../icon';
+export declare class TableRowExpand extends Component {
+    #private;
+    static styles: import("lit").CSSResult[][];
+    static get properties(): {
+        slot: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        isRowExpanded: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    isRowExpanded: boolean;
+    static define(): void;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-table-row-expand-v2': TableRowExpand;
+    }
+}

package/dist/components/table-v2/table-row-select.d.ts

@@ -0,0 +1,54 @@
+import type { PropertyValues } from 'lit';
+import { Component } from '../component';
+import type { TableRow } from './table-row';
+import type { Checkbox } from '../checkbox';
+import '../checkbox';
+export declare class TableRowSelect extends Component {
+    #private;
+    static styles: import("lit").CSSResult[][];
+    static get properties(): {
+        slot: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        isHeaderRow: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+        isFooterRow: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+        isExpanded: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+        isSelected: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+        isIndeterminate: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    isHeaderRow: boolean;
+    isFooterRow: boolean;
+    isExpanded: boolean;
+    isSelected: boolean;
+    isIndeterminate: boolean;
+    static define(): void;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    get checkbox(): Checkbox | null;
+    get row(): TableRow | null;
+    get rowValue(): string | null | undefined;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-table-row-select-v2': TableRowSelect;
+    }
+}

package/dist/components/table-v2/table-row.d.ts

@@ -0,0 +1,51 @@
+import { Component } from '../component';
+import type { TableRowProps } from './table.types';
+import './table-row-select';
+import './table-row-expand';
+declare const TableRow_base: typeof Component;
+export declare class TableRow extends TableRow_base {
+    #private;
+    static styles: import("lit").CSSResult[][];
+    static get properties(): {
+        role: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        gridColumns: {
+            type: StringConstructor;
+            state: boolean;
+        };
+        isTableSelectable: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+        isTableExpandable: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    value: TableRowProps['value'];
+    gridColumns: string;
+    isTableSelectable: boolean;
+    isTableExpandable: boolean;
+    static define(): void;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    get indeterminate(): boolean;
+    get selected(): boolean;
+    get expanded(): boolean;
+    get isHeaderRow(): boolean;
+    get isFooterRow(): boolean;
+    get hasExpansionContent(): boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-table-row-v2': TableRow;
+    }
+}
+export {};

package/dist/components/table-v2/table.constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TABLE_SELECT_EVENT = "select";
+export declare const TABLE_EXPAND_EVENT = "expand";
+export declare const TABLE_COLLAPSE_EVENT = "collapse";

package/dist/components/table-v2/table.context.d.ts

@@ -0,0 +1,7 @@
+import type { TableContext, TableRowContext } from './table.types';
+export declare const tableContext: {
+    __context__: TableContext;
+};
+export declare const tableRowContext: {
+    __context__: TableRowContext;
+};

package/dist/components/table-v2/table.d.ts

@@ -0,0 +1,60 @@
+import type { PropertyValues } from 'lit';
+import { fromAttribute } from '../../controllers/selection';
+import { Component } from '../component';
+import type { TableProps } from './table.types';
+export declare const defaultTableProps: {
+    readonly size: "default";
+};
+declare const Table_base: import("../../utils/types").Constructor<import("../../controllers/selection/selection-control.mixin").WithSelectionControlMixinInterface> & typeof Component;
+export declare class Table extends Table_base implements TableProps {
+    #private;
+    static styles: import("lit").CSSResult[][];
+    static get properties(): {
+        role: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        selectable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        expandable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        initialSelected: {
+            type: StringConstructor;
+            attribute: string;
+            fromAttribute: typeof fromAttribute;
+            reflect: boolean;
+        };
+        initialExpanded: {
+            type: StringConstructor;
+            attribute: string;
+            fromAttribute: typeof fromAttribute;
+            reflect: boolean;
+        };
+    };
+    size: TableProps['size'];
+    initialSelected: TableProps['initialSelected'];
+    initialExpanded: TableProps['initialExpanded'];
+    selectable: TableProps['selectable'];
+    expandable: TableProps['expandable'];
+    static define(): void;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-table-v2': Table;
+    }
+}
+export {};

package/dist/components/table-v2/table.styles.d.ts

@@ -0,0 +1,9 @@
+export declare function tableStyles(): import("lit").CSSResult[];
+export declare function tableHeadStyles(): import("lit").CSSResult[];
+export declare function tableBodyStyles(): import("lit").CSSResult[];
+export declare function tableFootStyles(): import("lit").CSSResult[];
+export declare function tableRowStyles(): import("lit").CSSResult[];
+export declare function tableControlExpandStyles(): import("lit").CSSResult[];
+export declare function tableControlSelectStyles(): import("lit").CSSResult[];
+export declare function tableCellStyles(): import("lit").CSSResult[];
+export declare function tableHeadCellStyles(): (import("lit").CSSResult | import("lit").CSSResult[])[];

package/dist/components/table-v2/table.types.d.ts

@@ -0,0 +1,143 @@
+import type { SelectionState, SelectionType, SelectionValue } from '../../controllers/selection';
+export type TableSize = 'small' | 'default' | 'large';
+export type TableCellAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+export type TableCellTextAlignment = 'left' | 'center' | 'right';
+export type TableSortDirection = 'asc' | 'desc';
+export type TableProps = {
+    /**
+     * Determines the height of the cell.
+     * @default 'default'
+     */
+    size?: TableSize;
+    /**
+     * Determines the initially selected rows.
+     */
+    initialSelected?: string[];
+    /**
+     * Determines the initially expanded rows.
+     */
+    initialExpanded?: string[];
+    /**
+     * Determines if the table is expandable.
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * Determines if the table is selectable.
+     * @default false
+     */
+    selectable?: boolean;
+};
+export type TableCellProps = {
+    /**
+     * Cell content alignment considering the cross axis.
+     * @default 'center'
+     */
+    align?: TableCellAlignment;
+    /**
+     * Cell content alignment considering the main axis.
+     * @default 'flex-start'
+     */
+    justify?: TableCellAlignment;
+    /**
+     * The number of columns a cell should span.
+     * @default 1
+     */
+    colspan?: number;
+    /**
+     * The text alignment of the cell.
+     * @default 'left'
+     */
+    textAlign?: TableCellTextAlignment;
+};
+export type TableHeadCellSortEventDetails = {
+    columnId: string;
+    sortDirection: TableSortDirection | undefined;
+};
+export type TableHeadCellProps = TableCellProps & {
+    /**
+     * The number of columns a cell should span.
+     * @default 1
+     */
+    colspan?: number;
+    /**
+     * Useful to identify the selected column header when sorting.
+     */
+    columnId: string;
+    /**
+     * If true, the sort handle will be rendered next to the main content.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * If sortable is true and sortDirection is provided, the handle icon will point to the given direction, otherwise, it will show up-down arrows.
+     */
+    sortDirection?: TableSortDirection;
+    /**
+     * Applies disabled styles to the cell. Even if sortable is true, it won't be clickable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The width of the cell.
+     * @example
+     * ```html
+     * <m-table-cell width="100px">
+     * 	Cell content
+     * </m-table-cell>
+     * <m-table-cell width="20rem">
+     * 	Cell content
+     * </m-table-cell>
+     * <m-table-cell width="100">
+     * 	Cell content
+     * </m-table-cell>
+     * ```
+     */
+    width?: string;
+    /**
+     * Click event handler for sortable head cells.
+     */
+    oncolumnsort?: (event: CustomEvent<TableHeadCellSortEventDetails>) => void;
+};
+export type TableRowProps = {
+    /**
+     * The value of the row. Use this to identify the row when selecting or expanding.
+     * Alternatively, you can use the id property.
+     */
+    value?: string;
+    /**
+     * The id of the row. Use this to identify the row when expanding.
+     * You can also use the value property.
+     */
+    id?: string;
+};
+export type TableActionsProps = {
+    /**
+     * Should the actions section stick to the bottom of the table.
+     * @default false
+     */
+    sticky?: boolean;
+};
+export type TableContext = {
+    gridColumns: string;
+    isSelectable: boolean;
+    selectionType: SelectionType;
+    allValues: SelectionState;
+    selectedValues: SelectionState;
+    isExpandable: boolean;
+    expansionType: SelectionType;
+    expandedRows: SelectionState;
+};
+export type TableRowContext = {
+    isExpanded: boolean;
+    isIndeterminate: boolean;
+    isSelected: boolean;
+    isHeaderRow: boolean;
+    isFooterRow: boolean;
+};
+export type TableSelectEventDetails = {
+    value?: SelectionValue<string>;
+};
+export type TableExpandEventDetails = {
+    value?: SelectionValue<string>;
+};

package/dist/components/tabs/tab-panel.d.ts

@@ -69,9 +69,21 @@ export declare class TabPanel extends Box implements TabPanelProps {
      * Otherwise it's just hidden.
      */
     lazy: TabPanelProps['lazy'];
-    private tabs;
+    /**
+     * Determines whether the tab panel is selected.
+     */
+    private selected;
+    /**
+     * MutationObserver for the tab related to this panel.
+     */
+    private tabObserver;
+    static define(): void;
     constructor();
+    getRelatedTabNode(): Element;
+    observeTab(): void;
     connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/tabs/tab.d.ts

@@ -7,6 +7,7 @@ export declare class Tab extends Component implements TabProps {
     static get properties(): {
         name: {
             type: StringConstructor;
+            reflect: boolean;
         };
         disabled: {
             type: BooleanConstructor;
@@ -16,7 +17,12 @@ export declare class Tab extends Component implements TabProps {
             type: StringConstructor;
             reflect: boolean;
         };
+        lazy: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
     };
+    lazy?: boolean;
     slot: string;
     /**
      * Name of the tab, raised with the event.
@@ -27,6 +33,7 @@ export declare class Tab extends Component implements TabProps {
      */
     disabled: TabProps['disabled'];
     private tabs;
+    static define(): void;
     constructor();
     connectedCallback(): void;
     protected updated(changedProperties: PropertyValues<this>): void;

package/dist/components/tabs/tabs.d.ts

@@ -1,61 +1,8 @@
-import type { PropertyValues } from 'lit';
-import type { SelectionState, SelectionType } from '../../controllers/selection';
 import { Component } from '../component';
-import type { TabsProps } from './tabs.types';
-export declare class Tabs extends Component implements TabsProps {
-    #private;
+declare const Tabs_base: import("../../utils/types").Constructor<import("../../mixins/with-tabs").WithTabsProps> & typeof Component;
+export declare class Tabs extends Tabs_base {
     static styles: import("lit").CSSResult[];
-    static get properties(): {
-        activeTab: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        lazy: {
-            type: BooleanConstructor;
-        };
-        selection: {
-            state: boolean;
-        };
-        tabContentDirection: {
-            type: StringConstructor;
-            attribute: string;
-        };
-    };
-    /**
-     * Controlled value of the selected tab.
-     */
-    activeTab: TabsProps['activeTab'];
-    /**
-     * Direction of the tabs content.
-     */
-    tabContentDirection: TabsProps['tabContentDirection'];
-    /**
-     * Should the tabs be disabled.
-     */
-    disabled: TabsProps['disabled'];
-    /**
-     * If set to true, the tab-panels content will only be rendered if the tab is selected.
-     * Otherwise it's just hidden.
-     */
-    lazy: TabsProps['lazy'];
-    /**
-     * Type of selection to be managed.
-     * It is necessary due to eligibility as a SelectionHost for the SelectionController.
-     */
-    type: SelectionType;
-    /**
-     * Inner tab selection state.
-     */
-    selection: SelectionState;
-    private provider;
-    constructor();
-    connectedCallback(): void;
-    protected update(changedProperties: PropertyValues<this>): void;
+    static define(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -63,3 +10,4 @@ declare global {
         'm-tabs': Tabs;
     }
 }
+export {};

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

@@ -3,7 +3,7 @@ export type TabContentDirection = 'vertical' | 'horizontal';
 export type TabChangeEventDetail = {
     value: AcceptedType;
 };
-export type TabsProps = {
+export interface TabsProps {
     /**
      * Controlled value of the selected tab.
      */
@@ -26,7 +26,7 @@ export type TabsProps = {
      * Event triggered on tab change.
      */
     ontabchange?: (event: CustomEvent<TabChangeEventDetail>) => void;
-};
+}
 export type TabProps = {
     /**
      * Name of the tab, raised with the event.

package/dist/components/tag/actionable-tag.d.ts

@@ -75,6 +75,7 @@ export declare class ActionableTag extends Component implements ActionableTagPro
      * Event handler for removing the tag.
      */
     onremove: ActionableTagProps['onremove'];
+    static define(): void;
     constructor();
     /**
      * Which HTML tag should be used to render this element.

package/dist/components/tag/tag.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { Component } from '../component';
 export type TagVariant = 'success' | 'neutral' | 'warning' | 'danger' | 'info';
 export type TagSize = 'small' | 'default' | 'large';
 export interface TagProps {
@@ -6,7 +6,7 @@ export interface TagProps {
     size?: TagSize;
     isSkeleton?: boolean;
 }
-export declare class Tag extends LitElement implements TagProps {
+export declare class Tag extends Component implements TagProps {
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[][];
     static get properties(): {
         variant: {
@@ -32,6 +32,7 @@ export declare class Tag extends LitElement implements TagProps {
      * Tag skeleton loader.
      */
     isSkeleton: boolean;
+    static define(): void;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/text/text.d.ts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import type { ColorToken } from '@loadsmart/miranda-tokens';
+import { Component } from '../component';
 import type { TypographyVariant } from '../../styles';
 type HTMLTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
 export interface TextProps {
@@ -9,7 +9,7 @@ export interface TextProps {
     ellipsized?: boolean;
     variant?: TypographyVariant;
 }
-export declare class Text extends LitElement implements TextProps {
+export declare class Text extends Component implements TextProps {
     static styles: import("lit").CSSResult[];
     static get properties(): {
         as: {
@@ -50,6 +50,7 @@ export declare class Text extends LitElement implements TextProps {
      * @deprecated wrap the text in the desired tag
      */
     as?: HTMLTag;
+    static define(): void;
     constructor();
     protected update(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult;

package/dist/components/text-area/text-area.d.ts

@@ -163,8 +163,14 @@ export declare class TextArea extends FormComponent implements TextAreaProps {
      * If this attribute is not specified, soft is its default value.
      */
     wrap: TextAreaProps['wrap'];
+    /**
+     * We use this private variable to store the pending value
+     * when the internal textarea hasn't been rendered yet.
+     */
+    private pendingValue;
+    static define(): void;
     constructor();
-    createRenderRoot(): Element | ShadowRoot;
+    createRenderRoot(): DocumentFragment | HTMLElement;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     update(changedProperties: PropertyValues<this>): void;

package/dist/components/text-field/text-field.d.ts

@@ -1,8 +1,9 @@
 import type { PropertyValues } from 'lit';
-import { FormComponent } from '../component';
+import { Component } from '../component';
 import type { FormComponentProps } from '../component';
 import '../close-button';
 export type TextFieldSize = 'small' | 'default' | 'large';
+type InputValue = string | readonly string[] | number;
 export interface TextFieldProps extends FormComponentProps {
     autocomplete?: HTMLInputElement['autocomplete'];
     clearable?: boolean;
@@ -18,18 +19,20 @@ export interface TextFieldProps extends FormComponentProps {
     size?: TextFieldSize;
     step?: string;
     type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'time';
-    value?: string;
+    value?: InputValue;
     input: HTMLInputElement | null;
     onclear?: (event: CustomEvent) => void;
     onchange?: GlobalEventHandlers['onchange'];
     oninput?: GlobalEventHandlers['oninput'];
 }
-export declare class TextField extends FormComponent implements TextFieldProps {
+declare const TextField_base: import("../../utils/types").Constructor<import("../component/form-component.mixin").WithFormComponentMixinInterface> & typeof Component;
+export declare class TextField extends TextField_base implements TextFieldProps {
     #private;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     static styles: import("lit").CSSResult[];
     static get properties(): {
@@ -164,8 +167,22 @@ export declare class TextField extends FormComponent implements TextFieldProps {
      * Input type.
      */
     type: TextFieldProps['type'];
+    /**
+     * The <form> element to associate the component with (its form owner). The value of
+     * this attribute must be the id of a <form> in the same document. (If this attribute
+     * is not set, the component is associated with its ancestor <form> element, if any).
+     * This is useful only when the component has a specific behavior related to form submission.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form|MDN docs, input}
+     */
+    form: TextFieldProps['form'];
+    /**
+     * We use this private variable to store the pending value
+     * when the internal input hasn't been rendered yet.
+     */
+    private pendingValue;
+    static define(): void;
     constructor();
-    createRenderRoot(): Element | ShadowRoot;
+    createRenderRoot(): DocumentFragment | HTMLElement;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     update(changedProperties: PropertyValues<this>): void;
@@ -175,10 +192,16 @@ export declare class TextField extends FormComponent implements TextFieldProps {
     /**
      * Text field value.
      */
-    set value(value: string);
-    get value(): string;
+    set value(value: InputValue | undefined);
+    get value(): HTMLInputElement['value'];
+    get selectionStart(): HTMLInputElement['selectionStart'];
+    get selectionEnd(): HTMLInputElement['selectionEnd'];
+    get selectionDirection(): HTMLInputElement['selectionDirection'];
     clear(): void;
     focus(): void;
+    select(): void;
+    setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none'): void;
+    setRangeText(replacement: string, start?: number, end?: number, selectionMode?: SelectionMode): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;
     formDisabledCallback(disabled: boolean): void;
@@ -188,3 +211,4 @@ declare global {
         'm-text-field': TextField;
     }
 }
+export {};