ms-design-system 0.0.25 → 0.0.27

package/types/ms-design-system.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, EnvironmentProviders } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import * as i1 from 'ng-inline-svg';
 
 type IconPosition$1 = 'prefix' | 'suffix';
 declare class MsButton implements OnChanges, OnInit {
@@ -35,9 +36,90 @@ declare class MsButton implements OnChanges, OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<MsButton, "ms-button", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "block": { "alias": "block"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isBorder": { "alias": "isBorder"; "required": false; }; "textSrc": { "alias": "textSrc"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "class": { "alias": "class"; "required": false; }; "buttonType": { "alias": "buttonType"; "required": false; }; }, { "htmlChange": "htmlChange"; "click": "click"; }, ["projectedContent"], ["*", "*", "*"], true, never>;
 }
 
+interface DropdownItem {
+    label: string;
+    icon?: string;
+    value?: any;
+    disabled?: boolean;
+    divider?: boolean;
+    dividerStyle?: string;
+    selected?: boolean;
+    countryCode?: string;
+    dialCode?: string;
+}
 declare class MsDropdown {
+    private el;
+    text: string;
+    size: string;
+    variant: string;
+    radiussize: string;
+    isDisabled: boolean;
+    set items(value: DropdownItem[]);
+    icon?: string;
+    iconPosition: 'prefix' | 'suffix';
+    iconOnly: boolean;
+    btnWidth: string;
+    btnMinWidth: string;
+    btnMaxWidth: string;
+    closeOnSelect: boolean;
+    closeOnClickOutside: boolean;
+    autoClose: boolean;
+    selectedItem?: string;
+    allowMultiple: boolean;
+    showDivider: boolean;
+    dividerStyle: string;
+    dividerColor: string;
+    itemSpacing: string;
+    shadow: string;
+    backgroundColor: string;
+    textColor: string;
+    maxHeight: string;
+    scrollable: boolean;
+    loading: boolean;
+    error: boolean;
+    ariaLabel: string;
+    role: string;
+    searchable: boolean;
+    searchPlaceholder: string;
+    noResultsText: string;
+    customClass: string;
+    dropdownMenuClass: string;
+    fontSize: string;
+    fontWeight: string;
+    dropdownMenuWidth: string;
+    showFlagImage: boolean;
+    multiSelectDisplay: 'count' | 'text' | 'count+text' | 'tags' | 'none';
+    showTags: boolean;
+    btnHeight: string;
+    hoverColor: string;
+    hoverTextColor: string;
+    selectionChange: EventEmitter<DropdownItem | DropdownItem[]>;
+    selectedValues: Set<any>;
+    selectedItems: DropdownItem[];
+    selectedItemObj?: DropdownItem;
+    get items(): DropdownItem[];
+    private _items;
+    constructor(el: ElementRef);
+    isOpen: boolean;
+    searchTerm: string;
+    onTriggerClick(): void;
+    toggleDropdown(): void;
+    private cloneItems;
+    selectItem(item: DropdownItem): void;
+    toggleMultiSelect(item: DropdownItem): void;
+    private selectSingle;
+    get filteredItems(): DropdownItem[];
+    removeTag(item: DropdownItem, event: MouseEvent): void;
+    onDocumentClick(event: MouseEvent): void;
+    maxVisibleTags: number;
+    get visibleTags(): DropdownItem[];
+    get hiddenTags(): DropdownItem[];
+    hiddenTagsCount(): number;
+    isHiddenTagsOpen: boolean;
+    toggleHiddenTags(): void;
+    close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsDropdown, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsDropdown, "ms-dropdown", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsDropdown, "ms-dropdown", never, { "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "items": { "alias": "items"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "btnWidth": { "alias": "btnWidth"; "required": false; }; "btnMinWidth": { "alias": "btnMinWidth"; "required": false; }; "btnMaxWidth": { "alias": "btnMaxWidth"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "autoClose": { "alias": "autoClose"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; "dividerStyle": { "alias": "dividerStyle"; "required": false; }; "dividerColor": { "alias": "dividerColor"; "required": false; }; "itemSpacing": { "alias": "itemSpacing"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "role": { "alias": "role"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "noResultsText": { "alias": "noResultsText"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "dropdownMenuClass": { "alias": "dropdownMenuClass"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "fontWeight": { "alias": "fontWeight"; "required": false; }; "dropdownMenuWidth": { "alias": "dropdownMenuWidth"; "required": false; }; "showFlagImage": { "alias": "showFlagImage"; "required": false; }; "multiSelectDisplay": { "alias": "multiSelectDisplay"; "required": false; }; "showTags": { "alias": "showTags"; "required": false; }; "btnHeight": { "alias": "btnHeight"; "required": false; }; "hoverColor": { "alias": "hoverColor"; "required": false; }; "hoverTextColor": { "alias": "hoverTextColor"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
 declare class MsCheckbox implements ControlValueAccessor, Validator {
@@ -48,6 +130,7 @@ declare class MsCheckbox implements ControlValueAccessor, Validator {
     indeterminate: boolean;
     invalidBox: boolean;
     checked: boolean;
+    htmlChange: EventEmitter<string>;
     touched: boolean;
     private onChange;
     private onTouched;
@@ -59,8 +142,13 @@ declare class MsCheckbox implements ControlValueAccessor, Validator {
     toggle(): void;
     markTouched(): void;
     get invalid(): boolean;
+    get classes(): string;
+    /** Generate HTML string */
+    getHtmlString(): string;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsCheckbox, "ms-checkbox", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "required": { "alias": "required"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "invalidBox": { "alias": "invalidBox"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsCheckbox, "ms-checkbox", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "required": { "alias": "required"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "invalidBox": { "alias": "invalidBox"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "htmlChange": "htmlChange"; }, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_skeleton: unknown;
     static ngAcceptInputType_required: unknown;
@@ -77,6 +165,7 @@ declare class MsBadge {
     block: boolean;
     disabled: boolean;
     isDark: boolean;
+    skeleton: boolean;
     text: string;
     icon: string | null;
     iconOnly: string | null;
@@ -95,13 +184,14 @@ declare class MsBadge {
     ngAfterContentInit(): void;
     onClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsBadge, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsBadge, "ms-badge", never, { "color": { "alias": "color"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "block": { "alias": "block"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isDark": { "alias": "isDark"; "required": false; }; "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "htmlChange": "htmlChange"; "click": "click"; }, ["projectedContent"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsBadge, "ms-badge", never, { "color": { "alias": "color"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "block": { "alias": "block"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isDark": { "alias": "isDark"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "htmlChange": "htmlChange"; "click": "click"; }, ["projectedContent"], never, true, never>;
 }
 
 declare class MsToggle implements ControlValueAccessor, Validator {
     label?: any;
     class: string;
     size: string;
+    skeleton: boolean;
     disabled: boolean;
     required: boolean;
     invalid: boolean;
@@ -124,7 +214,7 @@ declare class MsToggle implements ControlValueAccessor, Validator {
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsToggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsToggle, "ms-toggle", never, { "label": { "alias": "label"; "required": false; }; "class": { "alias": "class"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "htmlChange": "htmlChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsToggle, "ms-toggle", never, { "label": { "alias": "label"; "required": false; }; "class": { "alias": "class"; "required": false; }; "size": { "alias": "size"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "htmlChange": "htmlChange"; }, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_invalid: unknown;
@@ -140,6 +230,7 @@ declare class MsRadioButton implements ControlValueAccessor, Validator {
     invalidBox: boolean;
     skeleton: boolean;
     checked: boolean;
+    htmlChange: EventEmitter<string>;
     touched: boolean;
     private onChange;
     private onTouched;
@@ -151,11 +242,17 @@ declare class MsRadioButton implements ControlValueAccessor, Validator {
     select(): void;
     markTouched(): void;
     get invalid(): boolean;
+    get classes(): string;
+    /** Generate HTML string */
+    getHtmlString(): string;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsRadioButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsRadioButton, "ms-radio-button", never, { "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "invalidBox": { "alias": "invalidBox"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsRadioButton, "ms-radio-button", never, { "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "invalidBox": { "alias": "invalidBox"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "htmlChange": "htmlChange"; }, never, never, true, never>;
 }
 
 declare class MsInputField implements ControlValueAccessor {
+    private el;
     type: 'text' | 'email' | 'password' | 'number' | 'date' | 'time' | 'tel' | 'url' | 'search' | 'color' | 'file';
     id?: string;
     name?: string;
@@ -165,6 +262,7 @@ declare class MsInputField implements ControlValueAccessor {
     readonly: boolean;
     disabled: boolean;
     required: boolean;
+    skeleton: boolean;
     invalid: boolean;
     min?: number;
     max?: number;
@@ -184,6 +282,8 @@ declare class MsInputField implements ControlValueAccessor {
     keyup: EventEmitter<KeyboardEvent>;
     private onChange;
     private onTouched;
+    constructor(el: ElementRef);
+    ngOnInit(): void;
     writeValue(val: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -191,20 +291,183 @@ declare class MsInputField implements ControlValueAccessor {
     handleInput(event: Event): void;
     handleBlur(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsInputField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsInputField, "ms-input-field", never, { "type": { "alias": "type"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "state": { "alias": "state"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "step": { "alias": "step"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsInputField, "ms-input-field", never, { "type": { "alias": "type"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "state": { "alias": "state"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "step": { "alias": "step"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class MsTextArea {
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    autocomplete?: string;
+    readonly: boolean;
+    disabled: boolean;
+    required: boolean;
+    loading: boolean;
+    invalid: boolean;
+    skeleton: boolean;
+    minlength?: number;
+    maxlength?: number;
+    ms_rows: number;
+    ms_cols?: number;
+    autoResize: boolean;
+    resize: 'none' | 'both' | 'horizontal' | 'vertical';
+    scrollable: boolean;
+    showResizeIcon: boolean;
+    value: i0.WritableSignal<string>;
+    hasError: i0.WritableSignal<boolean>;
+    change: EventEmitter<Event>;
+    focus: EventEmitter<Event>;
+    blur: EventEmitter<Event>;
+    private onChange;
+    private onTouched;
+    writeValue(val: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleInput(event: Event): void;
+    handleBlur(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MsTextArea, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MsTextArea, "ms-text-area", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsTextArea, "ms-text-area", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "ms_rows": { "alias": "ms_rows"; "required": false; }; "ms_cols": { "alias": "ms_cols"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "resize": { "alias": "resize"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "showResizeIcon": { "alias": "showResizeIcon"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class MsAvatar {
+    private el;
+    color: string;
+    variant: any;
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    text?: string;
+    icon?: any;
+    img?: string;
+    shape: 'circle' | 'square';
+    disabled: boolean;
+    skeleton: boolean;
+    isStatusShow: boolean;
+    group: boolean;
+    subType?: any;
+    label?: any;
+    label2?: any;
+    status?: any;
+    max?: number;
+    avatars: Array<{
+        src?: string;
+        initials?: string;
+        text?: string;
+    }>;
+    block: boolean;
+    class: string;
+    htmlChange: EventEmitter<string>;
+    click: EventEmitter<Event>;
+    projectedContent: any;
+    avatarClick: EventEmitter<void>;
+    sizeClass: any;
+    get classes(): string;
+    get userClass(): string;
+    /** Generate HTML string */
+    getHtmlString(): any;
+    get initials(): string;
+    getInitialName(name: any): string;
+    constructor(el: ElementRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    onClick(event: Event): void;
+    get visibleAvatars(): {
+        src?: string;
+        initials?: string;
+        text?: string;
+    }[];
+    get extraCount(): number;
+    extraOpen: boolean;
+    expanded: boolean;
+    get extraAvatars(): {
+        src?: string;
+        initials?: string;
+        text?: string;
+    }[];
+    get visibleExtraCount(): number;
+    toggleExtra(event: MouseEvent): void;
+    clickOutside(event: Event): void;
+    toggleExpand(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MsAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsAvatar, "ms-avatar", never, { "color": { "alias": "color"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "img": { "alias": "img"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "isStatusShow": { "alias": "isStatusShow"; "required": false; }; "group": { "alias": "group"; "required": false; }; "subType": { "alias": "subType"; "required": false; }; "label": { "alias": "label"; "required": false; }; "label2": { "alias": "label2"; "required": false; }; "status": { "alias": "status"; "required": false; }; "max": { "alias": "max"; "required": false; }; "avatars": { "alias": "avatars"; "required": false; }; "block": { "alias": "block"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "htmlChange": "htmlChange"; "click": "click"; "avatarClick": "avatarClick"; }, ["projectedContent"], never, true, never>;
+}
+
+declare class MsPagination {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MsPagination, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsPagination, "ms-pagination", never, {}, {}, never, never, true, never>;
+}
+
+interface SidebarItem {
+    id: string;
+    label: string;
+    count?: number;
+}
+interface SidebarSection {
+    title: string;
+    id: string;
+    icon: string;
+    items: SidebarItem[];
+    count?: number;
+}
+declare const MS_SVG_PATH = "assets/ui-library/svg/";
+declare class MsSidebar {
+    isCollapsed: boolean;
+    openSections: {
+        [key: string]: boolean;
+    };
+    flyoutSectionId: string | null;
+    flyoutItems: SidebarItem[];
+    flyoutTop: number;
+    profileFlyoutVisible: boolean;
+    accounts: {
+        name: string;
+        email: string;
+        selected: boolean;
+    }[];
+    activeItem: string;
+    userName: string;
+    isSearchVisible: boolean;
+    private prevScrollTop;
+    get userInitials(): string;
+    getInitials(name: string): string;
+    menuData: SidebarSection[];
+    toggleSidebar(): void;
+    toggleSection(id: string, event?: any): void;
+    selectItem(id: string): void;
+    toggleProfileFlyout(): void;
+    viewProfile(): void;
+    accountSettings(): void;
+    documentation(): void;
+    selectAccount(index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MsSidebar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsSidebar, "ms-sidebar", never, {}, {}, never, never, true, never>;
+}
+
+declare class MsSpinner {
+    color: any;
+    size: any;
+    text?: boolean;
+    htmlChange: EventEmitter<string>;
+    get spinnerSize(): string;
+    get spinnerColor(): string;
+    getHtmlString(): string;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MsSpinner, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsSpinner, "ms-spinner", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "htmlChange": "htmlChange"; }, never, never, true, never>;
+}
+
+declare class MsTooltip {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MsTooltip, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MsTooltip, "ms-tooltip", never, {}, {}, never, never, true, never>;
 }
 
 declare class MsDesignSystemModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MsDesignSystemModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea], [typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner], [typeof i1.InlineSVGModule, typeof MsButton, typeof MsDropdown, typeof MsCheckbox, typeof MsBadge, typeof MsToggle, typeof MsRadioButton, typeof MsInputField, typeof MsTextArea, typeof MsAvatar, typeof MsSidebar, typeof MsTooltip, typeof MsPagination, typeof MsSpinner]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MsDesignSystemModule>;
 }
 
 declare function provideMsDesignSystem(): EnvironmentProviders;
 
-export { MsBadge, MsButton, MsCheckbox, MsDesignSystemModule, MsDropdown, MsInputField, MsRadioButton, MsTextArea, MsToggle, provideMsDesignSystem };
+export { MS_SVG_PATH, MsAvatar, MsBadge, MsButton, MsCheckbox, MsDesignSystemModule, MsDropdown, MsInputField, MsPagination, MsRadioButton, MsSidebar, MsSpinner, MsTextArea, MsToggle, MsTooltip, provideMsDesignSystem };