@pine-ds/core 2.15.0-mercury.0 → 2.15.0

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

@@ -1,11 +1,53 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
 export declare class PdsInput {
+    private nativeInput?;
+    private inheritedAttributes;
+    private isComposing;
+    /**
+     * The value of the input when the input is focused.
+     */
+    private focusedValue?;
+    private originalPdsInput?;
+    el: HTMLPdsInputElement;
+    /**
+     * Emitted when the input loses focus.
+     */
+    pdsBlur: EventEmitter<FocusEvent>;
+    /**
+     *
+     * Emitted when the value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    pdsChange: EventEmitter<InputChangeEventDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    pdsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when a keyboard input occurs.
+     */
+    pdsInput: EventEmitter<InputInputEventDetail>;
+    /**
+     * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Specifies if and how the browser provides `autocomplete` assistance for the field.
+     */
+    autocomplete: string;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */
     componentId: string;
     /**
-     * Indicates whether or not the input field is disabled.
+     * Sets the number of milliseconds to wait before updating the value.
+     */
+    debounce?: number;
+    /**
+     * Determines whether or not the input field is disabled.
      */
     disabled?: boolean;
     /**
@@ -17,7 +59,7 @@ export declare class PdsInput {
      */
     helperMessage?: string;
     /**
-     * Indicates whether or not the input field is invalid or throws an error.
+     * Determines whether or not the input field is invalid or throws an error.
      */
     invalid?: boolean;
     /**
@@ -33,27 +75,46 @@ export declare class PdsInput {
      */
     placeholder?: string;
     /**
-     * Indicates whether or not the input field is readonly.
+     * Determines whether or not the input field is readonly.
      */
     readonly?: boolean;
     /**
-     * Indicates whether or not the input field is required.
+     * Determines whether or not the input field is required.
      */
     required?: boolean;
     /**
      * Determines the type of control that will be displayed
-     `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`
+     * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`
      * @defaultValue "text"
      */
     type: string;
     /**
      * The value of the input.
      */
-    value?: string;
+    value?: string | number | null;
     /**
-     * Emitted when a keyboard input occurred.
+     * Determines if the input has focus.
      */
-    pdsInput: EventEmitter<InputEvent>;
+    hasFocus: boolean;
+    protected debounceChanged(): void;
+    protected valueChanged(): void;
+    private getValue;
     private onInputEvent;
+    private onChangeEvent;
+    private onBlurEvent;
+    private onFocusEvent;
+    private onCompositionStart;
+    private onCompositionEnd;
+    /**
+     * Emits a pdsChange event
+     */
+    private emitValueChange;
+    /**
+     *
+     * Emits a `pdsInput` event
+     */
+    private emitInputChange;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/pds-link/pds-link.d.ts

@@ -1,6 +1,6 @@
 /**
- * @part link - The main link element that represents the link component.
- * @slot - Content is placed between the opening closing tags.
+ * @part link - Link element styles.
+ * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
  */
 export declare class PdsLink {
     /**
@@ -8,26 +8,22 @@ export declare class PdsLink {
      */
     componentId: string;
     /**
-     * When enabled, opens link in a new tab.
+     * Determines whether the link should open in a new tab.
      * @defaultValue false
      */
     external: boolean;
     /**
-     *
-     * Modifies the look of the link
+     * Sets the link variant styles.
+     * @defaultValue inline
      */
     variant: 'inline' | 'plain';
     /**
-     *
-     * The Font size follows t-shirt model
-     * sm: 12px
-     * md: 14px
-     * lg: 16px
+     * The font size of the link's text.
      * @defaultValue lg
      */
     fontSize: 'sm' | 'md' | 'lg';
     /**
-     * The URL that the hyperlink points to.
+     * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.
      */
     href: string;
     private classNames;

package/dist/types/components/pds-popover/pds-popover.d.ts

@@ -0,0 +1,45 @@
+import { PlacementType } from "../../utils/types";
+export declare class PdsPopover {
+    /**
+     * Reference to the Host element
+     */
+    el: HTMLPdsPopoverElement;
+    /**
+     * Determines when the popover is active
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
+     * @defaultValue "show"
+     */
+    popoverTargetAction: 'show' | 'toggle' | 'hide';
+    /**
+     * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
+     * Manual popovers require the consumer to handle the visibility of the popover.
+     */
+    popoverType: 'auto' | 'manual';
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Text that appears on the trigger element
+     */
+    text: string;
+    /**
+     * Sets the maximum width of the popover content
+     * @defaultValue 352
+     */
+    maxWidth?: number;
+    /**
+     * Determines the preferred position of the popover
+     * @defaultValue "right"
+     */
+    placement: PlacementType;
+    componentWillRender(): void;
+    handleClick(): void;
+    handleScroll(): void;
+    private handlePopoverPositioning;
+    render(): any;
+}

package/dist/types/components/pds-radio/pds-radio.d.ts

@@ -5,32 +5,32 @@ export declare class PdsRadio {
      * @defaultValue false
      */
     checked: boolean;
+    /**
+     * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
+     */
+    componentId: string;
     /**
      * Determines whether or not the radio is disabled.
      * @defaultValue false
      */
     disabled: boolean;
     /**
-     * Displays message text describing an invalid state.
+     * Displays error message text describing an invalid state.
      */
     errorMessage: string;
     /**
-     * Determines whether or not the radio is invalid.
-     * @defaultValue false
+     * Displays helper message text below radio.
      */
-    invalid: boolean;
+    helperMessage: string;
     /**
-     * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
-     */
-    componentId: string;
+   * Determines whether or not the radio is invalid.
+   * @defaultValue false
+   */
+    invalid: boolean;
     /**
      * String used for label text next to radio.
      */
     label: string;
-    /**
-     * String used for helper message below radio.
-     */
-    helperMessage: string;
     /**
      * String used for radio `name` attribute.
      */

package/dist/types/components/pds-select/pds-select.d.ts

@@ -0,0 +1,91 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsSelect {
+    private selectEl;
+    private slotContainer;
+    /**
+     * Specifies if and how the browser provides `autocomplete` assistance for the field.
+     */
+    autocomplete: string;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Indicates whether or not the select field is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Displays error message text describing an invalid state.
+     */
+    errorMessage: string;
+    /**
+     * Displays helper message text below select.
+     */
+    helperMessage: string;
+    /**
+     * Determines whether or not the select is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Text to be displayed as the select label.
+     */
+    label: string;
+    /**
+     * Indicates whether multiple options can be selected.
+     * @defaultValue false
+     */
+    multiple: boolean;
+    /**
+     * Specifies the name. Submitted with the form name/value pair.
+     */
+    name: string;
+    /**
+     * Indicates whether or not the select field is required.
+     * @defaultValue false
+     */
+    required: boolean;
+    /**
+     * The value(s) of the selected option(s).
+     *
+     */
+    value?: string | string[];
+    /**
+     * Emitted when a keyboard input occurs.
+     */
+    pdsSelectChange: EventEmitter<InputEvent>;
+    /**
+     * Handles the change in the value of the select component.
+     * This method is called whenever the value of the select component changes.
+     * It updates the selected option accordingly.
+     */
+    valueChanged(): void;
+    componentWillLoad(): void;
+    /**
+     * Updates the selected option in the select element based on the current value.
+     *
+     * This method iterates through all the options of the select element and sets the
+     * 'selected' attribute on the option that matches the current value. If an option
+     * does not match the current value, the 'selected' attribute is removed.
+     *
+     * @private
+     * @returns {void}
+     */
+    private updateSelectedOption;
+    /**
+     * Emits an event on input change.
+    */
+    private onSelectUpdate;
+    /**
+     * Handles the change event for the slot element.
+     * This method is triggered when the slot content changes.
+     * It updates the inner HTML of the select element by cloning and appending
+     * the assigned <option> elements from the slot.
+     */
+    private handleSlotChange;
+    private getHelperMessage;
+    private getErrorMessage;
+    private renderMessages;
+    private classNames;
+    render(): any;
+}

package/dist/types/components/pds-switch/pds-switch.d.ts

@@ -6,54 +6,46 @@ export declare class PdsSwitch {
      */
     componentId: string;
     /**
-     * Determines the input 'checked' state
+     * Determines the input 'checked' state.
      */
     checked: boolean;
     /**
-     * Determines the input 'disabled' state, preventing user interaction
+     * Determines the input 'disabled' state, preventing user interaction.
      */
     disabled?: boolean;
     /**
-     * Displays message text describing an invalid state
+     * Displays message text describing an invalid state.
      */
     errorMessage?: string;
     /**
-     * Displays help text for additional description of an input
+     * Displays help text for additional description of an input.
      */
     helperMessage: string;
     /**
-     * Determines the input 'invalid' state, signifying an error is present
+     * Determines the input 'invalid' state, signifying an error is present.
      */
     invalid?: boolean;
     /**
-     * Displays text to describe the input
+     * Displays text to describe the input.
      */
     label: string;
     /**
-     * Identifies form data and unifies a group of radio inputs for toggling a single property/value
+     * Identifies form data and unifies a group of radio inputs for toggling a single property/value.
      */
     name: string;
     /**
-     * Determines the 'required' state of the input
+     * Determines the 'required' state of the input.
      */
     required?: boolean;
     /**
-     * Specifies the underlying input element type
-     * @defaultValue 'checkbox'
-     */
-    type: 'checkbox' | 'radio';
-    /**
-     * Provides input with a string submitted in form data, and can be used to distinguish radio inputs
+     * Provides input with a string submitted in form data.
      */
     value: string;
     /**
-     * Emits an event on input change
-    */
+     * Emits an event on input change.
+     */
     pdsSwitchChange: EventEmitter<InputEvent>;
     private onSwitchUpdate;
-    /**
-     * Generate switch classes
-     */
     private switchClassNames;
     render(): any;
 }

package/dist/types/components/pds-table/pds-table-cell/pds-table-cell.d.ts

@@ -7,6 +7,10 @@ export declare class PdsTableCell {
      * Truncates content to a max width of 100px and adds an ellipsis.
      */
     truncate: boolean;
+    /**
+     * Determines if the table is currently scrolling.
+     * @defaultValue false
+     */
     private tableScrolling;
     private classNames;
     private handleScroll;

package/dist/types/components/pds-table/pds-table-head/pds-table-head.d.ts

@@ -2,10 +2,13 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class PdsTableHead {
     hostElement: HTMLPdsTableHeadElement;
     private tableRef;
-    /** Indicates that the selection state is indeterminate. */
+    /**
+     * Determines if the select all checkbox is in an indeterminate state.
+     */
     indeterminate?: boolean;
     /**
-    * A local state to track whether the row is currently selected.
+    * Determines if the table row is currently selected.
+    * @defaultValue false
     */
     isSelected: boolean;
     /**

package/dist/types/components/pds-table/pds-table-head-cell/pds-table-head-cell.d.ts

@@ -13,10 +13,18 @@ export declare class PdsTableHeadCell {
         column: string;
         direction: string;
     }>;
+    /**
+     * The direction of sorting.
+     */
     private sortingDirection;
+    /**
+     * Determines if the table is currently scrolling.
+     * @defaultValue false
+     */
     private tableScrolling;
     /**
-     * A local state to track whether the row is currently selected.
+     * Determines if the table row is currently selected.
+     * @defaultValue false
      */
     isSelected: boolean;
     componentWillRender(): void;

package/dist/types/components/pds-table/pds-table-row/pds-table-row.d.ts

@@ -3,11 +3,11 @@ export declare class PdsTableRow {
     hostElement: HTMLPdsTableRowElement;
     private tableRef;
     /**
-     * Indicates that the selection state is indeterminate.
-     * */
+      * Determines if the row selected is in an indeterminate state.
+      */
     indeterminate?: boolean;
     /**
-     * A local state to track whether the row is currently selected.
+     * Determines if the table row is currently selected.
      */
     isSelected?: boolean;
     /**

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

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PdsTable {
     el: HTMLPdsTableElement;
     /**
-     * Determines if table displays compact which reduces the spacing of table cells.
+     * Determines if the table displays with reduced table cell padding.
      */
     compact: boolean;
     /**
@@ -14,14 +14,22 @@ export declare class PdsTable {
      */
     responsive: boolean;
     /**
-     * Determines if table displays fixed column which fixes the first column of the table.
+     * Determines if the should display a fixed first column.
      */
     fixedColumn: boolean;
     /**
-     * Determines if table displays checkboxes for selectable rows.
+     * Determines if the table displays checkboxes for selectable rows.
      */
     selectable: boolean;
+    /**
+     * The name of the column being sorted.
+     * @defaultValue null
+     */
     sortingColumn: string | null;
+    /**
+     * The direction of sorting.
+     * @defaultValue 'asc'
+     */
     sortingDirection: 'asc' | 'desc';
     /**
      * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.

package/dist/types/components/pds-text/pds-text.d.ts

@@ -0,0 +1,31 @@
+export declare class PdsText {
+    /**
+     * Sets the text alignment.
+     */
+    align?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * Sets the text color.
+     */
+    color?: 'primary' | 'secondary' | 'neutral' | 'accent' | 'danger' | 'info' | 'success' | 'warning';
+    /**
+     * Sets the text decoration.
+     */
+    decoration?: 'strikethrough' | 'underline-dotted';
+    /**
+     * Set the bottom margin for the text.
+     */
+    gutter?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+    /**
+     * Sets the font size.
+     */
+    size?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+    /**
+     * Sets the font weight.
+     */
+    weight?: 'extra-light' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Determines what semantic text tag to render.
+     */
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'pre' | 'strong' | 'em';
+    render(): any;
+}

package/dist/types/components/pds-textarea/pds-textarea.d.ts

@@ -1,64 +1,121 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { TextareaChangeEventDetail } from './textarea-interface';
+import { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
 export declare class PdsTextarea {
+    private nativeTextarea?;
+    private focusedValue?;
+    private inheritedAttributes;
+    private originalPdsInput?;
     el: HTMLPdsTextareaElement;
+    /**
+     * Emitted when the input loses focus.
+     */
+    pdsBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input has focus.
+     */
+    pdsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when a keyboard input occurs.
+     *
+     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
+     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
+     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
+     * the input is cleared on edit, the type is `null`.
+     */
+    pdsInput: EventEmitter<TextareaInputEventDetail>;
+    /**
+     * Event emitted whenever the value of the textarea changes.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;
+    /**
+     * Sets focus on the native `textarea` in the `pds-texarea`. Use this method instead of the global
+     * `textarea.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Specifies if and how the browser provides `autocomplete` assistance for the field.
+     */
+    autocomplete: string;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */
     componentId: string;
     /**
-     * Indicates whether or not the textarea is disabled
+     * Determines whether or not the textarea is disabled.
      * @defaultValue false
      */
     disabled: boolean;
     /**
-     * Specifies the error text and provides an error-themed treatment to the field
+     * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.
+     */
+    debounce?: number;
+    /**
+     * Displays an error message below the textarea field.
      */
     errorMessage?: string;
     /**
-     * Displays a hint or description of the textarea
+     * Displays a message or hint below the textarea field.
      */
     helperMessage?: string;
     /**
-     * Indicates whether or not the textarea is invalid or throws an error
+     * Determines whether or not the textarea is invalid or throws an error.
      * @defaultValue false
      */
     invalid: boolean;
     /**
-     * Text to be displayed as the textarea label
+     * Text to be displayed as the textarea label.
      */
     label?: string;
     /**
-     * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId
+     * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
      */
     name: string;
     /**
-     * Specifies a short hint that describes the expected value of the textarea
+     * Specifies a short hint that describes the expected value of the textarea.
      */
     placeholder?: string;
     /**
-     * Indicates whether or not the textarea is readonly
+     * Determines whether or not the textarea is readonly.
      * @defaultValue false
      */
     readonly: boolean;
     /**
-     * Indicates whether or not the textarea is required
+     * Determines whether or not the textarea is required.
      * @defaultValue false
      */
     required: boolean;
     /**
-     * Sets number of rows of text visible without needing to scroll in the textarea
+     * Sets number of rows of text visible without needing to scroll in the textarea.
      */
     rows?: number;
     /**
-     * The value of the textarea
+     * The value of the textarea.
      */
-    value?: string;
+    value?: string | null;
+    hasFocus: boolean;
+    protected debounceChanged(): void;
     /**
-     * Event emitted whenever the value of the textarea changes
+     * Update the native input element when the value changes
      */
-    pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;
+    protected valueChanged(): void;
+    /**
+     * Emits an `pdsInput` event.
+     */
+    private emitInputChange;
+    /**
+     * Emits an `pdsTextareaChange` event.
+     */
+    private emitValueChange;
+    private getValue;
+    private onBlur;
+    private onFocus;
+    private onInput;
     private onTextareaChange;
     private textareaClassNames;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     render(): any;
 }