igniteui-webcomponents 5.3.0-beta.1 → 5.3.0-beta.2

package/components/popover/popover.d.ts

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+/**
+ * Describes the preferred placement of a toggle component.
+ */
+export type IgcPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+/**
+ * @element igc-popover
+ *
+ * @slot - Content of the popover.
+ * @slot anchor - The element the popover will be anchored to.
+ *
+ * @csspart container - The container wrapping the slotted content in the popover.
+ */
+export default class IgcPopoverComponent extends LitElement {
+    static readonly tagName = "igc-popover";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    private dispose?;
+    private target?;
+    private _container;
+    private _anchors;
+    /**
+     * Pass an IDREF or an DOM element reference to use as the
+     * anchor target for the floating element.
+     */
+    anchor?: Element | string;
+    /**
+     * When enabled this changes the placement of the floating element in order to keep it
+     * in view along the main axis.
+     */
+    flip: boolean;
+    /**
+     * Placement modifier which translates the floating element along the main axis.
+     */
+    offset: number;
+    /**
+     * The visibility state of the popover component.
+     */
+    open: boolean;
+    /**
+     * Where to place the floating element relative to the parent anchor element.
+     */
+    placement: IgcPlacement;
+    /**
+     * When enabled the floating element will match the width of its parent anchor element.
+     */
+    sameWidth: boolean;
+    /**
+     * When enabled this tries to shift the floating element along the main axis
+     * keeping it in view, preventing overflow while maintaining the desired placement.
+     */
+    shift: boolean;
+    protected anchorChange(): Promise<void>;
+    protected openChange(): void;
+    protected floatingPropChange(): void;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    protected show(): void;
+    protected hide(): Promise<void>;
+    private _showPopover;
+    private _hidePopover;
+    private _createMiddleware;
+    private _updateState;
+    private _updatePosition;
+    private _anchorSlotChange;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-popover': IgcPopoverComponent;
+    }
+}

package/components/popover/themes/light/popover.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/base.d.ts

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+import type { StyleInfo } from 'lit/directives/style-map.js';
+import type { StyleVariant } from '../types.js';
+export declare abstract class IgcProgressBaseComponent extends LitElement {
+    private readonly __internals;
+    protected _assignedElements: HTMLElement[];
+    protected _base: HTMLElement;
+    protected _percentage: number;
+    protected _progress: number;
+    protected _hasFraction: boolean;
+    protected _styleInfo: StyleInfo;
+    /**
+     * Maximum value of the control.
+     * @attr
+     */
+    max: number;
+    /**
+     * The value of the control.
+     * @attr
+     */
+    value: number;
+    /**
+     * The variant of the control.
+     * @attr
+     */
+    variant: StyleVariant;
+    /**
+     * Animation duration in milliseconds.
+     * @attr animation-duration
+     */
+    animationDuration: number;
+    /**
+     * The indeterminate state of the control.
+     * @attr
+     */
+    indeterminate: boolean;
+    /**
+     * Shows/hides the label of the control.
+     * @attr hide-label
+     */
+    hideLabel: boolean;
+    /**
+     * Format string for the default label of the control.
+     * Placeholders:
+     *  {0} - current value of the control.
+     *  {1} - max value of the control.
+     * @attr label-format
+     */
+    labelFormat: string;
+    protected indeterminateChange(): void;
+    protected maxChange(): void;
+    protected valueChange(): void;
+    constructor();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected updated(): void;
+    private _updateARIA;
+    private _updateProgress;
+    protected renderLabel(): import("lit-html").TemplateResult<1>;
+    protected renderLabelFormat(): string;
+    protected renderDefaultSlot(): import("lit-html").TemplateResult<1>;
+}

package/components/progress/circular-gradient.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * Used for defining gradient stops in the igc-circular-progress.
+ * For each `igc-circular-gradient` defined as `gradient` slot of `igc-circular-progress` element would be created a SVG stop element.
+ * The values passed as `color`, `offset` and `opacity` would be set as
+ * `stop-color`, `offset` and `stop-opacity` of the SVG element without further validations.
+ *
+ * @element igc-circular-gradient
+ *
+ */
+export default class IgcCircularGradientComponent extends LitElement {
+    static readonly tagName = "igc-circular-gradient";
+    static register(): void;
+    /**
+     * Defines where the gradient stop is placed along the gradient vector
+     * @attr
+     */
+    offset: string;
+    /**
+     * Defines the color of the gradient stop
+     * @attr
+     */
+    color: string;
+    /**
+     * Defines the opacity of the gradient stop
+     * @attr
+     */
+    opacity: number;
+    protected render(): symbol;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-circular-gradient': IgcCircularGradientComponent;
+    }
+}

package/components/progress/circular-progress.d.ts

