@alauda/ui 8.0.1-beta.0 → 8.0.1-beta.10

package/tabs/tab-group.component.d.ts

@@ -6,8 +6,11 @@ import { TabHeaderComponent } from './tab-header.component';
 import { TabComponent } from './tab.component';
 import { TabSize, TabType } from './tabs.types';
 import * as i0 from "@angular/core";
+/** A simple change event emitted on focus or selection changes. */
 export declare class TabChangeEvent {
+    /** Index of the currently-selected tab. */
     index: number;
+    /** Reference to the currently-selected tab. */
     tab: TabComponent;
 }
 export declare class TabGroupComponent implements OnChanges, AfterContentChecked, AfterContentInit, OnDestroy {
@@ -17,17 +20,24 @@ export declare class TabGroupComponent implements OnChanges, AfterContentChecked
     _headerAddon: TabHeaderAddonDirective;
     _tabHeader: TabHeaderComponent;
     _tabTitle: TabTitleDirective;
+    /** The tab index that should be selected after the content has been checked. */
     private _indexToSelect;
+    /** Subscription to tabs being added/removed. */
     private _tabsSubscription;
+    /** Subscription to changes in the tab labels. */
     private _tabLabelSubscription;
     private _selectedIndex;
     private _tab;
     private _type;
     private _size;
+    /** true lazy mode for template ref children */
     private _lazy;
     private _previousHeaderAddon;
+    /** Emits whenever the type changes */
     readonly _typeChange: Subject<void>;
+    /** Emits whenever the size changes */
     readonly _sizeChange: Subject<void>;
+    /** The index of the active tab. */
     get selectedIndex(): number;
     set selectedIndex(value: number);
     get tab(): string;
@@ -39,25 +49,43 @@ export declare class TabGroupComponent implements OnChanges, AfterContentChecked
     set size(val: TabSize);
     get lazy(): boolean;
     set lazy(lazy: boolean);
+    /** Output to enable support for two-way binding on `[(selectedIndex)]` */
     readonly selectedIndexChange: EventEmitter<number>;
     readonly tabChange: EventEmitter<string>;
+    /** Event emitted when the tab selection has changed. */
     readonly selectedTabChange: EventEmitter<TabChangeEvent>;
+    /** Event emitted when focus has changed within a tab group. */
     readonly focusChange: EventEmitter<TabChangeEvent>;
     constructor(_changeDetectorRef: ChangeDetectorRef);
     activatedTabs: TabComponent[];
     get activeTab(): TabComponent;
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * After the content is checked, this component knows what tabs have been defined
+     * and what the selected index should be. This is where we can know exactly what position
+     * each tab should be in according to the new selected index.
+     */
     ngAfterContentChecked(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
+    /** Handle click events, setting new selected index if appropriate. */
     _handleClick(tab: TabComponent, idx: number): void;
     _focusChanged(index: number): void;
+    /** Re-aligns the ink bar to the selected tab element. */
     realignActiveIndicator(): void;
     private _changeActivatedTabs;
+    /** Clamps the given index to the bounds of 0 and the tabs length. */
     private _clampTabIndex;
     private _findIndexByTab;
     private _createChangeEvent;
+    /**
+     * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
+     * on the Tab component, whereas the data binding is inside the TabGroup. In order for the
+     * binding to be updated, we need to subscribe to changes in it and trigger change detection
+     * manually.
+     */
     private _subscribeToTabLabels;
+    /** Retrieves the tabindex for the tab. */
     _getTabIndex(tab: TabComponent, idx: number): number | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabGroupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "aui-tab-group", ["auiTabGroup"], { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "tab": { "alias": "tab"; "required": false; }; "type": { "alias": "type"; "required": false; }; "title": { "alias": "title"; "required": false; }; "size": { "alias": "size"; "required": false; }; "lazy": { "alias": "lazy"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "tabChange": "tabChange"; "selectedTabChange": "selectedTabChange"; "focusChange": "focusChange"; }, ["_headerAddon", "_tabTitle", "_tabs"], never, true, never>;

package/tabs/tab-header-active-indicator.component.d.ts

@@ -8,7 +8,16 @@ export declare class TabHeaderActiveIndicatorComponent {
     type: TabType;
     bem: Bem;
     constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone);
+    /**
+     * Calculates the styles from the provided element in order to align the indicator to that element.
+     * Shows the indicator if previously set as hidden.
+     * @param element
+     */
     alignToElement(element: HTMLElement): void;
+    /**
+     * Sets the proper styles to the element.
+     * @param element
+     */
     private _setStyles;
     private _getElementPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabHeaderActiveIndicatorComponent, never>;

package/tabs/tab-header.component.d.ts

@@ -4,28 +4,47 @@ import { TabHeaderAddonDirective, TabLabelWrapperDirective, TabTitleDirective }
 import { TabHeaderActiveIndicatorComponent } from './tab-header-active-indicator.component';
 import { TabSize, TabType } from './tabs.types';
 import * as i0 from "@angular/core";
+/**
+ * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
+ * will scroll the header towards the end of the tabs list and 'before' will scroll towards the
+ * beginning of the list.
+ */
 export type ScrollDirection = 'after' | 'before';
 export declare class TabHeaderComponent implements OnDestroy, AfterContentChecked, AfterContentInit {
     private readonly _changeDetectorRef;
     bem: Bem;
     _showAddon: boolean;
+    /** Whether the controls for pagination should be displayed */
     _showPaginationControls: boolean;
+    /** Whether the tab list can be scrolled more towards the end of the tab label list. */
     _disableScrollAfter: boolean;
+    /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
     _disableScrollBefore: boolean;
+    /** Whether the scroll distance has changed and should be applied after the view is checked. */
     private _scrollDistanceChanged;
+    /** Whether the header should scroll to the selected index after the view has been checked. */
     private _selectedIndexChanged;
+    /** The distance in pixels that the tab labels should be translated to the left. */
     private _scrollDistance;
     private _selectedIndex;
+    /** Emits when the component is destroyed. */
     private readonly _destroyed;
+    /** Used to manage focus between the tabs. */
     private _keyManager;
     type: TabType;
     size: TabSize;
+    /** The index of the active tab. */
     get selectedIndex(): number;
     set selectedIndex(value: number);
+    /** Event emitted when the option is selected. */
     readonly selectFocusedIndex: EventEmitter<number>;
+    /** Event emitted when a label is focused. */
     readonly indexFocused: EventEmitter<number>;
     _headerAddon: TabHeaderAddonDirective;
     _title: TabTitleDirective;
+    /**
+     * workaround for @link https://github.com/microsoft/TypeScript/pull/42425
+     */
     _labelWrappers: QueryList<TabLabelWrapperDirective & {
         disabled?: boolean;
     }>;
@@ -35,22 +54,82 @@ export declare class TabHeaderComponent implements OnDestroy, AfterContentChecke
     _activeIndicator: TabHeaderActiveIndicatorComponent;
     ngOnDestroy(): void;
     ngAfterContentChecked(): void;
+    /**
+     * Aligns the ink bar to the selected tab on load.
+     */
     ngAfterContentInit(): void;
+    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
     get scrollDistance(): number;
     set scrollDistance(v: number);
+    /** Tracks which element has focus; used for keyboard navigation */
     get focusIndex(): number;
+    /** When the focus index is set, we must manually send focus to the correct label */
     set focusIndex(value: number);
+    /**
+     * Determines if an index is valid.  If the tabs are not ready yet, we assume that the user is
+     * providing a valid index and return true.
+     */
     _isValidIndex(index: number): boolean;
     _handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
+     * scrolling is enabled.
+     */
     _setTabFocus(tabIndex: number): void;
+    /**
+     * Moves the tab list such that the desired tab label (marked by index) is moved into view.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _scrollToLabel(labelIndex: number): void;
+    /**
+     * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
+     * the end of the list, respectively). The distance to scroll is computed to be a third of the
+     * length of the tab list view window.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _scrollHeader(scrollDir: ScrollDirection): void;
+    /**
+     * Callback for when the MutationObserver detects that the content has changed.
+     */
     _onContentChanges(): void;
+    /**
+     * Updating the view whether pagination should be enabled or not
+     */
     _updatePagination(): void;
+    /**
+     * Evaluate whether the pagination controls should be displayed. If the scroll width of the
+     * tab list is wider than the size of the header container, then the pagination controls should
+     * be shown.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _checkPaginationEnabled(): void;
+    /**
+     * Evaluate whether the before and after controls should be enabled or disabled.
+     * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
+     * before button. If the header is at the end of the list (scroll distance is equal to the
+     * maximum distance we can scroll), then disable the after button.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _checkScrollingControls(): void;
+    /**
+     * Determines what is the maximum length in pixels that can be set for the scroll distance. This
+     * is equal to the difference in width between the tab list container and tab header container.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _getMaxScrollDistance(): number;
+    /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
     _updateTabScrollPosition(): void;
+    /** Tells the active indicator to align itself to the current label wrapper */
     _alignActiveIndicatorToSelectedTab(): void;
     constructor(_changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<TabHeaderComponent, never>;

package/tabs/tab.component.d.ts

@@ -8,17 +8,35 @@ export declare class TabComponent implements AfterContentInit, OnDestroy, OnChan
     private readonly _viewContainerRef;
     readonly tabContext: TabContextService;
     name: string;
+    /** Plain text label for the tab, used when there is no template label. */
     textLabel: string;
+    /** Whether or not to show the close button in the header */
     closeable: boolean;
+    /** Whether or not the tab is disabled  */
     disabled: boolean;
     close: EventEmitter<void>;
+    /** Content for the tab label given by `<ng-template [auiTabLabel]>`. */
     templateLabel: TabLabelDirective;
+    /**
+     * Template provided in the tab content that will be used if present, used to enable lazy-loading
+     */
     _explicitContent: TemplateRef<any>;
+    /** Template inside the AuiTab view that contains an `<ng-content>`. */
     _implicitContent: TemplateRef<any>;
     get content(): TemplatePortal | null;
+    /**
+     * The relatively indexed position where 0 represents the center, negative is left, and positive
+     * represents the right.
+     */
     position: number | null;
+    /**
+     * The initial relatively index origin of the tab if it was created and selected after there
+     * was already a selected tab. Provides context of what position the tab should originate from.
+     */
     origin: number | null;
+    /** Emits whenever the internal state of the tab changes. */
     readonly _stateChanges: Subject<void>;
+    /** Portal that will be the hosted content of the tab */
     private _contentPortal;
     constructor(_viewContainerRef: ViewContainerRef, tabContext: TabContextService);
     ngAfterContentInit(): void;

package/tabs/tabs.types.d.ts

@@ -1,7 +1,10 @@
 import { ValueOf } from '../internal/types';
 export declare const TabSize: {
+    /** 卡片级尺寸 */
     readonly Large: "large";
+    /** 页面级尺寸 */
     readonly Medium: "medium";
+    /** 小尺寸 */
     readonly Small: "small";
 };
 export type TabSize = ValueOf<typeof TabSize>;

package/theme/style.css

@@ -25,10 +25,10 @@
   position: absolute;
   pointer-events: auto;
   box-sizing: border-box;
-  z-index: 1000;
   display: flex;
   max-width: 100%;
   max-height: 100%;
+  z-index: 1000;
 }
 
 .cdk-overlay-backdrop {
@@ -37,21 +37,22 @@
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 1000;
   pointer-events: auto;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
   opacity: 0;
+  z-index: 1000;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+.cdk-overlay-backdrop-showing {
   opacity: 1;
 }
 
-.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
-  opacity: 0.6;
+@media (forced-colors: active) {
+  .cdk-overlay-backdrop-showing {
+    opacity: 0.6;
+  }
 }
-
 .cdk-overlay-dark-backdrop {
   background: rgba(0, 0, 0, 0.32);
 }
@@ -62,7 +63,7 @@
   opacity: 1;
 }
 
-.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing, .cdk-high-contrast-active .cdk-overlay-transparent-backdrop {
   opacity: 0;
   visibility: visible;
 }
@@ -73,11 +74,11 @@
 
 .cdk-overlay-connected-position-bounding-box {
   position: absolute;
-  z-index: 1000;
   display: flex;
   flex-direction: column;
   min-width: 1px;
   min-height: 1px;
+  z-index: 1000;
 }
 
 .cdk-global-scrollblock {

package/tooltip/tooltip-intl.d.ts

@@ -1,4 +1,7 @@
 import * as i0 from "@angular/core";
+/**
+ * Texts to render on the code editor.
+ */
 export declare class TooltipCopyIntl {
     copyTip: string;
     copySuccessTip: string;