Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@microsoft/fast-foundation

Package Overview
Dependencies
Maintainers
7
Versions
197
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@microsoft/fast-foundation - npm Package Compare versions

Comparing version 3.0.0-alpha.26 to 3.0.0-alpha.27

31

dist/dts/data-grid/data-grid-row.d.ts
import { FASTElement, ViewTemplate } from "@microsoft/fast-element";
import type { ColumnDefinition } from "./data-grid.js";
import { DataGridRowTypes } from "./data-grid.options.js";
import { DataGridRowTypes, DataGridSelectionBehavior, DataGridSelectionChangeDetail } from "./data-grid.options.js";
/**

@@ -96,4 +96,16 @@ * A Data Grid Row Custom HTML Element.

/**
* If the row is selected.
*
* @internal
*/
selected: boolean;
/**
* Selection behavior
*
* @internal
*/
selectionBehavior: DataGridSelectionBehavior;
/**
* @internal
*/
slottedCellElements: HTMLElement[];

@@ -113,7 +125,24 @@ /**

disconnectedCallback(): void;
/**
* Attempts to set the selected state of the row
*
* @public
*/
toggleSelected(detail: DataGridSelectionChangeDetail): void;
handleFocusout(e: FocusEvent): void;
/**
* @internal
*/
handleCellFocus(e: Event): void;
/**
* @internal
*/
handleKeydown(e: KeyboardEvent): void;
private isSelected;
/**
* @internal
*/
handleClick(e: MouseEvent): void;
private updateItemTemplate;
private updateRowStyle;
}

68

dist/dts/data-grid/data-grid.d.ts
import type { SyntheticViewTemplate, ViewTemplate } from "@microsoft/fast-element";
import { FASTElement } from "@microsoft/fast-element";
import type { FASTDataGridCell } from "./data-grid-cell.js";
import { DataGridRowTypes, GenerateHeaderOptions } from "./data-grid.options.js";
export { DataGridRowTypes, GenerateHeaderOptions };
import { DataGridRowTypes, DataGridSelectionBehavior, DataGridSelectionMode, GenerateHeaderOptions } from "./data-grid.options.js";
export { DataGridRowTypes, DataGridSelectionBehavior, DataGridSelectionMode, GenerateHeaderOptions, };
/**

@@ -80,2 +80,7 @@ * Defines a column in the grid

/**
* Default callback to determine if a row is selectable (also depends on selectionMode)
* By default all rows except for header rows are selectable
*/
private static defaultRowSelectableCallback;
/**
* When true the component will not add itself to the tab queue.

@@ -120,2 +125,35 @@ * Default is false.

/**
* Defines how the grid handles row or cell selection.
*
* @public
* @remarks
* HTML Attribute: selection-mode
*/
selectionMode: DataGridSelectionMode;
private selectionModeChanged;
/**
* Controls selection behavior
*
* @public
* @remarks
* HTML Attribute: selection-behavior
*/
selectionBehavior: DataGridSelectionBehavior;
/**
* The indexes of initially selected grid elements. Includes header rows.
* In the case of row selection the format should be a comma delimited list of row indexes. ie. "1,3,5"
*
* @public
* @remarks
* HTML Attribute: initial-row-selection
*/
initialRowSelection: string;
/**
* Callback that determines whether a particular row is selectable or not (depends on selectionMode also)
* By default all rows except header rows are selectable.
*
* @public
*/
rowSelectableCallback: (rowIndex: number, grid: FASTDataGrid) => boolean;
/**
* The data being displayed in the grid

@@ -190,2 +228,14 @@ *

rowElements: HTMLElement[];
/**
* Selected row indexes
*
*/
private _selectedRowIndexes;
/**
* The selectedRowIndexes property.
*
* @public
*/
get selectedRowIndexes(): number[];
set selectedRowIndexes(next: number[]);
private rowsPlaceholder;

@@ -200,3 +250,5 @@ private behaviorOrchestrator;

