npm - igniteui-webcomponents - Versions diffs - 7.2.4 → 7.3.0-beta.0 - Mend

igniteui-webcomponents 7.2.4 → 7.3.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (976) hide show

package/components/stepper/stepper.js CHANGED Viewed

@@ -7,13 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { ContextProvider } from '@lit/context';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addInternalsController } from '../common/controllers/internals.js';
-import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, homeKey, } from '../common/controllers/key-bindings.js';
-import { addSlotController, setSlots } from '../common/controllers/slot.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { addSafeEventListener, first, getElementFromPath, getRoot, isLTR, last, wrap, } from '../common/util.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, homeKey, } from '#internals/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { firstOf, lastOf } from '#internals/utils/arrays.js';
+import { getRoot, isLTR } from '#internals/utils/dom.js';
+import { addSafeEventListener, getElementFromPath, } from '#internals/utils/events.js';
+import { wrap } from '#internals/utils/math.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { STEPPER_CONTEXT } from './common/context.js';
 import { createStepperState } from './common/state.js';
 import IgcStepComponent from './step.js';
@@ -104,10 +107,10 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
         return !getElementFromPath('[data-step-header]', event);
     }
     _handleHomeKey() {
-        this._getStepHeader(first(this._state.accessibleSteps))?.focus();
+        this._getStepHeader(firstOf(this._state.accessibleSteps))?.focus();
     }
     _handleEndKey() {
-        this._getStepHeader(last(this._state.accessibleSteps))?.focus();
+        this._getStepHeader(lastOf(this._state.accessibleSteps))?.focus();
     }
     _handleArrowDown() {
         if (!this._isHorizontal) {

package/components/stepper/stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport {\n addKeybindings,\n arrowDown,\n arrowLeft,\n arrowRight,\n arrowUp,\n endKey,\n homeKey,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport {\n addSafeEventListener,\n first,\n getElementFromPath,\n getRoot,\n isLTR,\n last,\n wrap,\n} from '../common/util.js';\nimport type {\n HorizontalTransitionAnimation,\n StepperOrientation,\n StepperStepType,\n StepperTitlePosition,\n StepperVerticalAnimation,\n} from '../types.js';\nimport { STEPPER_CONTEXT } from './common/context.js';\nimport { createStepperState } from './common/state.js';\nimport type {\n IgcActiveStepChangedEventArgs,\n IgcActiveStepChangingEventArgs,\n IgcStepperComponentEventMap,\n} from './common/types.js';\nimport IgcStepComponent from './step.js';\nimport { styles } from './themes/stepper/stepper.base.css.js';\nimport { styles as bootstrap } from './themes/stepper/stepper.bootstrap.css.js';\nimport { styles as fluent } from './themes/stepper/stepper.fluent.css.js';\nimport { styles as indigo } from './themes/stepper/stepper.indigo.css.js';\n\nconst STEPPER_SYNC_PROPERTIES: (keyof IgcStepperComponent)[] = [\n 'orientation',\n 'stepType',\n 'contentTop',\n 'verticalAnimation',\n 'horizontalAnimation',\n 'animationDuration',\n 'titlePosition',\n];\n\n/*\n A stepper component that provides a wizard-like workflow by dividing content into logical steps.\n \n @remarks\n * The stepper component allows the user to navigate between multiple `igc-step` elements.\n * It supports horizontal and vertical orientation, linear and non-linear navigation,\n * keyboard navigation, and provides API methods to control the active step.\n \n In linear mode, the user can only advance to the next step if the current step is valid\n * (not marked as `invalid`).\n \n @element igc-stepper\n \n @slot - Renders `igc-step` components inside the default slot.\n \n @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable.\n * @fires igcActiveStepChanged - Emitted after the active step has changed.\n \n @example\n * ```html\n * <igc-stepper>\n * <igc-step>\n * <span slot=\"title\">Step 1</span>\n * <p>Step 1 content</p>\n * </igc-step>\n * <igc-step>\n * <span slot=\"title\">Step 2</span>\n * <p>Step 2 content</p>\n * </igc-step>\n * </igc-stepper>\n * ```\n \n @example Linear stepper with vertical orientation\n * ```html\n * <igc-stepper orientation=\"vertical\" linear>\n * <igc-step complete>\n * <span slot=\"title\">Completed step</span>\n * <p>This step is already complete.</p>\n * </igc-step>\n * <igc-step active>\n * <span slot=\"title\">Current step</span>\n * <p>Fill in the details to proceed.</p>\n * </igc-step>\n * <igc-step>\n * <span slot=\"title\">Next step</span>\n * <p>Upcoming content.</p>\n * </igc-step>\n * </igc-stepper>\n * ```\n /\nexport default class IgcStepperComponent extends EventEmitterMixin<\n IgcStepperComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-stepper';\n public static styles = styles;\n\n / blazorSuppress /\n public static register(): void {\n registerComponent(IgcStepperComponent, IgcStepComponent);\n }\n\n //#region Internal state and properties\n\n private readonly _state = createStepperState();\n\n private readonly _contextProvider = new ContextProvider(this, {\n context: STEPPER_CONTEXT,\n initialValue: {\n stepper: this,\n state: this._state,\n },\n });\n\n private readonly _internals = addInternalsController(this, {\n initialARIA: {\n role: 'tablist',\n },\n });\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots(),\n onChange: this._handleSlotChange,\n });\n\n private get _isHorizontal(): boolean {\n return this.orientation === 'horizontal';\n }\n\n //#endregion\n\n //#region Public attributes and properties\n\n /* Returns all of the stepper's steps. /\n public get steps(): readonly IgcStepComponent[] {\n return this._state.steps;\n }\n\n /\n The orientation of the stepper.\n \n @attr orientation\n * @default 'horizontal'\n /\n @property({ reflect: true })\n public orientation: StepperOrientation = 'horizontal';\n\n /\n The visual type of the steps.\n \n @attr step-type\n * @default 'full'\n /\n @property({ reflect: true, attribute: 'step-type' })\n public stepType: StepperStepType = 'full';\n\n /\n Whether the stepper is linear.\n \n @remarks\n * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.\n \n @attr linear\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n public linear = false;\n\n /\n Whether the content is displayed above the steps.\n \n @attr content-top\n * @default false\n /\n @property({ type: Boolean, reflect: true, attribute: 'content-top' })\n public contentTop = false;\n\n /\n The animation type when in vertical mode.\n \n @attr vertical-animation\n * @default 'grow'\n /\n @property({ attribute: 'vertical-animation' })\n public verticalAnimation: StepperVerticalAnimation = 'grow';\n\n /\n The animation type when in horizontal mode.\n \n @attr horizontal-animation\n * @default 'slide'\n /\n @property({ attribute: 'horizontal-animation' })\n public horizontalAnimation: HorizontalTransitionAnimation = 'slide';\n\n /\n The animation duration in either vertical or horizontal mode in milliseconds.\n \n @attr animation-duration\n * @default 320\n /\n @property({ type: Number, attribute: 'animation-duration' })\n public animationDuration = 320;\n\n /\n The position of the steps title.\n \n @remarks\n * When the stepper is horizontally orientated the title is positioned below the indicator.\n * When the stepper is vertically orientated the title is positioned on the right side of the indicator.\n \n @attr title-position\n * @default 'auto'\n /\n @property({ reflect: false, attribute: 'title-position' })\n public titlePosition: StepperTitlePosition = 'auto';\n\n //#endregion\n\n constructor() {\n super();\n\n addSafeEventListener(this, 'click', this._handleInteraction);\n\n addThemingController(this, {\n light: { bootstrap, fluent, indigo },\n dark: { bootstrap, fluent, indigo },\n });\n\n addKeybindings(this, {\n skip: this._skipKeyboard,\n })\n .set(arrowUp, this._handleArrowUp)\n .set(arrowDown, this._handleArrowDown)\n .set(arrowLeft, this._handleArrowLeft)\n .set(arrowRight, this._handleArrowRight)\n .set(homeKey, this._handleHomeKey)\n .set(endKey, this._handleEndKey)\n .setActivateHandler(this._handleInteraction);\n }\n\n //#region Lifecycle hooks\n\n protected override update(properties: PropertyValues<this>): void {\n this._syncStepperAttributes(properties);\n\n if (properties.has('orientation')) {\n this._internals.setARIA({ ariaOrientation: this.orientation });\n }\n\n if (properties.has('linear')) {\n this._state.setVisitedState(this.linear);\n }\n\n if (\n properties.has('horizontalAnimation') \|\|\n properties.has('animationDuration')\n ) {\n const duration =\n this.horizontalAnimation !== 'none' ? this.animationDuration : 0;\n\n this.style.setProperty('--animation-duration', `${duration}ms`);\n }\n\n super.update(properties);\n }\n\n //#endregion\n\n //#region Keyboard navigation handlers\n\n private _skipKeyboard(_: Element, event: KeyboardEvent): boolean {\n return !getElementFromPath('[data-step-header]', event);\n }\n\n private _handleHomeKey(): void {\n this._getStepHeader(first(this._state.accessibleSteps))?.focus();\n }\n\n private _handleEndKey(): void {\n this._getStepHeader(last(this._state.accessibleSteps))?.focus();\n }\n\n private _handleArrowDown(): void {\n if (!this._isHorizontal) {\n const step = this._getActiveStepComponent();\n\n if (step) {\n this._getStepHeader(this._getNextStep(step))?.focus();\n }\n }\n }\n\n private _handleArrowUp(): void {\n if (!this._isHorizontal) {\n const step = this._getActiveStepComponent();\n\n if (step) {\n this._getStepHeader(this._getPreviousStep(step))?.focus();\n }\n }\n }\n\n private _handleArrowLeft(): void {\n const step = this._getActiveStepComponent();\n\n if (step) {\n const next = isLTR(this)\n ? this._getPreviousStep(step)\n : this._getNextStep(step);\n\n this._getStepHeader(next)?.focus();\n }\n }\n\n private _handleArrowRight(): void {\n const step = this._getActiveStepComponent();\n\n if (step) {\n const next = isLTR(this)\n ? this._getNextStep(step)\n : this._getPreviousStep(step);\n\n this._getStepHeader(next)?.focus();\n }\n }\n\n //#endregion\n\n //#region Event handlers\n\n private _handleInteraction(event: Event): void {\n const step = getElementFromPath(IgcStepComponent.tagName, event);\n\n if (step && this._state.isAccessible(step)) {\n this._activateStep(step);\n }\n }\n\n private _handleSlotChange(): void {\n this._state.setSteps(\n this._slots.getAssignedElements('[default]', {\n selector: IgcStepComponent.tagName,\n })\n );\n\n this._state.stepsChanged();\n this.style.setProperty('--steps-count', this.steps.length.toString());\n }\n\n //#endregion\n\n //#region Internal methods\n\n private _syncStepperAttributes(properties: PropertyValues<this>): void {\n if (STEPPER_SYNC_PROPERTIES.some((p) => properties.has(p))) {\n this._contextProvider.updateObservers();\n }\n }\n\n private _animateSteps(\n nextStep: IgcStepComponent,\n currentStep: IgcStepComponent\n ): void {\n const steps = this._state.steps;\n\n if (steps.indexOf(nextStep) > steps.indexOf(currentStep)) {\n // Animate steps in ascending/next direction\n currentStep.toggleAnimation('out');\n nextStep.toggleAnimation('in');\n } else {\n // Animate steps in descending/previous direction\n currentStep.toggleAnimation('in', 'reverse');\n nextStep.toggleAnimation('out', 'reverse');\n }\n }\n\n private _emitChanging(args: IgcActiveStepChangingEventArgs): boolean {\n return this.emitEvent('igcActiveStepChanging', {\n detail: args,\n cancelable: true,\n });\n }\n\n private _emitChanged(args: IgcActiveStepChangedEventArgs): void {\n this.emitEvent('igcActiveStepChanged', {\n detail: args,\n });\n }\n\n private _activateStep(step: IgcStepComponent, shouldEmit = true): void {\n if (step === this._state.activeStep) {\n return;\n }\n\n if (!shouldEmit) {\n this._state.changeActiveStep(step);\n return;\n }\n\n const steps = this._state.steps;\n const activeIndex = steps.indexOf(this._state.activeStep!);\n const index = steps.indexOf(step);\n\n const args = { oldIndex: activeIndex, newIndex: index };\n\n if (!this._emitChanging(args)) {\n return;\n }\n\n if (this._state.activeStep) {\n this._animateSteps(step, this._state.activeStep);\n }\n\n this._state.changeActiveStep(step);\n this._emitChanged({ index });\n }\n\n private _moveToNextStep(next = true): void {\n const step = this._state.getAdjacentStep(next);\n\n if (step) {\n if (this._state.activeStep) {\n this._animateSteps(step, this._state.activeStep);\n }\n this._state.changeActiveStep(step);\n }\n }\n\n private _getNextStep(step: IgcStepComponent): IgcStepComponent {\n const steps = this._state.accessibleSteps;\n const next = wrap(0, steps.length - 1, steps.indexOf(step) + 1);\n\n return steps[next];\n }\n\n private _getPreviousStep(step: IgcStepComponent): IgcStepComponent {\n const steps = this._state.accessibleSteps;\n const previous = wrap(0, steps.length - 1, steps.indexOf(step) - 1);\n\n return steps[previous];\n }\n\n private _getActiveStepComponent(): IgcStepComponent \| null {\n const active = getRoot(this).activeElement;\n return active ? active.closest(IgcStepComponent.tagName) : null;\n }\n\n private _getStepHeader(step?: IgcStepComponent): HTMLElement \| null {\n return step?.renderRoot.querySelector('[data-step-header]') ?? null;\n }\n\n //#endregion\n\n //#region Public API\n\n /* Activates the step at a given index. /\n public navigateTo(index: number): void {\n const step = this._state.steps[index];\n\n if (step) {\n this._activateStep(step, false);\n }\n }\n\n /* Activates the next enabled step. /\n public next(): void {\n this._moveToNextStep();\n }\n\n /* Activates the previous enabled step. /\n public prev(): void {\n this._moveToNextStep(false);\n }\n\n /\n Resets the stepper to its initial state i.e. activates the first step.\n \n @remarks\n * The steps' content will not be automatically reset.\n */\n public reset(): void {\n this._state.reset();\n }\n\n //#endregion\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-stepper': IgcStepperComponent;\n }\n}\n"]}
1	+ {"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport {\n addKeybindings,\n arrowDown,\n arrowLeft,\n arrowRight,\n arrowUp,\n endKey,\n homeKey,\n} from '#internals/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { firstOf, lastOf } from '#internals/utils/arrays.js';\nimport { getRoot, isLTR } from '#internals/utils/dom.js';\nimport {\n addSafeEventListener,\n getElementFromPath,\n} from '#internals/utils/events.js';\nimport { wrap } from '#internals/utils/math.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type {\n HorizontalTransitionAnimation,\n StepperOrientation,\n StepperStepType,\n StepperTitlePosition,\n StepperVerticalAnimation,\n} from '../types.js';\nimport { STEPPER_CONTEXT } from './common/context.js';\nimport { createStepperState } from './common/state.js';\nimport type {\n IgcActiveStepChangedEventArgs,\n IgcActiveStepChangingEventArgs,\n IgcStepperComponentEventMap,\n} from './common/types.js';\nimport IgcStepComponent from './step.js';\nimport { styles } from './themes/stepper/stepper.base.css.js';\nimport { styles as bootstrap } from './themes/stepper/stepper.bootstrap.css.js';\nimport { styles as fluent } from './themes/stepper/stepper.fluent.css.js';\nimport { styles as indigo } from './themes/stepper/stepper.indigo.css.js';\n\nconst STEPPER_SYNC_PROPERTIES: (keyof IgcStepperComponent)[] = [\n 'orientation',\n 'stepType',\n 'contentTop',\n 'verticalAnimation',\n 'horizontalAnimation',\n 'animationDuration',\n 'titlePosition',\n];\n\n/*\n A stepper component that provides a wizard-like workflow by dividing content into logical steps.\n \n @remarks\n * The stepper component allows the user to navigate between multiple step children.\n * It supports horizontal and vertical orientation, linear and non-linear navigation,\n * keyboard navigation, and provides API methods to control the active step.\n \n In linear mode, the user can only advance to the next step if the current step is valid\n * (not marked as `invalid`).\n \n @element igc-stepper\n \n @slot - Renders the steps of the stepper inside the default slot.\n \n @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable.\n * @fires igcActiveStepChanged - Emitted after the active step has changed.\n \n @example\n * ```html\n * <igc-stepper>\n * <igc-step>\n * <span slot=\"title\">Step 1</span>\n * <p>Step 1 content</p>\n * </igc-step>\n * <igc-step>\n * <span slot=\"title\">Step 2</span>\n * <p>Step 2 content</p>\n * </igc-step>\n * </igc-stepper>\n * ```\n \n @example Linear stepper with vertical orientation\n * ```html\n * <igc-stepper orientation=\"vertical\" linear>\n * <igc-step complete>\n * <span slot=\"title\">Completed step</span>\n * <p>This step is already complete.</p>\n * </igc-step>\n * <igc-step active>\n * <span slot=\"title\">Current step</span>\n * <p>Fill in the details to proceed.</p>\n * </igc-step>\n * <igc-step>\n * <span slot=\"title\">Next step</span>\n * <p>Upcoming content.</p>\n * </igc-step>\n * </igc-stepper>\n * ```\n /\nexport default class IgcStepperComponent extends EventEmitterMixin<\n IgcStepperComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-stepper';\n public static styles = styles;\n\n / blazorSuppress /\n public static register(): void {\n registerComponent(IgcStepperComponent, IgcStepComponent);\n }\n\n //#region Internal state and properties\n\n private readonly _state = createStepperState();\n\n private readonly _contextProvider = new ContextProvider(this, {\n context: STEPPER_CONTEXT,\n initialValue: {\n stepper: this,\n state: this._state,\n },\n });\n\n private readonly _internals = addInternalsController(this, {\n initialARIA: {\n role: 'tablist',\n },\n });\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots(),\n onChange: this._handleSlotChange,\n });\n\n private get _isHorizontal(): boolean {\n return this.orientation === 'horizontal';\n }\n\n //#endregion\n\n //#region Public attributes and properties\n\n /* Returns all of the stepper's steps. /\n public get steps(): readonly IgcStepComponent[] {\n return this._state.steps;\n }\n\n /\n The orientation of the stepper.\n \n @attr orientation\n * @default 'horizontal'\n /\n @property({ reflect: true })\n public orientation: StepperOrientation = 'horizontal';\n\n /\n The visual type of the steps.\n \n @attr step-type\n * @default 'full'\n /\n @property({ reflect: true, attribute: 'step-type' })\n public stepType: StepperStepType = 'full';\n\n /\n Whether the stepper is linear.\n \n @remarks\n * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.\n \n @attr linear\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n public linear = false;\n\n /\n Whether the content is displayed above the steps.\n \n @attr content-top\n * @default false\n /\n @property({ type: Boolean, reflect: true, attribute: 'content-top' })\n public contentTop = false;\n\n /\n The animation type when in vertical mode.\n \n @attr vertical-animation\n * @default 'grow'\n /\n @property({ attribute: 'vertical-animation' })\n public verticalAnimation: StepperVerticalAnimation = 'grow';\n\n /\n The animation type when in horizontal mode.\n \n @attr horizontal-animation\n * @default 'slide'\n /\n @property({ attribute: 'horizontal-animation' })\n public horizontalAnimation: HorizontalTransitionAnimation = 'slide';\n\n /\n The animation duration in either vertical or horizontal mode in milliseconds.\n \n @attr animation-duration\n * @default 320\n /\n @property({ type: Number, attribute: 'animation-duration' })\n public animationDuration = 320;\n\n /\n The position of the steps title.\n \n @remarks\n * When the stepper is horizontally orientated the title is positioned below the indicator.\n * When the stepper is vertically orientated the title is positioned on the right side of the indicator.\n \n @attr title-position\n * @default 'auto'\n /\n @property({ reflect: false, attribute: 'title-position' })\n public titlePosition: StepperTitlePosition = 'auto';\n\n //#endregion\n\n constructor() {\n super();\n\n addSafeEventListener(this, 'click', this._handleInteraction);\n\n addThemingController(this, {\n light: { bootstrap, fluent, indigo },\n dark: { bootstrap, fluent, indigo },\n });\n\n addKeybindings(this, {\n skip: this._skipKeyboard,\n })\n .set(arrowUp, this._handleArrowUp)\n .set(arrowDown, this._handleArrowDown)\n .set(arrowLeft, this._handleArrowLeft)\n .set(arrowRight, this._handleArrowRight)\n .set(homeKey, this._handleHomeKey)\n .set(endKey, this._handleEndKey)\n .setActivateHandler(this._handleInteraction);\n }\n\n //#region Lifecycle hooks\n\n protected override update(properties: PropertyValues<this>): void {\n this._syncStepperAttributes(properties);\n\n if (properties.has('orientation')) {\n this._internals.setARIA({ ariaOrientation: this.orientation });\n }\n\n if (properties.has('linear')) {\n this._state.setVisitedState(this.linear);\n }\n\n if (\n properties.has('horizontalAnimation') \|\|\n properties.has('animationDuration')\n ) {\n const duration =\n this.horizontalAnimation !== 'none' ? this.animationDuration : 0;\n\n this.style.setProperty('--animation-duration', `${duration}ms`);\n }\n\n super.update(properties);\n }\n\n //#endregion\n\n //#region Keyboard navigation handlers\n\n private _skipKeyboard(_: Element, event: KeyboardEvent): boolean {\n return !getElementFromPath('[data-step-header]', event);\n }\n\n private _handleHomeKey(): void {\n this._getStepHeader(firstOf(this._state.accessibleSteps))?.focus();\n }\n\n private _handleEndKey(): void {\n this._getStepHeader(lastOf(this._state.accessibleSteps))?.focus();\n }\n\n private _handleArrowDown(): void {\n if (!this._isHorizontal) {\n const step = this._getActiveStepComponent();\n\n if (step) {\n this._getStepHeader(this._getNextStep(step))?.focus();\n }\n }\n }\n\n private _handleArrowUp(): void {\n if (!this._isHorizontal) {\n const step = this._getActiveStepComponent();\n\n if (step) {\n this._getStepHeader(this._getPreviousStep(step))?.focus();\n }\n }\n }\n\n private _handleArrowLeft(): void {\n const step = this._getActiveStepComponent();\n\n if (step) {\n const next = isLTR(this)\n ? this._getPreviousStep(step)\n : this._getNextStep(step);\n\n this._getStepHeader(next)?.focus();\n }\n }\n\n private _handleArrowRight(): void {\n const step = this._getActiveStepComponent();\n\n if (step) {\n const next = isLTR(this)\n ? this._getNextStep(step)\n : this._getPreviousStep(step);\n\n this._getStepHeader(next)?.focus();\n }\n }\n\n //#endregion\n\n //#region Event handlers\n\n private _handleInteraction(event: Event): void {\n const step = getElementFromPath(IgcStepComponent.tagName, event);\n\n if (step && this._state.isAccessible(step)) {\n this._activateStep(step);\n }\n }\n\n private _handleSlotChange(): void {\n this._state.setSteps(\n this._slots.getAssignedElements('[default]', {\n selector: IgcStepComponent.tagName,\n })\n );\n\n this._state.stepsChanged();\n this.style.setProperty('--steps-count', this.steps.length.toString());\n }\n\n //#endregion\n\n //#region Internal methods\n\n private _syncStepperAttributes(properties: PropertyValues<this>): void {\n if (STEPPER_SYNC_PROPERTIES.some((p) => properties.has(p))) {\n this._contextProvider.updateObservers();\n }\n }\n\n private _animateSteps(\n nextStep: IgcStepComponent,\n currentStep: IgcStepComponent\n ): void {\n const steps = this._state.steps;\n\n if (steps.indexOf(nextStep) > steps.indexOf(currentStep)) {\n // Animate steps in ascending/next direction\n currentStep.toggleAnimation('out');\n nextStep.toggleAnimation('in');\n } else {\n // Animate steps in descending/previous direction\n currentStep.toggleAnimation('in', 'reverse');\n nextStep.toggleAnimation('out', 'reverse');\n }\n }\n\n private _emitChanging(args: IgcActiveStepChangingEventArgs): boolean {\n return this.emitEvent('igcActiveStepChanging', {\n detail: args,\n cancelable: true,\n });\n }\n\n private _emitChanged(args: IgcActiveStepChangedEventArgs): void {\n this.emitEvent('igcActiveStepChanged', {\n detail: args,\n });\n }\n\n private _activateStep(step: IgcStepComponent, shouldEmit = true): void {\n if (step === this._state.activeStep) {\n return;\n }\n\n if (!shouldEmit) {\n this._state.changeActiveStep(step);\n return;\n }\n\n const steps = this._state.steps;\n const activeIndex = steps.indexOf(this._state.activeStep!);\n const index = steps.indexOf(step);\n\n const args = { oldIndex: activeIndex, newIndex: index };\n\n if (!this._emitChanging(args)) {\n return;\n }\n\n if (this._state.activeStep) {\n this._animateSteps(step, this._state.activeStep);\n }\n\n this._state.changeActiveStep(step);\n this._emitChanged({ index });\n }\n\n private _moveToNextStep(next = true): void {\n const step = this._state.getAdjacentStep(next);\n\n if (step) {\n if (this._state.activeStep) {\n this._animateSteps(step, this._state.activeStep);\n }\n this._state.changeActiveStep(step);\n }\n }\n\n private _getNextStep(step: IgcStepComponent): IgcStepComponent {\n const steps = this._state.accessibleSteps;\n const next = wrap(0, steps.length - 1, steps.indexOf(step) + 1);\n\n return steps[next];\n }\n\n private _getPreviousStep(step: IgcStepComponent): IgcStepComponent {\n const steps = this._state.accessibleSteps;\n const previous = wrap(0, steps.length - 1, steps.indexOf(step) - 1);\n\n return steps[previous];\n }\n\n private _getActiveStepComponent(): IgcStepComponent \| null {\n const active = getRoot(this).activeElement;\n return active ? active.closest(IgcStepComponent.tagName) : null;\n }\n\n private _getStepHeader(step?: IgcStepComponent): HTMLElement \| null {\n return step?.renderRoot.querySelector('[data-step-header]') ?? null;\n }\n\n //#endregion\n\n //#region Public API\n\n /* Activates the step at a given index. /\n public navigateTo(index: number): void {\n const step = this._state.steps[index];\n\n if (step) {\n this._activateStep(step, false);\n }\n }\n\n /* Activates the next enabled step. /\n public next(): void {\n this._moveToNextStep();\n }\n\n /* Activates the previous enabled step. /\n public prev(): void {\n this._moveToNextStep(false);\n }\n\n /\n Resets the stepper to its initial state, i.e. activates the first step.\n \n @remarks\n * The steps' content will not be automatically reset.\n */\n public reset(): void {\n this._state.reset();\n }\n\n //#endregion\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-stepper': IgcStepperComponent;\n }\n}\n"]}

package/components/stepper/themes/step/themes.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/stepper/themes/step/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/step/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '~~../../../../~~theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/step.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/step.fluent.css.js';\nimport { styles as indigoDark } from './dark/step.indigo.css.js';\nimport { styles as materialDark } from './dark/step.material.css.js';\nimport { styles as sharedDark } from './dark/step.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/step.bootstrap.css.js';\nimport { styles as fluentLight } from './light/step.fluent.css.js';\nimport { styles as indigoLight } from './light/step.indigo.css.js';\nimport { styles as materialLight } from './light/step.material.css.js';\nimport { styles as sharedLight } from './light/step.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/step.bootstrap.css.js';\nimport { styles as indigo } from './shared/step.indigo.css.js';\n\nconst light = {\n shared: css`\n ${sharedLight}\n `,\n bootstrap: css`\n ${bootstrap} ${bootstrapLight}\n `,\n material: css`\n ${materialLight}\n `,\n fluent: css`\n ${fluentLight}\n `,\n indigo: css`\n ${indigo} ${indigoLight}\n `,\n};\n\nconst dark = {\n shared: css`\n ${sharedDark}\n `,\n bootstrap: css`\n ${bootstrap} ${bootstrapDark}\n `,\n material: css`\n ${materialDark}\n `,\n fluent: css`\n ${fluentDark}\n `,\n indigo: css`\n ${indigo} ${indigoDark}\n `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
1	+ {"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/step/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/step.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/step.fluent.css.js';\nimport { styles as indigoDark } from './dark/step.indigo.css.js';\nimport { styles as materialDark } from './dark/step.material.css.js';\nimport { styles as sharedDark } from './dark/step.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/step.bootstrap.css.js';\nimport { styles as fluentLight } from './light/step.fluent.css.js';\nimport { styles as indigoLight } from './light/step.indigo.css.js';\nimport { styles as materialLight } from './light/step.material.css.js';\nimport { styles as sharedLight } from './light/step.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/step.bootstrap.css.js';\nimport { styles as indigo } from './shared/step.indigo.css.js';\n\nconst light = {\n shared: css`\n ${sharedLight}\n `,\n bootstrap: css`\n ${bootstrap} ${bootstrapLight}\n `,\n material: css`\n ${materialLight}\n `,\n fluent: css`\n ${fluentLight}\n `,\n indigo: css`\n ${indigo} ${indigoLight}\n `,\n};\n\nconst dark = {\n shared: css`\n ${sharedDark}\n `,\n bootstrap: css`\n ${bootstrap} ${bootstrapDark}\n `,\n material: css`\n ${materialDark}\n `,\n fluent: css`\n ${fluentDark}\n `,\n indigo: css`\n ${indigo} ${indigoDark}\n `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/tabs/tab-dom.d.ts CHANGED Viewed

@@ -1,8 +1,15 @@
 import type { Ref } from 'lit/directives/ref.js';
 import type IgcTabComponent from './tab.js';
 import type IgcTabsComponent from './tabs.js';
+type TabsStyleProperties = {
+    '--_tabs-count': string;
+    '--_ig-tabs-width': string;
+};
+type ScrollButtonsState = {
+    start: boolean;
+    end: boolean;
+};
 declare class TabsHelpers {
-    private static readonly SCROLL_AMOUNT;
     private readonly _host;
     private readonly _container;
     private readonly _indicator;
@@ -10,45 +17,40 @@ declare class TabsHelpers {
     private _hasScrollButtons;
     private _scrollButtonsDisabled;
     private _isLeftToRight;
-    /**
-     * Returns the DOM container holding the tabs headers.
-     */
+    /** The DOM container holding the tab headers. */
     get container(): HTMLElement | undefined;
-    /**
-     * Returns the selected indicator DOM element.
-     */
+    /** The selected tab indicator element. */
     get indicator(): HTMLElement | undefined;
-    /**
-     * Returns the internal CSS variables used for the layout of the tabs component.
-     */
-    get styleProperties(): {
-        '--_tabs-count': string;
-        '--_ig-tabs-width': string;
-    };
-    /**
-     * Whether the scroll buttons of the tabs header strip should be shown.
-     */
+    /** The internal CSS variables driving the layout of the tabs component. */
+    get styleProperties(): TabsStyleProperties;
+    /** Whether the header strip overflows and needs its scroll buttons. */
     get hasScrollButtons(): boolean;
-    /**
-     * Returns the disabled state of the tabs header strip scroll buttons.
-     */
-    get scrollButtonsDisabled(): {
-        start: boolean;
-        end: boolean;
-    };
-    get isLeftToRightChanged(): boolean;
+    /** The disabled state of the header strip scroll buttons. */
+    get scrollButtonsDisabled(): ScrollButtonsState;
     constructor(host: IgcTabsComponent, container: Ref<HTMLElement>, indicator: Ref<HTMLElement>);
     /**
      * Sets the internal CSS variables used for the layout of the tabs component.
-     * Triggers an update cycle (rerender) of the `igc-tabs` component.
+     * Triggers an update cycle (rerender) of the `igc-tabs` component if needed.
      */
     setStyleProperties(): void;
+    checkAndUpdateDirection(): boolean;
     /**
      * Sets the type of the `scroll-snap-align` CSS property for the tabs header strip.
      */
     setScrollSnap(type?: 'start' | 'end'): void;
     /**
-     * Scrolls the tabs header strip in the given direction with `scroll-snap-align` set.
+     * The horizontal bounds of the strip that are not covered by the sticky scroll
+     * buttons, which is the area a tab has to fit in to count as being in view.
+     */
+    private _getVisibleBounds;
+    /**
+     * The distance needed to bring the closest tab that is not fully in view for the
+     * given direction inside the visible bounds, or `0` when every tab is in view.
+     */
+    private _getScrollOffset;
+    /**
+     * Scrolls the tabs header strip to the closest tab that is out of view in the given
+     * direction, with `scroll-snap-align` set.
      */
     scrollTabs(direction: 'start' | 'end'): void;
     /**
@@ -62,5 +64,6 @@ declare class TabsHelpers {
     setIndicator(active?: IgcTabComponent): Promise<void>;
 }
 export declare function createTabHelpers(host: IgcTabsComponent, container: Ref<HTMLElement>, indicator: Ref<HTMLElement>): TabsHelpers;
-export declare function getTabHeader(tab: IgcTabComponent): HTMLElement;
+/** Returns the header element of the given tab, or `null` if it has not rendered yet. */
+export declare function getTabHeader(tab: IgcTabComponent): HTMLElement | null;
 export {};

package/components/tabs/tab-dom.js CHANGED Viewed

@@ -1,6 +1,7 @@
-import { getScaleFactor, isLTR, setStyles } from '../common/util.js';
+import { getScaleFactor, isLTR, setStyles } from '#internals/utils/dom.js';
+import { asNumber } from '#internals/utils/math.js';
+const EDGE_TOLERANCE = 1;
 class TabsHelpers {
-    static { this.SCROLL_AMOUNT = 180; }
     get container() {
         return this._container.value;
     }
@@ -16,76 +17,125 @@ class TabsHelpers {
     get scrollButtonsDisabled() {
         return this._scrollButtonsDisabled;
     }
-    get isLeftToRightChanged() {
-        const isLeftToRight = isLTR(this._host);
-        if (this._isLeftToRight !== isLeftToRight) {
-            this._isLeftToRight = isLeftToRight;
-            return true;
-        }
-        return false;
-    }
     constructor(host, container, indicator) {
         this._styleProperties = {
             '--_tabs-count': '',
             '--_ig-tabs-width': '',
         };
         this._hasScrollButtons = false;
-        this._scrollButtonsDisabled = { start: true, end: false };
+        this._scrollButtonsDisabled = {
+            start: true,
+            end: false,
+        };
         this._isLeftToRight = false;
         this._host = host;
         this._container = container;
         this._indicator = indicator;
     }
     setStyleProperties() {
+        const count = String(this._host.tabs.length);
+        const width = this.container
+            ? `${this.container.getBoundingClientRect().width}px`
+            : '';
+        const current = this._styleProperties;
+        if (current['--_tabs-count'] === count &&
+            current['--_ig-tabs-width'] === width) {
+            return;
+        }
         this._styleProperties = {
-            '--_tabs-count': this._host.tabs.length.toString(),
-            '--_ig-tabs-width': this.container
-                ? `${this.container.getBoundingClientRect().width}px`
-                : '',
+            '--_tabs-count': count,
+            '--_ig-tabs-width': width,
         };
         this._host.requestUpdate();
     }
+    checkAndUpdateDirection() {
+        const isLeftToRight = isLTR(this._host);
+        if (this._isLeftToRight !== isLeftToRight) {
+            this._isLeftToRight = isLeftToRight;
+            return true;
+        }
+        return false;
+    }
     setScrollSnap(type) {
         if (this.container) {
             this.container.style.setProperty('--_ig-tab-snap', type || 'unset');
         }
     }
+    _getVisibleBounds(container) {
+        const { scrollPaddingInlineStart, scrollPaddingInlineEnd } = getComputedStyle(container);
+        const { left, right } = container.getBoundingClientRect();
+        const start = asNumber(scrollPaddingInlineStart);
+        const end = asNumber(scrollPaddingInlineEnd);
+        return isLTR(this._host)
+            ? { min: left + start, max: right - end }
+            : { min: left + end, max: right - start };
+    }
+    _getScrollOffset(container, direction) {
+        const isEnd = direction === 'end';
+        const { min, max } = this._getVisibleBounds(container);
+        const useRightEdge = isEnd === isLTR(this._host);
+        const isOutOfView = (header) => {
+            const { left, right } = header.getBoundingClientRect();
+            return useRightEdge
+                ? right > max + EDGE_TOLERANCE
+                : left < min - EDGE_TOLERANCE;
+        };
+        const headers = this._host.tabs
+            .map((tab) => getTabHeader(tab))
+            .filter((header) => header !== null);
+        const target = isEnd
+            ? headers.find(isOutOfView)
+            : headers.findLast(isOutOfView);
+        if (!target) {
+            return 0;
+        }
+        const { left, right } = target.getBoundingClientRect();
+        return useRightEdge ? right - max : left - min;
+    }
     scrollTabs(direction) {
-        if (!this.container) {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const offset = this._getScrollOffset(container, direction);
+        if (!offset) {
             return;
         }
-        const factor = isLTR(this._host) ? 1 : -1;
-        const amount = direction === 'start'
-            ? -TabsHelpers.SCROLL_AMOUNT
-            : TabsHelpers.SCROLL_AMOUNT;
         this.setScrollSnap(direction);
-        this.container.scrollBy({ left: factor * amount, behavior: 'smooth' });
+        container.scrollBy({ left: offset, behavior: 'smooth' });
     }
     setScrollButtonState() {
         if (!this.container) {
             return;
         }
         const { scrollLeft, scrollWidth, clientWidth } = this.container;
-        this._hasScrollButtons = scrollWidth > clientWidth;
-        this._scrollButtonsDisabled = {
-            start: scrollLeft === 0,
-            end: Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1,
-        };
+        const disabled = this._scrollButtonsDisabled;
+        const hasScrollButtons = scrollWidth > clientWidth;
+        const start = Math.abs(scrollLeft) <= 1;
+        const end = Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1;
+        if (this._hasScrollButtons === hasScrollButtons &&
+            disabled.start === start &&
+            disabled.end === end) {
+            return;
+        }
+        this._hasScrollButtons = hasScrollButtons;
+        this._scrollButtonsDisabled = { start, end };
         this._host.requestUpdate();
     }
     async setIndicator(active) {
-        if (!(this.container && this.indicator)) {
+        await this._host.updateComplete;
+        const { container, indicator } = this;
+        if (!(container && indicator)) {
             return;
         }
+        const header = active ? getTabHeader(active) : null;
         const styles = {
-            visibility: active ? 'visible' : 'hidden',
+            visibility: header ? 'visible' : 'hidden',
         };
-        await this._host.updateComplete;
-        if (active) {
-            const header = getTabHeader(active);
-            const { offsetLeft: containerLeft, offsetWidth: containerWidth } = this.container;
+        if (header) {
+            const { offsetLeft: containerLeft, offsetWidth: containerWidth } = container;
             const scaledWidth = header.getBoundingClientRect().width * getScaleFactor(header).x;
-            const offset = this._isLeftToRight
+            const offset = isLTR(this._host)
                 ? header.offsetLeft - containerLeft
                 : header.offsetLeft + scaledWidth - containerWidth;
             Object.assign(styles, {
@@ -93,7 +143,7 @@ class TabsHelpers {
                 transform: `translateX(${offset}px)`,
             });
         }
-        setStyles(this.indicator, styles);
+        setStyles(indicator, styles);
     }
 }
 export function createTabHelpers(host, container, indicator) {

package/components/tabs/tab-dom.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-dom.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-dom.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Ref } from 'lit/directives/ref.js';\nimport { getScaleFactor, isLTR, setStyles } from '../common/util.js';\nimport type IgcTabComponent from './tab.js';\nimport type IgcTabsComponent from './tabs.js';\n\nclass TabsHelpers {\n private static readonly SCROLL_AMOUNT = 180;\n private readonly _host: IgcTabsComponent;\n private readonly _container: Ref<HTMLElement>;\n private readonly _indicator: Ref<HTMLElement>;\n\n private _styleProperties = {\n '--_tabs-count': '',\n '--_ig-tabs-width': '',\n };\n\n private _hasScrollButtons = false;\n private _scrollButtonsDisabled = { start: true, end: false };\n\n private _isLeftToRight = false;\n\n /*\n Returns the DOM container holding the tabs headers.\n /\n public get container(): HTMLElement \| undefined {\n return this._container.value;\n }\n\n /\n Returns the selected indicator DOM element.\n /\n public get indicator(): HTMLElement \| undefined {\n return this._indicator.value;\n }\n\n /\n Returns the internal CSS variables used for the layout of the tabs component.\n /\n public get styleProperties() {\n return this._styleProperties;\n }\n\n /\n Whether the scroll buttons of the tabs header strip should be shown.\n /\n public get hasScrollButtons(): boolean {\n return this._hasScrollButtons;\n }\n\n /\n Returns the disabled state of the tabs header strip scroll buttons.\n /\n public get scrollButtonsDisabled() {\n return this._scrollButtonsDisabled;\n }\n\n public get isLeftToRightChanged(): boolean {\n const isLeftToRight = isLTR(this._host);\n\n if (this._isLeftToRight !== isLeftToRight) {\n this._isLeftToRight = isLeftToRight;\n return true;\n }\n\n return false;\n }\n\n constructor(\n host: IgcTabsComponent,\n container: Ref<HTMLElement>,\n indicator: Ref<HTMLElement>\n ) {\n this._host = host;\n this._container = container;\n this._indicator = indicator;\n }\n\n /\n Sets the internal CSS variables used for the layout of the tabs component.\n * Triggers an update cycle (rerender) of the `igc-tabs` component.\n /\n public setStyleProperties(): void {\n this._styleProperties = {\n '--_tabs-count': this._host.tabs.length.toString(),\n '--_ig-tabs-width': this.container\n ? `${this.container.getBoundingClientRect().width}px`\n : '',\n };\n this._host.requestUpdate();\n }\n\n /\n Sets the type of the `scroll-snap-align` CSS property for the tabs header strip.\n /\n public setScrollSnap(type?: 'start' \| 'end'): void {\n if (this.container) {\n this.container.style.setProperty('--_ig-tab-snap', type \|\| 'unset');\n }\n }\n\n /\n Scrolls the tabs header strip in the given direction with `scroll-snap-align` set.\n /\n public scrollTabs(direction: 'start' \| 'end'): void {\n if (!this.container) {\n return;\n }\n\n const factor = isLTR(this._host) ? 1 : -1;\n const amount =\n direction === 'start'\n ? -TabsHelpers.SCROLL_AMOUNT\n : TabsHelpers.SCROLL_AMOUNT;\n\n this.setScrollSnap(direction);\n this.container.scrollBy({ left: factor amount, behavior: 'smooth' });\n }\n\n /*\n Updates the state of the tabs header strip scroll buttons - visibility and active state.\n * Triggers an update cycle (rerender) of the `igc-tabs` component.\n /\n public setScrollButtonState(): void {\n if (!this.container) {\n return;\n }\n\n const { scrollLeft, scrollWidth, clientWidth } = this.container;\n\n this._hasScrollButtons = scrollWidth > clientWidth;\n this._scrollButtonsDisabled = {\n start: scrollLeft === 0,\n end: Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1,\n };\n\n this._host.requestUpdate();\n }\n\n /\n Updates the indicator DOM element styles based on the current \"active\" tab.\n /\n public async setIndicator(active?: IgcTabComponent): Promise<void> {\n if (!(this.container && this.indicator)) {\n return;\n }\n\n const styles = {\n visibility: active ? 'visible' : 'hidden',\n } satisfies Partial<CSSStyleDeclaration>;\n\n await this._host.updateComplete;\n\n if (active) {\n const header = getTabHeader(active);\n const { offsetLeft: containerLeft, offsetWidth: containerWidth } =\n this.container;\n const scaledWidth =\n header.getBoundingClientRect().width getScaleFactor(header).x;\n\n const offset = this._isLeftToRight\n ? header.offsetLeft - containerLeft\n : header.offsetLeft + scaledWidth - containerWidth;\n\n Object.assign(styles, {\n width: `${scaledWidth}px`,\n transform: `translateX(${offset}px)`,\n });\n }\n\n setStyles(this.indicator, styles);\n }\n}\n\nexport function createTabHelpers(\n host: IgcTabsComponent,\n container: Ref<HTMLElement>,\n indicator: Ref<HTMLElement>\n) {\n return new TabsHelpers(host, container, indicator);\n}\n\nexport function getTabHeader(tab: IgcTabComponent): HTMLElement {\n return tab.renderRoot.querySelector('[part~=\"tab-header\"]')!;\n}\n"]}
1	+ {"version":3,"file":"tab-dom.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-dom.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Ref } from 'lit/directives/ref.js';\nimport { getScaleFactor, isLTR, setStyles } from '#internals/utils/dom.js';\nimport { asNumber } from '#internals/utils/math.js';\nimport type IgcTabComponent from './tab.js';\nimport type IgcTabsComponent from './tabs.js';\n\n/** Tolerance for treating a tab edge as aligned with the visible region. /\nconst EDGE_TOLERANCE = 1;\n\ntype TabsStyleProperties = {\n '--_tabs-count': string;\n '--_ig-tabs-width': string;\n};\n\ntype ScrollButtonsState = {\n start: boolean;\n end: boolean;\n};\n\nclass TabsHelpers {\n private readonly _host: IgcTabsComponent;\n private readonly _container: Ref<HTMLElement>;\n private readonly _indicator: Ref<HTMLElement>;\n\n private _styleProperties: TabsStyleProperties = {\n '--_tabs-count': '',\n '--_ig-tabs-width': '',\n };\n\n private _hasScrollButtons = false;\n private _scrollButtonsDisabled: ScrollButtonsState = {\n start: true,\n end: false,\n };\n\n private _isLeftToRight = false;\n\n /* The DOM container holding the tab headers. /\n public get container(): HTMLElement \| undefined {\n return this._container.value;\n }\n\n /* The selected tab indicator element. /\n public get indicator(): HTMLElement \| undefined {\n return this._indicator.value;\n }\n\n /* The internal CSS variables driving the layout of the tabs component. /\n public get styleProperties(): TabsStyleProperties {\n return this._styleProperties;\n }\n\n /* Whether the header strip overflows and needs its scroll buttons. /\n public get hasScrollButtons(): boolean {\n return this._hasScrollButtons;\n }\n\n /* The disabled state of the header strip scroll buttons. /\n public get scrollButtonsDisabled(): ScrollButtonsState {\n return this._scrollButtonsDisabled;\n }\n\n constructor(\n host: IgcTabsComponent,\n container: Ref<HTMLElement>,\n indicator: Ref<HTMLElement>\n ) {\n this._host = host;\n this._container = container;\n this._indicator = indicator;\n }\n\n /\n Sets the internal CSS variables used for the layout of the tabs component.\n * Triggers an update cycle (rerender) of the `igc-tabs` component if needed.\n /\n public setStyleProperties(): void {\n const count = String(this._host.tabs.length);\n const width = this.container\n ? `${this.container.getBoundingClientRect().width}px`\n : '';\n const current = this._styleProperties;\n\n if (\n current['--_tabs-count'] === count &&\n current['--_ig-tabs-width'] === width\n ) {\n return;\n }\n\n this._styleProperties = {\n '--_tabs-count': count,\n '--_ig-tabs-width': width,\n };\n this._host.requestUpdate();\n }\n\n public checkAndUpdateDirection(): boolean {\n const isLeftToRight = isLTR(this._host);\n\n if (this._isLeftToRight !== isLeftToRight) {\n this._isLeftToRight = isLeftToRight;\n return true;\n }\n\n return false;\n }\n\n /\n Sets the type of the `scroll-snap-align` CSS property for the tabs header strip.\n /\n public setScrollSnap(type?: 'start' \| 'end'): void {\n if (this.container) {\n this.container.style.setProperty('--_ig-tab-snap', type \|\| 'unset');\n }\n }\n\n /\n The horizontal bounds of the strip that are not covered by the sticky scroll\n * buttons, which is the area a tab has to fit in to count as being in view.\n /\n private _getVisibleBounds(container: HTMLElement): {\n min: number;\n max: number;\n } {\n const { scrollPaddingInlineStart, scrollPaddingInlineEnd } =\n getComputedStyle(container);\n const { left, right } = container.getBoundingClientRect();\n\n const start = asNumber(scrollPaddingInlineStart);\n const end = asNumber(scrollPaddingInlineEnd);\n\n return isLTR(this._host)\n ? { min: left + start, max: right - end }\n : { min: left + end, max: right - start };\n }\n\n /\n The distance needed to bring the closest tab that is not fully in view for the\n * given direction inside the visible bounds, or `0` when every tab is in view.\n /\n private _getScrollOffset(\n container: HTMLElement,\n direction: 'start' \| 'end'\n ): number {\n const isEnd = direction === 'end';\n const { min, max } = this._getVisibleBounds(container);\n\n // Which edge a tab overflows depends on the scroll direction and the text\n // direction alike - scrolling towards the end moves leftwards in RTL.\n const useRightEdge = isEnd === isLTR(this._host);\n\n const isOutOfView = (header: HTMLElement): boolean => {\n const { left, right } = header.getBoundingClientRect();\n return useRightEdge\n ? right > max + EDGE_TOLERANCE\n : left < min - EDGE_TOLERANCE;\n };\n\n const headers = this._host.tabs\n .map((tab) => getTabHeader(tab))\n .filter((header): header is HTMLElement => header !== null);\n\n // Tabs are in document order, so the first match going forward and the last one\n // going backwards are the ones closest to the visible region.\n const target = isEnd\n ? headers.find(isOutOfView)\n : headers.findLast(isOutOfView);\n\n if (!target) {\n return 0;\n }\n\n const { left, right } = target.getBoundingClientRect();\n return useRightEdge ? right - max : left - min;\n }\n\n /\n Scrolls the tabs header strip to the closest tab that is out of view in the given\n * direction, with `scroll-snap-align` set.\n /\n public scrollTabs(direction: 'start' \| 'end'): void {\n const container = this.container;\n\n if (!container) {\n return;\n }\n\n const offset = this._getScrollOffset(container, direction);\n\n if (!offset) {\n return;\n }\n\n this.setScrollSnap(direction);\n container.scrollBy({ left: offset, behavior: 'smooth' });\n }\n\n /\n Updates the state of the tabs header strip scroll buttons - visibility and active state.\n * Triggers an update cycle (rerender) of the `igc-tabs` component.\n /\n public setScrollButtonState(): void {\n if (!this.container) {\n return;\n }\n\n const { scrollLeft, scrollWidth, clientWidth } = this.container;\n const disabled = this._scrollButtonsDisabled;\n\n const hasScrollButtons = scrollWidth > clientWidth;\n const start = Math.abs(scrollLeft) <= 1;\n const end = Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1;\n\n if (\n this._hasScrollButtons === hasScrollButtons &&\n disabled.start === start &&\n disabled.end === end\n ) {\n return;\n }\n\n this._hasScrollButtons = hasScrollButtons;\n this._scrollButtonsDisabled = { start, end };\n\n this._host.requestUpdate();\n }\n\n /\n Updates the indicator DOM element styles based on the current \"active\" tab.\n /\n public async setIndicator(active?: IgcTabComponent): Promise<void> {\n await this._host.updateComplete;\n\n const { container, indicator } = this;\n\n if (!(container && indicator)) {\n return;\n }\n\n const header = active ? getTabHeader(active) : null;\n\n const styles = {\n visibility: header ? 'visible' : 'hidden',\n } satisfies Partial<CSSStyleDeclaration>;\n\n if (header) {\n const { offsetLeft: containerLeft, offsetWidth: containerWidth } =\n container;\n const scaledWidth =\n header.getBoundingClientRect().width getScaleFactor(header).x;\n\n const offset = isLTR(this._host)\n ? header.offsetLeft - containerLeft\n : header.offsetLeft + scaledWidth - containerWidth;\n\n Object.assign(styles, {\n width: `${scaledWidth}px`,\n transform: `translateX(${offset}px)`,\n });\n }\n\n setStyles(indicator, styles);\n }\n}\n\nexport function createTabHelpers(\n host: IgcTabsComponent,\n container: Ref<HTMLElement>,\n indicator: Ref<HTMLElement>\n): TabsHelpers {\n return new TabsHelpers(host, container, indicator);\n}\n\n/** Returns the header element of the given tab, or `null` if it has not rendered yet. */\nexport function getTabHeader(tab: IgcTabComponent): HTMLElement \| null {\n return tab.renderRoot.querySelector('[part~=\"tab-header\"]');\n}\n"]}

package/components/tabs/tab.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * A tab element slotted into an `igc-tabs` container.
+ * A tab nested in a tabs component.
  *
  * @element igc-tab
  *
@@ -19,25 +19,43 @@ export default class IgcTabComponent extends LitElement {
     static readonly tagName = "igc-tab";
     static styles: import("lit").CSSResult[];
     static register(): void;
+    private readonly _instanceId;
+    private readonly _headerId;
+    private readonly _contentId;
+    private _posInSet;
+    private _setSize;
+    private _isTabStop;
     /**
      * The tab item label.
-     * @attr
+     * @attr label
      */
     label: string;
     /**
      * Determines whether the tab is selected.
-     * @attr
+     *
+     * @attr selected
+     * @default false
      */
     selected: boolean;
     /**
      * Determines whether the tab is disabled.
-     * @attr
+     *
+     * @attr disabled
+     * @default false
      */
     disabled: boolean;
     constructor();
     /** @internal */
     connectedCallback(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * @hidden @internal
+     * Applied by the parent `igc-tabs` whenever the tab set or the selection changes.
+     *
+     * `isTabStop` drives the roving tabindex, keeping the tab strip reachable even
+     * when no tab is selected.
+     */
+    _setTabState(posInSet: number, setSize: number, isTabStop: boolean): void;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {