@six-group/ui-library 0.0.0-insider.0014c08

package/dist/types/components/six-tab-group/six-tab-group.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SixTabShowPayload {
+    name: string;
+}
+export interface SixTabHidePayload {
+    name: string;
+}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot nav - Used for grouping tabs in the tab group.
+ * @slot - Used for grouping tab panels in the tab group.
+ *
+ * @part base - The component's base wrapper.
+ * @part nav - The tab group navigation container.
+ * @part tabs - The container that wraps the slotted tabs.
+ * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.
+ * @part body - The tab group body where tab panels are slotted in.
+ * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
+ */
+export declare class SixTabGroup {
+    private activeTab?;
+    private body?;
+    private mutationObserver?;
+    private nav?;
+    private resizeObserver?;
+    private tabGroup?;
+    private tabs?;
+    host: HTMLSixTabGroupElement;
+    hasLeftControl: boolean;
+    hasRightControl: boolean;
+    /** The placement of the tabs. */
+    placement: 'top' | 'bottom' | 'left' | 'right';
+    /** Disables the scroll arrows that appear when tabs overflow. */
+    noScrollControls: boolean;
+    handleNoScrollControlsChange(): void;
+    /** Emitted when a tab is shown. */
+    sixTabShow: EventEmitter<SixTabShowPayload>;
+    /** Emitted when a tab is hidden. */
+    sixTabHide: EventEmitter<SixTabHidePayload>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Shows the specified tab panel. */
+    show(panel: string): Promise<void>;
+    private getAllTabs;
+    private getAllPanels;
+    private getActiveTab;
+    private handleClick;
+    private handleKeyDown;
+    private handleScrollLeft;
+    private handleScrollRight;
+    private calculateRightControlVisibility;
+    private calculateLeftControlVisibility;
+    private updateScrollControls;
+    private setActiveTab;
+    private setAriaLabels;
+    render(): any;
+}

package/dist/types/components/six-tab-panel/six-tab-panel.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The tab panel's content.
+ *
+ * @part base - The component's base wrapper.
+ */
+export declare class SixTabPanel {
+    private componentId;
+    host: HTMLSixTabPanelElement;
+    /** The tab panel's name. */
+    name: string;
+    /** When true, the tab panel will be shown. */
+    active: boolean;
+    render(): any;
+}

package/dist/types/components/six-tag/six-tag.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The tag's content.
+ *
+ * @part base - The component's base wrapper.
+ * @part content - The tag content.
+ * @part clear-button - The clear button.
+ */
+export declare class SixTag {
+    /** The tag's type. */
+    type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text';
+    /** The tag's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Set to true to draw a pill-style tag with rounded edges. */
+    pill: boolean;
+    /** Set to true to make the tag clearable. */
+    clearable: boolean;
+    /** Emitted when the clear button is activated. */
+    sixClear: EventEmitter<EmptyPayload>;
+    private contentSlotElement;
+    private tooltipElement;
+    private contentElement;
+    private resizeObserver;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private updateTooltip;
+    private handleClearClick;
+    render(): any;
+}

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