@@ -0,0 +1,39 @@
+import { IgcProgressBaseComponent } from './base.js';
+/**
+ * A circular progress indicator used to express unspecified wait time or display
+ * the length of a process.
+ *
+ * @element igc-circular-progress
+ *
+ * @slot - The text area container.
+ * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.
+ *
+ * @csspart svg - The igc-circular-progress SVG element.
+ * @csspart gradient_start - The igc-circular-progress linear-gradient start color.
+ * @csspart gradient_end - The igc-circular-progress linear-gradient end color.
+ * @csspart track - The igc-circular-progress ring track area.
+ * @csspart fill - The igc-circular-progress indicator area.
+ * @csspart label - The igc-circular-progress label.
+ * @csspart value - The igc-circular-progress label value.
+ * @csspart indeterminate - The igc-circular-progress indeterminate state.
+ * @csspart primary - The igc-circular-progress primary state.
+ * @csspart danger - The igc-circular-progress error state.
+ * @csspart warning - The igc-circular-progress warning state.
+ * @csspart info - The igc-circular-progress info state.
+ * @csspart success - The igc-circular-progress success state.
+ */
+export default class IgcCircularProgressComponent extends IgcProgressBaseComponent {
+    static readonly tagName = "igc-circular-progress";
+    static styles: import("lit").CSSResult[];
+    private static readonly increment;
+    static register(): void;
+    private _gradientId;
+    private _assignedGradients;
+    protected renderSvg(): import("lit-html").TemplateResult<2>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-circular-progress': IgcCircularProgressComponent;
+    }
+}

package/components/progress/linear-progress.d.ts

@@ -0,0 +1,42 @@
+import { IgcProgressBaseComponent } from './base.js';
+/**
+ * A linear progress indicator used to express unspecified wait time or display
+ * the length of a process.
+ *
+ * @element igc-linear-progress
+ *
+ * @slot - The text area container.
+ *
+ * @csspart track - The igc-linear-progress track area.
+ * @csspart fill - The igc-linear-progress indicator area.
+ * @csspart striped - The igc-linear-progress striped indicator.
+ * @csspart label - The igc-linear-progress label.
+ * @csspart value - The igc-linear-progress label value.
+ * @csspart indeterminate - The igc-linear-progress indeterminate state.
+ * @csspart primary - The igc-linear-progress indicator primary state.
+ * @csspart danger - The igc-linear-progress indicator error state.
+ * @csspart warning - The igc-linear-progress indicator warning state.
+ * @csspart info - The igc-linear-progress indicator info state.
+ * @csspart success - The igc-linear-progress indicator success state.
+ */
+export default class IgcLinearProgressComponent extends IgcProgressBaseComponent {
+    static readonly tagName = "igc-linear-progress";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    /**
+     * Sets the striped look of the control.
+     * @attr
+     */
+    striped: boolean;
+    /**
+     * The position for the default label of the control.
+     * @attr label-align
+     */
+    labelAlign: 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-linear-progress': IgcLinearProgressComponent;
+    }
+}

package/components/progress/themes/circular/circular.progress.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/dark/circular.progress.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/dark/circular.progress.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/dark/circular.progress.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/dark/circular.progress.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/dark/circular.progress.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/light/circular.progress.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/light/circular.progress.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/light/circular.progress.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/light/circular.progress.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/light/circular.progress.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/shared/circular.progress.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/shared/circular.progress.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/shared/circular.progress.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/shared/circular.progress.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/circular/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../../theming/types.js';
+export declare const all: Themes;

package/components/progress/themes/linear/dark/linear.progress.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/dark/linear.progress.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/dark/linear.progress.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/dark/linear.progress.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/dark/linear.progress.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/light/linear.progress.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/light/linear.progress.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/light/linear.progress.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/light/linear.progress.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/light/linear.progress.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/linear.progress.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/shared/linear.progress.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/shared/linear.progress.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/shared/linear.progress.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/shared/linear.progress.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/progress/themes/linear/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../../theming/types.js';
+export declare const all: Themes;

package/components/radio/radio.d.ts