private generatedGridTemplateColumns;
constructor();
private lastNotShiftSelectedRowIndex;
private preShiftRowSelection;
private selectionUpdated;
/**

@@ -226,3 +278,13 @@ * @internal

handleKeydown(e: KeyboardEvent): void;
handleRowSelectedChange(e: CustomEvent): void;
private handleMultiRowPointerSelection;
private handleMultiRowKeyboardSelection;
private handleSingleRowSelection;
private getPageSize;
/**
* Validates that new selected rows are selectable and updates the selectedRowIndexes prop
*/
private updateSelectedRows;
private selectAllRows;
private deselectAllRows;
private focusOnCell;

@@ -229,0 +291,0 @@ private queueFocusUpdate;

43

dist/dts/data-grid/data-grid.options.d.ts

@@ -80,1 +80,44 @@ import type { ValuesOf } from "../utilities/index.js";

export declare type DataGridCellRole = ValuesOf<typeof DataGridCellRole>;
/**
* Event detail for DataGridRow row/cell selectionchanged events
*
* @internal
*/
export interface DataGridSelectionChangeDetail {
newValue: boolean;
shiftKey: boolean;
ctrlKey: boolean;
isKeyboardEvent: boolean;
}
/**
* Enumerates the data grid selection mode options
*
* @public
*/
export declare const DataGridSelectionMode: {
readonly none: "none";
readonly singleRow: "single-row";
readonly multiRow: "multi-row";
};
/**
* The types for the data grid selection mode options
*
* @public
*/
export declare type DataGridSelectionMode = ValuesOf<typeof DataGridSelectionMode>;
/**
* Enumerates the data grid selection behavior options
*
* @public
*/
export declare const DataGridSelectionBehavior: {
readonly programmatic: "programmatic";
readonly keyboardOnly: "keyboard-only";
readonly auto: "auto";
};
/**
* The types for the data grid selection mode options
*
* @public
*/
export declare type DataGridSelectionBehavior = ValuesOf<typeof DataGridSelectionBehavior>;

8

dist/dts/slider/slider.d.ts

@@ -100,3 +100,3 @@ import { Direction, Orientation } from "@microsoft/fast-web-utilities";

min: number;
private minChanged;
protected minChanged(): void;
/**

@@ -111,3 +111,3 @@ * The maximum allowed value.

max: number;
private maxChanged;
protected maxChanged(): void;
/**

@@ -121,3 +121,3 @@ * Value to increment or decrement via arrow keys, mouse click or drag.

step: number | undefined;
private stepChanged;
protected stepChanged(): void;
/**

@@ -131,3 +131,3 @@ * The orientation of the slider.

orientation: Orientation;
private orientationChanged;
protected orientationChanged(): void;
/**

@@ -134,0 +134,0 @@ * The selection mode.

21

dist/dts/tabs/tabs.d.ts

@@ -13,3 +13,2 @@ import { FASTElement } from "@microsoft/fast-element";

* @csspart tablist - The element wrapping for the tabs
* @csspart activeIndicator - The visual indicator
* @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation

@@ -60,17 +59,2 @@ *

/**
* Whether or not to show the active indicator
* @public
* @remarks
* HTML Attribute: activeindicator
*/
hideActiveIndicator: boolean;
/**
* @internal
*/
activeIndicatorRef: HTMLElement;
/**
* @internal
*/
showActiveIndicator: boolean;
/**
* A reference to the active tab

@@ -82,3 +66,2 @@ * @public

private activeTabIndex;
private ticking;
private tabIds;

@@ -90,3 +73,3 @@ private tabpanelIds;

private getActiveIndex;
private setTabs;
protected setTabs: () => void;
private setTabPanels;

@@ -99,4 +82,2 @@ private getTabIds;

private handleTabKeyDown;
private handleActiveIndicatorPosition;
private animateActiveIndicator;
/**

@@ -103,0 +84,0 @@ * The adjust method for FASTTabs

61

dist/esm/data-grid/data-grid-row.js
import { __decorate } from "tslib";
import { attr, FASTElement, observable, oneWay, RepeatDirective, } from "@microsoft/fast-element";
import { ViewBehaviorOrchestrator } from "@microsoft/fast-element/utilities";
import { eventFocusOut, eventKeyDown, keyArrowLeft, keyArrowRight, keyEnd, keyHome, } from "@microsoft/fast-web-utilities";
import { DataGridRowTypes } from "./data-grid.options.js";
import { eventClick, eventFocusOut, eventKeyDown, keyArrowLeft, keyArrowRight, keyEnd, keyHome, keySpace, } from "@microsoft/fast-web-utilities";
import { DataGridRowTypes, DataGridSelectionBehavior, } from "./data-grid.options.js";
/**

@@ -44,4 +44,10 @@ * A Data Grid Row Custom HTML Element.

/**
* Selection behavior
*
* @internal
*/
this.selectionBehavior = DataGridSelectionBehavior.auto;
/**
* @internal
*/
this.focusColumnIndex = 0;

