@loadsmart/miranda-wc
Version:
Miranda Web Components component library
109 lines (108 loc) • 3.47 kB
TypeScript
import type { PropertyValues } from 'lit';
import { Component } from '../component';
import { fromAttribute } from '../../controllers/selection';
import type { SelectionType } from '../../controllers/selection';
import '../layout/group';
import type { SelectionValue } from '../../utils/selection/selection-strategy.types';
export type ToggleSize = 'small' | 'default';
export interface ToggleGroupProps {
initialValue?: SelectionValue;
disabled?: boolean;
name?: string;
showCheck?: boolean;
size?: ToggleSize;
type?: SelectionType;
value?: SelectionValue;
onchange?: GlobalEventHandlers['onchange'];
}
declare const ToggleGroup_base: import("../../utils/types").Constructor<import("../../controllers/selection/selection-control.mixin").WithSelectionControlMixinInterface> & typeof Component;
export declare class ToggleGroup extends ToggleGroup_base implements ToggleGroupProps {
#private;
static styles: import("lit").CSSResult[][];
static get properties(): {
disabled: {
type: BooleanConstructor;
};
initialValue: {
type: StringConstructor;
attribute: string;
fromAttribute: typeof fromAttribute;
reflect: boolean;
};
/**
* We use a different property name internally so the react wrapper can still
* keep track of the property while we can use custom getter/setter to
* set and reflect the `value` attribute.
*/
providedValue: {
type: StringConstructor;
attribute: string;
fromAttribute: typeof fromAttribute;
};
name: {
type: StringConstructor;
reflect: boolean;
};
showCheck: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
size: {
type: StringConstructor;
reflect: boolean;
};
type: {
type: StringConstructor;
reflect: boolean;
};
};
/**
* Should the toggle group be disabled.
* @default false
*/
disabled: ToggleGroupProps['disabled'];
/**
* Should show the check icon when selected.
* The check icon is the default content for the `leading` slot.
* @default false
*/
showCheck: ToggleGroupProps['showCheck'];
/**
* Strategy for toggling.
* @default 'single'
*/
type: NonNullable<ToggleGroupProps['type']>;
/**
* The size of each toggle.
* @default 'default'
*/
size: NonNullable<ToggleGroupProps['size']>;
/**
* Name that will represent this toggle group in the form.
*/
name?: ToggleGroupProps['name'];
/**
* Value that will be selected by default on initialization and form reset.
*/
initialValue: ToggleGroupProps['initialValue'];
/**
* Current selected value.
*/
providedValue: ToggleGroupProps['value'];
static define(): void;
constructor();
connectedCallback(): Promise<void>;
disconnectedCallback(): void;
protected update(changedProperties: PropertyValues<this>): void;
render(): import("lit-html").TemplateResult<1>;
get value(): SelectionValue;
set value(value: SelectionValue);
protected handleFormReset: () => void;
}
declare global {
interface HTMLElementTagNameMap {
'm-toggle-group': ToggleGroup;
}
}
export {};