@@ -0,0 +1,109 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot label - The textarea's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes how to use the input.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part form-control - The form control that wraps the label, textarea, and help text.
+ * @part label - The textarea label.
+ * @part textarea - The textarea control.
+ * @part help-text - The textarea help text.
+ */
+export declare class SixTextarea {
+    private inputId;
+    private labelId;
+    private helpTextId;
+    private errorTextId;
+    private nativeTextarea?;
+    private eventListeners;
+    private resizeObserver;
+    host: HTMLSixTextareaElement;
+    hasFocus: boolean;
+    hasHelpTextSlot: boolean;
+    hasLabelSlot: boolean;
+    hasErrorTextSlot: boolean;
+    /** The textarea's size. */
+    size: 'small' | 'medium' | 'large';
+    /** The textarea's name attribute. */
+    name: string;
+    /** The textarea's value attribute. */
+    value: string;
+    /** The textarea's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** The textarea's placeholder text. */
+    placeholder?: string;
+    /** The number of rows to display by default. */
+    rows: number;
+    /** Controls how the textarea can be resized. */
+    resize: 'none' | 'vertical' | 'auto';
+    /** Set to true to disable the textarea. */
+    disabled: boolean;
+    /** Set to true for a readonly textarea. */
+    readonly: boolean;
+    /** The minimum length of input that will be considered valid. */
+    minlength?: number;
+    /** The maximum length of input that will be considered valid. */
+    maxlength?: number;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /** The label text. */
+    label: string;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+    errorTextCount?: number;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** The textarea's autocaptialize attribute. */
+    autocapitalize: string;
+    /** The textarea's autocorrect attribute. */
+    autocorrect: 'on' | 'off';
+    /** The textarea's autocomplete attribute. */
+    autocomplete: string;
+    /** The textarea's autofocus attribute. */
+    autofocus: boolean;
+    /** The textarea's spellcheck attribute. */
+    spellcheck: boolean;
+    /** The textarea's inputmode attribute. */
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Emitted when the control's value changes. Access the new value via event.target.value. */
+    sixChange: EventEmitter<EmptyPayload>;
+    /** Emitted when the control receives input. Access the new value via event.target.value. */
+    sixInput: EventEmitter<EmptyPayload>;
+    /** Emitted when the control gains focus. */
+    sixFocus: EventEmitter<EmptyPayload>;
+    /** Emitted when the control loses focus. Access the new value via event.target.value. */
+    sixBlur: EventEmitter<EmptyPayload>;
+    handleLabelChange(): void;
+    handleRowsChange(): void;
+    handleValueChange(): void;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Sets focus on the textarea. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /** Removes focus fromt the textarea. */
+    removeFocus(): Promise<void>;
+    /** Selects all the text in the input. */
+    select(): Promise<void | undefined>;
+    /** Sets the start and end positions of the text selection (0-based). */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): Promise<void | undefined>;
+    /** Replaces a range of text with a new string. */
+    setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): Promise<void>;
+    private handleChange;
+    private handleInput;
+    private handleBlur;
+    private handleFocus;
+    private handleSlotChange;
+    private setTextareaHeight;
+    private getValue;
+    render(): any;
+}

package/dist/types/components/six-tile/six-tile.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+/**
+ * @since 1.0
+ * @status stable
+ */
+export declare class SixTile {
+    host: HTMLSixTileElement;
+    /** The tile's label. */
+    label: string;
+    /** The icon's name. */
+    iconName?: string;
+    /** Flag, whether the tile is closeable. */
+    closeable: boolean;
+    /** Flag, whether the tile should cast a shadow. */
+    elevated: boolean;
+    /** Enables tile tooltip for tiles */
+    disableTooltip: boolean;
+    /** Set to true to disable the tile. */
+    disabled: boolean;
+    /** The tile's size. */
+    size: 'small' | 'medium' | 'large';
+    visible: boolean;
+    /** Emitted when the tile was closed. */
+    sixTileClose: EventEmitter<EmptyPayload>;
+    /** Emitted when the tile is selected. */
+    sixTileSelected: EventEmitter<EmptyPayload>;
+    /** Hides the tile */
+    hide(): Promise<void>;
+    /** Shows the tile */
+    show(): Promise<void>;
+    hasIconSlot: boolean;
+    hasLabelSlot: boolean;
+    componentWillLoad(): void;
+    private handleSlotChange;
+    render(): any;
+    private handleCloseClickEvent;
+    private handleClickEvent;
+}

package/dist/types/components/six-timepicker/six-timepicker.d.ts