@@ -91,2 +97,3 @@ this.refocusOnLoad = false;

this.addEventListener(eventKeyDown, this.handleKeydown);
this.addEventListener(eventClick, this.handleClick);
this.updateRowStyle();

@@ -109,3 +116,12 @@ if (this.refocusOnLoad) {

this.removeEventListener(eventKeyDown, this.handleKeydown);
this.removeEventListener(eventClick, this.handleClick);
}
/**
* Attempts to set the selected state of the row
*
* @public
*/
toggleSelected(detail) {
this.$emit("rowselectionchange", detail);
}
handleFocusout(e) {

@@ -117,2 +133,5 @@ if (!this.contains(e.target)) {

}
/**
* @internal
*/
handleCellFocus(e) {

@@ -123,2 +142,5 @@ this.isActiveRow = true;

}
/**
* @internal
*/
handleKeydown(e) {

@@ -155,4 +177,36 @@ if (e.defaultPrevented) {

break;
case keySpace:
if (this.selected !== undefined &&
this.selectionBehavior !== DataGridSelectionBehavior.programmatic) {
e.preventDefault();
this.toggleSelected({
newValue: !this.isSelected(),
shiftKey: e.shiftKey,
ctrlKey: e.ctrlKey,
isKeyboardEvent: true,
});
}
break;
}
}
isSelected() {
return this.selected;
}
/**
* @internal
*/
handleClick(e) {
if (e.defaultPrevented ||
this.selectionBehavior !== DataGridSelectionBehavior.auto ||
this.selected === undefined) {
return;
}
e.preventDefault();
this.toggleSelected({
newValue: !this.isSelected(),
shiftKey: e.shiftKey,
ctrlKey: e.ctrlKey,
isKeyboardEvent: false,
});
}
updateItemTemplate() {

@@ -207,1 +261,4 @@ this.activeCellItemTemplate =

], FASTDataGridRow.prototype, "cellElements", void 0);
__decorate([
observable
], FASTDataGridRow.prototype, "selected", void 0);

1

dist/esm/data-grid/data-grid-row.template.js

@@ -36,2 +36,3 @@ import { children, elements, html, slotted, } from "@microsoft/fast-element";