@@ -0,0 +1,101 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { type FormValue } from '../common/mixins/forms/form-value.js';
+export interface RadioChangeEventArgs {
+    checked: boolean;
+    value?: string;
+}
+export interface IgcRadioComponentEventMap {
+    igcChange: CustomEvent<RadioChangeEventArgs>;
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
+declare const IgcRadioComponent_base: Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedCheckboxElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRadioComponentEventMap>> & Constructor<LitElement>;
+/**
+ * @element igc-radio
+ *
+ * @slot - The radio label.
+ * @slot helper-text - Renders content below the input.
+ * @slot value-missing - Renders content when the required validation fails.
+ * @slot custom-error - Renders content when setCustomValidity(message) is set.
+ * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
+ *
+ * @fires igcChange - Emitted when the control's checked state changes.
+ *
+ * @csspart base - The radio control base wrapper.
+ * @csspart control - The radio input control.
+ * @csspart label - The radio control label.
+ */
+export default class IgcRadioComponent extends IgcRadioComponent_base {
+    static readonly tagName = "igc-radio";
+    protected static styles: import("lit").CSSResult[];
+    static register(): void;
+    private static readonly increment;
+    protected get __validators(): import("../common/validators.js").Validator<IgcRadioComponent>[];
+    protected _formValue: FormValue<boolean>;
+    private inputId;
+    private labelId;
+    private _kbFocus;
+    protected _value: string;
+    protected input: HTMLInputElement;
+    protected label: Array<Node>;
+    protected hideLabel: boolean;
+    private _tabIndex;
+    /** Returns all radio elements from the group, that is having the same name property. */
+    private get _radios();
+    /** All sibling radio elements of the one invoking the getter. */
+    private get _siblings();
+    /** All non-disabled radio elements from the group. */
+    private get _active();
+    /** All checked radio elements from the group. */
+    private get _checkedRadios();
+    set required(value: boolean);
+    get required(): boolean;
+    /**
+     * The value attribute of the control.
+     * @attr
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * The checked state of the control.
+     * @attr
+     */
+    set checked(value: boolean);
+    get checked(): boolean;
+    /**
+     * The label position of the radio control.
+     * @attr label-position
+     */
+    labelPosition: 'before' | 'after';
+    constructor();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(): Promise<void>;
+    protected _setDefaultValue(current: string | null): void;
+    /** Simulates a click on the radio control. */
+    click(): void;
+    /** Sets focus on the radio control. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the radio control. */
+    blur(): void;
+    /**
+     * Sets a custom validation message for the control.
+     * As long as `message` is not empty, the control is considered invalid.
+     */
+    setCustomValidity(message: string): void;
+    private _updateCheckedState;
+    protected formResetCallback(): void;
+    /** Called after a form reset callback to restore default keyboard navigation. */
+    private _resetTabIndexes;
+    protected handleClick(event: PointerEvent): void;
+    protected handleBlur(): void;
+    protected navigate(idx: number): void;
+    protected renderValidatorContainer(): TemplateResult;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-radio': IgcRadioComponent;
+    }
+}
+export {};

package/components/radio/themes/dark/radio.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/dark/radio.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/dark/radio.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/dark/radio.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/light/radio.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/light/radio.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/light/radio.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/light/radio.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/light/radio.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/radio.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/shared/radio.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/shared/radio.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/shared/radio.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/shared/radio.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/shared/radio.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio/themes/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../theming/types.js';
+export declare const all: Themes;

package/components/radio/utils.d.ts

@@ -0,0 +1,13 @@
+import type IgcRadioComponent from './radio.js';
+type RadioQueryResult = {
+    /** Radio components under the same group name */
+    radios: IgcRadioComponent[];
+    /** Radio components under the same group name that are not disabled */
+    active: IgcRadioComponent[];
+    /** Radio components under the same group name sans the radio member passed in `getGroup` */
+    siblings: IgcRadioComponent[];
+    /** Radio components under the same group name that are marked as checked */
+    checked: IgcRadioComponent[];
+};
+export declare function getGroup(member: IgcRadioComponent): RadioQueryResult;
+export {};

package/components/radio/validators.d.ts

@@ -0,0 +1,3 @@
+import type { Validator } from '../common/validators.js';
+import type IgcRadioComponent from './radio.js';
+export declare const radioValidators: Validator<IgcRadioComponent>[];

package/components/radio-group/radio-group.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio-group/radio-group.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * The igc-radio-group component unifies one or more igc-radio buttons.
+ *
+ * @element igc-radio-group
+ *
+ * @slot - Default slot
+ */
+export default class IgcRadioGroupComponent extends LitElement {
+    static readonly tagName = "igc-radio-group";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    private _defaultValue;
+    private _internals;
+    private _name;
+    private _value;
+    private _radios;
+    /**
+     * Alignment of the radio controls inside this group.
+     * @attr
+     */
+    alignment: 'vertical' | 'horizontal';
+    set defaultValue(value: string);
+    get defaultValue(): string;
+    /**
+     * Gets/Sets the name for all child igc-radio components.
+     * @attr
+     */
+    set name(value: string);
+    get name(): string;
+    /**
+     * Gets/Sets the checked igc-radio element that matches `value`
+     * @attr
+     */
+    set value(value: string);
+    get value(): string;
+    constructor();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(): void;
+    private _setCSSGridVars;
+    private _setRadiosDefaultChecked;
+    private _setRadiosName;
+    private _setDefaultValue;
+    private _setSelectedRadio;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-radio-group': IgcRadioGroupComponent;
+    }
+}

package/components/radio-group/radio-group.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio-group/radio-group.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/radio-group/radio-group.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/rating/rating-symbol.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * Used when a custom icon/symbol/element needs to be passed to the igc-rating component.
+ *
+ * @element igc-rating-symbol
+ *
+ * @slot - Default slot for projected full symbols/icons.
+ * @slot empty - Default slot for projected empty symbols/icons.
+ *
+ * @csspart symbol - The symbol wrapping container.
+ * @csspart full - The full symbol wrapping container.
+ * @csspart empty - The empty symbol wrapping container.
+ */
+export default class IgcRatingSymbolComponent extends LitElement {
+    static readonly tagName = "igc-rating-symbol";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-rating-symbol': IgcRatingSymbolComponent;
+    }
+}