@@ -0,0 +1,170 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Time, TimeFormat } from '../../utils/time.util';
+import { EmptyPayload } from '../../utils/types';
+export interface SixTimepickerChange {
+    value?: Time;
+    valueAsString: string;
+    changedProperty?: string;
+}
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part input - The input field
+ * @part container - The container of whole component
+ * @part popup - The popup of the timepicker component
+ *
+ */
+export declare class SixTimepicker {
+    private eventListeners;
+    private popup?;
+    private wrapper?;
+    private inputElement?;
+    host: HTMLSixTimepickerElement;
+    /**
+     * Define the time format. Valid formats are:
+     *
+     * HH:mm:ss
+     * hh:mm:ss:aa
+     * HH:mm:ss:ms
+     * hh:mm:ss:ms:aa
+     * HH:mm
+     * hh:mm:aa
+     * HH
+     * hh:aa
+     * mm
+     * ss
+     * ms
+     *
+     * where HH is the 24 hour format
+     * and hh is the 12 hour format
+     *
+     * Please notice that when using the 12-hour-clock (hh)
+     * you always need a period indicator (aa). So the time can be parsed as either am or pm
+     * */
+    format: TimeFormat;
+    /**
+     * Define the separator to be shown between the time unit pickers.
+     * Please be aware that this property will modify the displayed separator only.
+     * The separator for a timestring is always expected to be a colon (eg. '13:52:20')
+     * */
+    separator: string;
+    /**
+     * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
+     */
+    value: string;
+    /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /** Indicates whether the timepicker should be shown as an inline (always open) component */
+    inline: boolean;
+    /**
+     * If `true` the user can only select a time via the timepicker but not directly edit the input field.
+     */
+    readonly: boolean;
+    /**
+     * If `true` the component is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The enforced placement of the dropdown panel.
+     */
+    placement?: 'top' | 'bottom';
+    /** Timepicker size. */
+    size: 'small' | 'medium' | 'large';
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /**
+     * The placeholder defines what text to be shown on the input element
+     */
+    placeholder?: string;
+    /** The input's error text. Alternatively, you can use the error-text slot. */
+    errorText: string | string[];
+    /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+    errorTextCount?: number;
+    /** The input's label. Alternatively, you can use the label slot. */
+    label: string;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** The input's name attribute. */
+    name: string;
+    /** Set to true to add a clear button when the input is populated. */
+    clearable: boolean;
+    /** Set the position of the icon */
+    iconPosition: 'left' | 'right';
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`.
+     */
+    hoist: boolean;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
+     */
+    timeout: number;
+    /**
+     * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
+     */
+    interval: number;
+    /**
+     * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.
+     */
+    defaultTime?: string;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.
+     * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
+     * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
+     * (and keep pressed) and once you release
+     */
+    debounce: number;
+    /**
+     * Emitted when the timepicker's value changes
+     */
+    sixChange: EventEmitter<SixTimepickerChange>;
+    /**
+     * Emitted when the timepicker's value changes, but debounced
+     */
+    sixChangeDebounced: EventEmitter<SixTimepickerChange>;
+    /**
+     * Emitted when the clear button is activated.
+     */
+    sixClear: EventEmitter<EmptyPayload>;
+    isPopupContentUp: boolean;
+    isDropDownContentUp: boolean;
+    resizeHandler(): Promise<void>;
+    scrollHandler(): Promise<void>;
+    /**
+     * Update the native input element when the value changes
+     */
+    protected valueChanged(): void;
+    /** Sets focus on the datepickers input. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    private popupValue;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private updateValue;
+    private calcIsPopupContentUp;
+    private moveOpenHoistedPopup;
+    private handlePickerChange;
+    private getSixTimeUnitPicker;
+    private getHour24Picker;
+    private is24HourClock;
+    private getHour12Picker;
+    private is12HourClock;
+    private getAmPmPicker;
+    private getMinutePicker;
+    private getSecondsPicker;
+    private getMillisecondsPicker;
+    private getSeparator;
+    private getContent;
+    private openPopup;
+    private closePopup;
+    private handleDocumentMouseDown;
+    private handleClearClick;
+    private renderClearable;
+    private renderCustomIcon;
+    render(): any;
+}

package/dist/types/components/six-tooltip/six-tooltip.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The tooltip's target element. Only the first element will be used as the target.
+ * @slot content - The tooltip's content. Alternatively, you can use the content prop.
+ *
+ * @part base - The component's base wrapper.
+ */
+export declare class SixTooltip {
+    private componentId;
+    private isVisible;
+    private popoverHelper?;
+    private tooltipPositioner?;
+    private target?;
+    private tooltip?;
+    host: HTMLSixTooltipElement;
+    /** The tooltip's content. Alternatively, you can use the content slot. */
+    content: string;
+    /**
+     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+     * inside the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Set to true to disable the tooltip, so it won't show when triggered. */
+    disabled: boolean;
+    /** The distance in pixels from which to offset the tooltip away from its target. */
+    distance: number;
+    /** Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /** The distance in pixels from which to offset the tooltip along its target. */
+    skidding: number;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    trigger: string;
+    handleOpenChange(): void;
+    /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */
+    sixShow: EventEmitter<EmptyPayload>;
+    /** Emitted after the tooltip has shown and all transitions are complete. */
+    sixAfterShow: EventEmitter<EmptyPayload>;
+    /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */
+    sixHide: EventEmitter<EmptyPayload>;
+    /** Emitted after the tooltip has hidden and all transitions are complete. */
+    sixAfterHide: EventEmitter<EmptyPayload>;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    /** Shows the tooltip. */
+    show(): Promise<void>;
+    /** Shows the tooltip. */
+    hide(): Promise<void>;
+    private getTarget;
+    private handleBlur;
+    private handleClick;
+    private handleFocus;
+    private handleKeyDown;
+    private handleMouseOver;
+    private handleMouseOut;
+    private handleSlotChange;
+    private hasTrigger;
+    private syncOptions;
+    render(): any;
+}