:defaultHeaderCellItemTemplate="${headerCellItemTemplate(options)}"
aria-selected="${x => (x.selected !== undefined ? x.selected : void 0)}"
${children({

@@ -38,0 +39,0 @@ property: "cellElements",

278

dist/esm/data-grid/data-grid.js

@@ -5,4 +5,4 @@ import { __decorate } from "tslib";

import { eventFocus, eventFocusOut, eventKeyDown, keyArrowDown, keyArrowUp, keyEnd, keyHome, keyPageDown, keyPageUp, } from "@microsoft/fast-web-utilities";
import { DataGridRowTypes, GenerateHeaderOptions } from "./data-grid.options.js";
export { DataGridRowTypes, GenerateHeaderOptions };
import { DataGridRowTypes, DataGridSelectionBehavior, DataGridSelectionMode, GenerateHeaderOptions, } from "./data-grid.options.js";
export { DataGridRowTypes, DataGridSelectionBehavior, DataGridSelectionMode, GenerateHeaderOptions, };
/**

@@ -16,3 +16,3 @@ * A Data Grid Custom HTML Element.

constructor() {
super();
super(...arguments);
/**

@@ -36,2 +36,25 @@ * When true the component will not add itself to the tab queue.

/**
* Defines how the grid handles row or cell selection.
*
* @public
* @remarks
* HTML Attribute: selection-mode
*/
this.selectionMode = DataGridSelectionMode.none;
/**
* Controls selection behavior
*
* @public
* @remarks
* HTML Attribute: selection-behavior
*/
this.selectionBehavior = DataGridSelectionBehavior.auto;
/**
* Callback that determines whether a particular row is selectable or not (depends on selectionMode also)
* By default all rows except header rows are selectable.
*
* @public
*/
this.rowSelectableCallback = FASTDataGrid.defaultRowSelectableCallback;
/**
* The data being displayed in the grid

@@ -66,5 +89,12 @@ *

this.focusColumnIndex = 0;
/**
* Selected row indexes
*
*/
this._selectedRowIndexes = [];
this.rowsPlaceholder = null;
this.behaviorOrchestrator = null;
this.generatedHeader = null;
// flag to indicate whether the grid is actively updating focus
// (so we don't self-trigger changes)
this.isUpdatingFocus = false;

@@ -75,2 +105,5 @@ this.pendingFocusUpdate = false;

this.generatedGridTemplateColumns = "";
this.lastNotShiftSelectedRowIndex = -1;
this.preShiftRowSelection = null;
this.selectionUpdated = false;
this.focusOnCell = (rowIndex, columnIndex, alignment) => {

@@ -95,2 +128,3 @@ if (this.rowElements.length === 0) {

observer) => {
this.deselectAllRows();
if (mutations && mutations.length) {

@@ -130,2 +164,9 @@ mutations.forEach((mutation) => {

thisRow.gridTemplateColumns = newGridTemplateColumns;
thisRow.selectionBehavior = this.selectionBehavior;
if (this.selectionMode === DataGridSelectionMode.singleRow ||
this.selectionMode === DataGridSelectionMode.multiRow) {
thisRow.selected = this._selectedRowIndexes.includes(index)
? true
: false;
}
if (this.columnDefinitionsStale) {

@@ -137,2 +178,6 @@ thisRow.columnDefinitions = this.columnDefinitions;

this.columnDefinitionsStale = false;
if (this.selectionUpdated) {
this.selectionUpdated = false;
this.$emit("selectionchange");
}
};

@@ -150,2 +195,14 @@ }

}
/**
* Default callback to determine if a row is selectable (also depends on selectionMode)
* By default all rows except for header rows are selectable
*/
static defaultRowSelectableCallback(rowIndex, grid) {
if (grid.rowElements.length < rowIndex ||
grid.rowElements[rowIndex].rowType !==
DataGridRowTypes.default) {
return false;
}
return true;
}
noTabbingChanged() {

@@ -174,2 +231,13 @@ if (this.$fastController.isConnected) {

}
selectionModeChanged(prev, next) {
if (this.$fastController.isConnected) {
if (prev === "single-row" || prev === "multi-row") {
this.removeEventListener("rowselectionchange", this.handleRowSelectedChange);
}
if (next === "single-row" || next === "multi-row") {
this.addEventListener("rowselectionchange", this.handleRowSelectedChange);
}
this.deselectAllRows();
}
}
rowsDataChanged() {

@@ -181,2 +249,3 @@ if (this.columnDefinitions === null && this.rowsData.length > 0) {

this.toggleGeneratedHeader();
this.deselectAllRows();
}

@@ -212,2 +281,26 @@ }

/**
* The selectedRowIndexes property.
*
* @public
*/
get selectedRowIndexes() {
return this._selectedRowIndexes.slice();
}
set selectedRowIndexes(next) {
if (this.selectionMode !== DataGridSelectionMode.multiRow &&
this.selectionMode !== DataGridSelectionMode.singleRow) {
return;
}
// cull unselectable rows
next = next.filter(rowIndex => this.rowSelectableCallback(rowIndex, this));
if (this.selectionMode === DataGridSelectionMode.singleRow && next.length > 1) {
this._selectedRowIndexes.splice(0, this.selectedRowIndexes.length, next[0]);
}
else {
this._selectedRowIndexes.splice(0, this.selectedRowIndexes.length, ...next);
}
this.selectionUpdated = true;
this.queueRowIndexUpdate();
}
/**
* @internal

@@ -230,2 +323,6 @@ */

this.addEventListener(eventFocusOut, this.handleFocusOut);
if (this.selectionMode === DataGridSelectionMode.singleRow ||
this.selectionMode === DataGridSelectionMode.multiRow) {
this.addEventListener("rowselectionchange", this.handleRowSelectedChange);
}
this.observer = new MutationObserver(this.onChildListChange);

@@ -237,3 +334,15 @@ // only observe if nodes are added or removed

}
Updates.enqueue(this.queueRowIndexUpdate);
// apply initial selection after the grid is populated
Updates.enqueue(() => {
if (this.selectionMode !== DataGridSelectionMode.none &&
this.initialRowSelection) {
const selectionAsArray = this.initialRowSelection.split(",");
const initialSelection = [];
selectionAsArray.forEach((element) => {
initialSelection.push(parseInt(element.trim()));
});
this.updateSelectedRows(initialSelection);
}
});
this.queueRowIndexUpdate();
}

@@ -249,2 +358,6 @@ /**

this.removeEventListener(eventFocusOut, this.handleFocusOut);
if (this.selectionMode === DataGridSelectionMode.singleRow ||
this.selectionMode === DataGridSelectionMode.multiRow) {
this.removeEventListener("rowselectionchange", this.handleRowSelectedChange);
}
this.observer.disconnect();

@@ -332,4 +445,115 @@ if (this.generatedHeader !== null) {

break;
case "a":
if (!e.ctrlKey) {
return;
}
switch (this.selectionMode) {
case "multi-row":
this.selectAllRows();
e.preventDefault();
return;
}
break;
}
}
handleRowSelectedChange(e) {
if (e.defaultPrevented || this.selectionMode === DataGridSelectionMode.none) {
return;
}
const path = e.composedPath();
const rowMatch = path.find((target) => {
return this.rowElements.indexOf(target) !== -1;
});
if (rowMatch) {
e.preventDefault();
const changedRow = rowMatch;
const changeEventDetail = e.detail;
switch (this.selectionMode) {
case DataGridSelectionMode.singleRow:
this.handleSingleRowSelection(changedRow, changeEventDetail);
break;
case DataGridSelectionMode.multiRow:
if (changeEventDetail.isKeyboardEvent) {
this.handleMultiRowKeyboardSelection(changedRow, changeEventDetail);
}
else {
this.handleMultiRowPointerSelection(changedRow, changeEventDetail);
}
break;
}
}
}
handleMultiRowPointerSelection(changedRow, changeEventDetail) {
let newSelection = this.selectedRowIndexes.slice();
if (changeEventDetail.shiftKey) {
if (this.lastNotShiftSelectedRowIndex === -1) {
this.handleSingleRowSelection(changedRow, changeEventDetail);
}
else {
if (this.preShiftRowSelection !== null) {
// undo the last thing
newSelection = this.preShiftRowSelection.slice();
}
else {
this.preShiftRowSelection = newSelection.slice();
}
const dirMod = changedRow.rowIndex > this.lastNotShiftSelectedRowIndex ? 1 : -1;
let i = this.lastNotShiftSelectedRowIndex + dirMod;
for (i; i !== changedRow.rowIndex + dirMod; i = i + dirMod) {
const selectedRowIndex = newSelection.indexOf(i);
if (!newSelection.includes(changedRow.rowIndex) &&
selectedRowIndex === -1) {
newSelection.push(i);
}
}
}
this.updateSelectedRows(newSelection);
}
else if (changeEventDetail.ctrlKey) {
if (changeEventDetail.newValue &&
!newSelection.includes(changedRow.rowIndex)) {
newSelection.push(changedRow.rowIndex);
this.lastNotShiftSelectedRowIndex = changedRow.rowIndex;
}
if (!changeEventDetail.newValue &&
newSelection.includes(changedRow.rowIndex)) {
newSelection.splice(newSelection.indexOf(changedRow.rowIndex), 1);
this.lastNotShiftSelectedRowIndex = -1;
}
this.preShiftRowSelection = null;
this.updateSelectedRows(newSelection);
}
else {
this.handleSingleRowSelection(changedRow, changeEventDetail);
this.preShiftRowSelection = null;
}
}
handleMultiRowKeyboardSelection(changedRow, changeEventDetail) {
if (changeEventDetail.isKeyboardEvent && !changeEventDetail.shiftKey) {
return;
}
this.preShiftRowSelection = null;
this.lastNotShiftSelectedRowIndex = -1;
const newSelection = this.selectedRowIndexes.slice();
if (newSelection.includes(changedRow.rowIndex)) {
newSelection.splice(newSelection.indexOf(changedRow.rowIndex), 1);
}
else {
newSelection.push(changedRow.rowIndex);
}
this.updateSelectedRows(newSelection);
}
handleSingleRowSelection(changedRow, changeEventDetail) {
if (changeEventDetail.isKeyboardEvent && !changeEventDetail.shiftKey) {
return;
}
if (changeEventDetail.newValue) {
this.updateSelectedRows([changedRow.rowIndex]);
this.lastNotShiftSelectedRowIndex = changedRow.rowIndex;
}
else {
this.updateSelectedRows([]);
this.lastNotShiftSelectedRowIndex = -1;
}
}
getPageSize() {

@@ -360,2 +584,36 @@ if (this.pageSize) {

}
/**
* Validates that new selected rows are selectable and updates the selectedRowIndexes prop
*/
updateSelectedRows(newSelection) {
this.selectedRowIndexes = newSelection;
}
selectAllRows() {
if (this.selectionMode !== DataGridSelectionMode.multiRow ||
this.rowElements.length === 0) {
return;
}
const unselectableRowIndexes = [];
for (let index = 0, maxIndex = this.rowElements.length; index < maxIndex; index++) {
if (!this.rowSelectableCallback(index, this)) {
unselectableRowIndexes.push(index);
}
}
const selectableRowCount = Math.max(this.rowElements.length - unselectableRowIndexes.length, 0);
if (this._selectedRowIndexes.length === selectableRowCount) {
// deselect all if all are already selected
this.updateSelectedRows([]);
return;
}
const newSelection = [];
this.rowElements.forEach(element => {
newSelection.push(element.rowIndex);
});
this.lastNotShiftSelectedRowIndex = -1;
this.updateSelectedRows(newSelection);
}
deselectAllRows() {
this.updateSelectedRows([]);
this.lastNotShiftSelectedRowIndex = -1;
}
queueFocusUpdate() {

@@ -422,3 +680,15 @@ if (this.isUpdatingFocus &&

__decorate([
attr({ attribute: "selection-mode" })
], FASTDataGrid.prototype, "selectionMode", void 0);
__decorate([
attr({ attribute: "selection-behavior" })
], FASTDataGrid.prototype, "selectionBehavior", void 0);
__decorate([
attr({ attribute: "initial-row-selection" })
], FASTDataGrid.prototype, "initialRowSelection", void 0);
__decorate([
observable
], FASTDataGrid.prototype, "rowSelectableCallback", void 0);
__decorate([
observable
], FASTDataGrid.prototype, "rowsData", void 0);

@@ -425,0 +695,0 @@ __decorate([

20

dist/esm/data-grid/data-grid.options.js

@@ -51,1 +51,21 @@ /**

};
/**
* Enumerates the data grid selection mode options
*
* @public
*/
export const DataGridSelectionMode = {
none: "none",
singleRow: "single-row",
multiRow: "multi-row",
};
/**
* Enumerates the data grid selection behavior options
*
* @public
*/
export const DataGridSelectionBehavior = {
programmatic: "programmatic",
keyboardOnly: "keyboard-only",
auto: "auto",
};

65

dist/esm/tabs/tabs.js

@@ -16,3 +16,2 @@ import { __decorate } from "tslib";

* @csspart tablist - The element wrapping for the tabs
* @csspart activeIndicator - The visual indicator
* @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation

@@ -32,16 +31,4 @@ *

this.orientation = TabsOrientation.horizontal;
/**
* Whether or not to show the active indicator
* @public
* @remarks
* HTML Attribute: activeindicator
*/
this.hideActiveIndicator = false;
/**
* @internal
*/
this.showActiveIndicator = true;
this.prevActiveTabIndex = 0;
this.activeTabIndex = 0;
this.ticking = false;
this.change = () => {

@@ -63,9 +50,5 @@ this.$emit("change", this.activetab);

this.activeTabIndex = this.getActiveIndex();
this.showActiveIndicator = false;
this.tabs.forEach((tab, index) => {
if (tab.slot === "tab") {
const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
if (!this.hideActiveIndicator && this.isFocusableElement(tab)) {
this.showActiveIndicator = true;
}
const tabId = this.tabIds[index];

@@ -205,3 +188,2 @@ const tabpanelId = this.tabpanelIds[index];

this.setTabPanels();
this.handleActiveIndicatorPosition();
}

@@ -218,3 +200,2 @@ }

this.setTabPanels();
this.handleActiveIndicatorPosition();
}

@@ -232,3 +213,2 @@ }

this.setTabPanels();
this.handleActiveIndicatorPosition();
}

@@ -246,3 +226,2 @@ }

this.setTabPanels();
this.handleActiveIndicatorPosition();
}

@@ -283,37 +262,2 @@ }

}
handleActiveIndicatorPosition() {
// Ignore if we click twice on the same tab
if (this.showActiveIndicator &&
!this.hideActiveIndicator &&
this.activeTabIndex !== this.prevActiveTabIndex) {
if (this.ticking) {
this.ticking = false;
}
else {
this.ticking = true;
this.animateActiveIndicator();
}
}
}
animateActiveIndicator() {
this.ticking = true;
const gridProperty = this.isHorizontal() ? "gridColumn" : "gridRow";
const translateProperty = this.isHorizontal()
? "translateX"
: "translateY";
const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
const prev = this.activeIndicatorRef[offsetProperty];
this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
const next = this.activeIndicatorRef[offsetProperty];
this.activeIndicatorRef.style[gridProperty] = `${this.prevActiveTabIndex + 1}`;
const dif = next - prev;
this.activeIndicatorRef.style.transform = `${translateProperty}(${dif}px)`;
this.activeIndicatorRef.classList.add("activeIndicatorTransition");
this.activeIndicatorRef.addEventListener("transitionend", () => {
this.ticking = false;
this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
this.activeIndicatorRef.style.transform = `${translateProperty}(0px)`;
this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
});
}
/**

@@ -360,11 +304,2 @@ * The adjust method for FASTTabs

], FASTTabs.prototype, "tabpanels", void 0);
__decorate([
attr({ attribute: "hide-active-indicator", mode: "boolean" })
], FASTTabs.prototype, "hideActiveIndicator", void 0);
__decorate([
observable
], FASTTabs.prototype, "activeIndicatorRef", void 0);
__decorate([
observable
], FASTTabs.prototype, "showActiveIndicator", void 0);
applyMixins(FASTTabs, StartEnd);

10

dist/esm/tabs/tabs.template.js

@@ -1,2 +0,2 @@

import { html, ref, slotted, when } from "@microsoft/fast-element";
import { html, slotted } from "@microsoft/fast-element";
import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";

@@ -12,10 +12,2 @@ /**

<slot name="tab" ${slotted("tabs")}></slot>
${when(x => x.showActiveIndicator, html `
<div
${ref("activeIndicatorRef")}
class="active-indicator"
part="active-indicator"
></div>
`)}
</div>

@@ -22,0 +14,0 @@ ${endSlotTemplate(options)}

4

package.json

@@ -5,3 +5,3 @@ {

"sideEffects": false,
"version": "3.0.0-alpha.26",
"version": "3.0.0-alpha.27",
"author": {

@@ -100,3 +100,3 @@ "name": "Microsoft",

"@floating-ui/dom": "^1.0.3",
"@microsoft/fast-element": "^2.0.0-beta.22",
"@microsoft/fast-element": "2.0.0-beta.23",
"@microsoft/fast-web-utilities": "^6.0.0",

@@ -103,0 +103,0 @@ "tabbable": "^5.2.0",

CHANGELOG.json

Sorry, the diff of this file is too big to display

CHANGELOG.md

Sorry, the diff of this file is too big to display

dist/custom-elements.json

Sorry, the diff of this file is too big to display

dist/fast-foundation.api.json

Sorry, the diff of this file is too big to display

dist/fast-foundation.d.ts

Sorry, the diff of this file is too big to display

dist/fast-foundation.debug.js

Sorry, the diff of this file is too big to display

dist/fast-foundation.debug.min.js

Sorry, the diff of this file is too big to display

dist/fast-foundation.js

Sorry, the diff of this file is too big to display

dist/fast-foundation.min.js

Sorry, the diff of this file is too big to display

dist/fast-foundation.untrimmed.d.ts

Sorry, the diff of this file is too big to display

docs/api-report.md

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc