@digital-realty/ix-tabs 0.0.10 → 0.0.12
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.
|
@@ -11,7 +11,6 @@ import '@material/web/ripple/ripple.js';
|
|
|
11
11
|
import { html, isServer, LitElement, nothing } from 'lit';
|
|
12
12
|
import { property, query, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
|
|
13
13
|
import { classMap } from 'lit/directives/class-map.js';
|
|
14
|
-
import { polyfillElementInternalsAria, setupHostAria, } from '@material/web/internal/aria/aria.js';
|
|
15
14
|
import { EASING } from '@material/web/internal/motion/animation.js';
|
|
16
15
|
/**
|
|
17
16
|
* Symbol for tabs to use to animate their indicators based off another tab's
|
|
@@ -61,8 +60,8 @@ export class Tab extends LitElement {
|
|
|
61
60
|
*/
|
|
62
61
|
this.iconOnly = false;
|
|
63
62
|
this.fullWidthIndicator = true;
|
|
64
|
-
this.internals =
|
|
65
|
-
.attachInternals()
|
|
63
|
+
this.internals = this /* needed for closure */
|
|
64
|
+
.attachInternals();
|
|
66
65
|
if (!isServer) {
|
|
67
66
|
this.internals.role = 'tab';
|
|
68
67
|
this.addEventListener('keydown', this.handleKeydown.bind(this));
|
|
@@ -177,9 +176,6 @@ export class Tab extends LitElement {
|
|
|
177
176
|
this.hasIcon = this.assignedIcons.length > 0;
|
|
178
177
|
}
|
|
179
178
|
}
|
|
180
|
-
(() => {
|
|
181
|
-
setupHostAria(Tab);
|
|
182
|
-
})();
|
|
183
179
|
__decorate([
|
|
184
180
|
property({ type: Boolean, reflect: true, attribute: 'md-tab' })
|
|
185
181
|
], Tab.prototype, "isTab", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/mdtabs/internal/tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/elevation/elevation.js';\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/ripple/ripple.js';\n\nimport { html, isServer, LitElement, nothing } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n queryAssignedNodes,\n state,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport {\n polyfillElementInternalsAria,\n setupHostAria,\n} from '@material/web/internal/aria/aria.js';\nimport { EASING } from '@material/web/internal/motion/animation.js';\n\ninterface Keyframe {}\n\n/**\n * Symbol for tabs to use to animate their indicators based off another tab's\n * indicator.\n */\nconst INDICATOR = Symbol('indicator');\n\n/**\n * Symbol used by the tab bar to request a tab to animate its indicator from a\n * previously selected tab.\n */\nexport const ANIMATE_INDICATOR = Symbol('animateIndicator');\n\nfunction shouldReduceMotion() {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Tab component.\n */\nexport class Tab extends LitElement {\n static {\n setupHostAria(Tab);\n }\n\n /**\n * The attribute `md-tab` indicates that the element is a tab for the parent\n * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`\n * component that you have an `md-tab` attribute set.\n */\n @property({ type: Boolean, reflect: true, attribute: 'md-tab' })\n readonly isTab = true;\n\n /**\n * Whether or not the tab is selected.\n */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /**\n * TODO(b/293476210): remove after migrating\n * @deprecated use `active`\n */\n @property({ type: Boolean })\n get selected() {\n return this.active;\n }\n\n set selected(active: boolean) {\n this.active = active;\n }\n\n /**\n * In SSR, set this to true when an icon is present.\n */\n @property({ type: Boolean, attribute: 'has-icon' }) hasIcon = false;\n\n /**\n * In SSR, set this to true when there is no label and only an icon.\n */\n @property({ type: Boolean, attribute: 'icon-only' }) iconOnly = false;\n\n @query('.indicator') readonly [INDICATOR]!: HTMLElement | null;\n\n @state() protected fullWidthIndicator = true;\n\n @queryAssignedNodes({ flatten: true })\n private readonly assignedDefaultNodes!: Node[];\n\n @queryAssignedElements({ slot: 'icon', flatten: true })\n private readonly assignedIcons!: HTMLElement[];\n\n private readonly internals = polyfillElementInternalsAria(\n this,\n (this as HTMLElement) /* needed for closure */\n .attachInternals()\n );\n\n constructor() {\n super();\n if (!isServer) {\n this.internals.role = 'tab';\n this.addEventListener('keydown', this.handleKeydown.bind(this));\n }\n }\n\n protected override render() {\n const indicator = html`<div class=\"indicator\"></div>`;\n return html` <div\n class=\"button\"\n role=\"presentation\"\n @click=${this.handleContentClick}\n >\n <md-focus-ring part=\"focus-ring\" inward .control=${this}></md-focus-ring>\n <md-elevation></md-elevation>\n <md-ripple .control=${this}></md-ripple>\n <div\n class=\"content ${classMap(this.getContentClasses())}\"\n role=\"presentation\"\n >\n <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n <slot @slotchange=${this.handleSlotChange}></slot>\n ${this.fullWidthIndicator ? nothing : indicator}\n </div>\n ${this.fullWidthIndicator ? indicator : nothing}\n </div>`;\n }\n\n protected getContentClasses() {\n return {\n 'has-icon': this.hasIcon,\n 'has-label': !this.iconOnly,\n };\n }\n\n protected override updated() {\n this.internals.ariaSelected = String(this.active);\n }\n\n private async handleKeydown(event: KeyboardEvent) {\n // Allow event to bubble.\n await 0;\n if (event.defaultPrevented) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n // Prevent default behavior such as scrolling when pressing spacebar.\n event.preventDefault();\n this.click();\n }\n }\n\n private handleContentClick(event: Event) {\n // Ensure the \"click\" target is always the tab, and not content, by stopping\n // propagation of content clicks and re-clicking the host.\n event.stopPropagation();\n this.click();\n }\n\n [ANIMATE_INDICATOR](previousTab: Tab) {\n if (!this[INDICATOR]) {\n return;\n }\n\n this[INDICATOR].getAnimations().forEach(a => {\n a.cancel();\n });\n\n const previousTabInner = previousTab?.shadowRoot?.querySelector('*') as Tab;\n const frames = this.getKeyframes(previousTabInner);\n\n if (frames !== null) {\n this[INDICATOR].animate(frames, {\n duration: 250,\n easing: EASING.EMPHASIZED,\n });\n }\n }\n\n private getKeyframes(previousTab: Tab) {\n const reduceMotion = shouldReduceMotion();\n if (!this.active) {\n return reduceMotion ? [{ opacity: 1 }, { transform: 'none' }] : null;\n }\n\n const from: Keyframe | any = {};\n const fromRect =\n previousTab[INDICATOR]?.getBoundingClientRect() ?? ({} as DOMRect);\n const fromPos = fromRect.left;\n const fromExtent = fromRect.width;\n const toRect = this[INDICATOR]!.getBoundingClientRect();\n const toPos = toRect.left;\n const toExtent = toRect.width;\n const scale = fromExtent / toExtent;\n if (\n !reduceMotion &&\n fromPos !== undefined &&\n toPos !== undefined &&\n Number(scale)\n ) {\n from.transform = `translateX(${(fromPos - toPos).toFixed(\n 4\n )}px) scaleX(${scale.toFixed(4)})`;\n } else {\n from.opacity = 0;\n }\n // note, including `transform: none` avoids quirky Safari behavior\n // that can hide the animation.\n return [from, { transform: 'none' }];\n }\n\n private handleSlotChange() {\n this.iconOnly = false;\n // Check if there's any label text or elements. If not, then there is only\n // an icon.\n for (const node of this.assignedDefaultNodes) {\n const hasTextContent =\n node.nodeType === Node.TEXT_NODE &&\n !!(node as Text).wholeText.match(/\\S/);\n if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {\n return;\n }\n }\n\n this.iconOnly = true;\n }\n\n private handleIconSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/mdtabs/internal/tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/elevation/elevation.js';\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/ripple/ripple.js';\n\nimport { html, isServer, LitElement, nothing } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n queryAssignedNodes,\n state,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { EASING } from '@material/web/internal/motion/animation.js';\n\ninterface Keyframe {}\n\n/**\n * Symbol for tabs to use to animate their indicators based off another tab's\n * indicator.\n */\nconst INDICATOR = Symbol('indicator');\n\n/**\n * Symbol used by the tab bar to request a tab to animate its indicator from a\n * previously selected tab.\n */\nexport const ANIMATE_INDICATOR = Symbol('animateIndicator');\n\nfunction shouldReduceMotion() {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Tab component.\n */\nexport class Tab extends LitElement {\n /**\n * The attribute `md-tab` indicates that the element is a tab for the parent\n * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`\n * component that you have an `md-tab` attribute set.\n */\n @property({ type: Boolean, reflect: true, attribute: 'md-tab' })\n readonly isTab = true;\n\n /**\n * Whether or not the tab is selected.\n */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /**\n * TODO(b/293476210): remove after migrating\n * @deprecated use `active`\n */\n @property({ type: Boolean })\n get selected() {\n return this.active;\n }\n\n set selected(active: boolean) {\n this.active = active;\n }\n\n /**\n * In SSR, set this to true when an icon is present.\n */\n @property({ type: Boolean, attribute: 'has-icon' }) hasIcon = false;\n\n /**\n * In SSR, set this to true when there is no label and only an icon.\n */\n @property({ type: Boolean, attribute: 'icon-only' }) iconOnly = false;\n\n @query('.indicator') readonly [INDICATOR]!: HTMLElement | null;\n\n @state() protected fullWidthIndicator = true;\n\n @queryAssignedNodes({ flatten: true })\n private readonly assignedDefaultNodes!: Node[];\n\n @queryAssignedElements({ slot: 'icon', flatten: true })\n private readonly assignedIcons!: HTMLElement[];\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n constructor() {\n super();\n if (!isServer) {\n this.internals.role = 'tab';\n this.addEventListener('keydown', this.handleKeydown.bind(this));\n }\n }\n\n protected override render() {\n const indicator = html`<div class=\"indicator\"></div>`;\n return html` <div\n class=\"button\"\n role=\"presentation\"\n @click=${this.handleContentClick}\n >\n <md-focus-ring part=\"focus-ring\" inward .control=${this}></md-focus-ring>\n <md-elevation></md-elevation>\n <md-ripple .control=${this}></md-ripple>\n <div\n class=\"content ${classMap(this.getContentClasses())}\"\n role=\"presentation\"\n >\n <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n <slot @slotchange=${this.handleSlotChange}></slot>\n ${this.fullWidthIndicator ? nothing : indicator}\n </div>\n ${this.fullWidthIndicator ? indicator : nothing}\n </div>`;\n }\n\n protected getContentClasses() {\n return {\n 'has-icon': this.hasIcon,\n 'has-label': !this.iconOnly,\n };\n }\n\n protected override updated() {\n this.internals.ariaSelected = String(this.active);\n }\n\n private async handleKeydown(event: KeyboardEvent) {\n // Allow event to bubble.\n await 0;\n if (event.defaultPrevented) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n // Prevent default behavior such as scrolling when pressing spacebar.\n event.preventDefault();\n this.click();\n }\n }\n\n private handleContentClick(event: Event) {\n // Ensure the \"click\" target is always the tab, and not content, by stopping\n // propagation of content clicks and re-clicking the host.\n event.stopPropagation();\n this.click();\n }\n\n [ANIMATE_INDICATOR](previousTab: Tab) {\n if (!this[INDICATOR]) {\n return;\n }\n\n this[INDICATOR].getAnimations().forEach(a => {\n a.cancel();\n });\n\n const previousTabInner = previousTab?.shadowRoot?.querySelector('*') as Tab;\n const frames = this.getKeyframes(previousTabInner);\n\n if (frames !== null) {\n this[INDICATOR].animate(frames, {\n duration: 250,\n easing: EASING.EMPHASIZED,\n });\n }\n }\n\n private getKeyframes(previousTab: Tab) {\n const reduceMotion = shouldReduceMotion();\n if (!this.active) {\n return reduceMotion ? [{ opacity: 1 }, { transform: 'none' }] : null;\n }\n\n const from: Keyframe | any = {};\n const fromRect =\n previousTab[INDICATOR]?.getBoundingClientRect() ?? ({} as DOMRect);\n const fromPos = fromRect.left;\n const fromExtent = fromRect.width;\n const toRect = this[INDICATOR]!.getBoundingClientRect();\n const toPos = toRect.left;\n const toExtent = toRect.width;\n const scale = fromExtent / toExtent;\n if (\n !reduceMotion &&\n fromPos !== undefined &&\n toPos !== undefined &&\n Number(scale)\n ) {\n from.transform = `translateX(${(fromPos - toPos).toFixed(\n 4\n )}px) scaleX(${scale.toFixed(4)})`;\n } else {\n from.opacity = 0;\n }\n // note, including `transform: none` avoids quirky Safari behavior\n // that can hide the animation.\n return [from, { transform: 'none' }];\n }\n\n private handleSlotChange() {\n this.iconOnly = false;\n // Check if there's any label text or elements. If not, then there is only\n // an icon.\n for (const node of this.assignedDefaultNodes) {\n const hasTextContent =\n node.nodeType === Node.TEXT_NODE &&\n !!(node as Text).wholeText.match(/\\S/);\n if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {\n return;\n }\n }\n\n this.iconOnly = true;\n }\n\n private handleIconSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n"]}
|
|
@@ -7,7 +7,6 @@ import { __decorate } from "tslib";
|
|
|
7
7
|
import '@material/web/divider/divider.js';
|
|
8
8
|
import { html, isServer, LitElement } from 'lit';
|
|
9
9
|
import { property, query, queryAssignedElements } from 'lit/decorators.js';
|
|
10
|
-
import { polyfillElementInternalsAria, setupHostAria, } from '@material/web/internal/aria/aria.js';
|
|
11
10
|
import { ANIMATE_INDICATOR } from './tab.js';
|
|
12
11
|
function isTab(element) {
|
|
13
12
|
return (element instanceof HTMLElement &&
|
|
@@ -96,8 +95,8 @@ export class Tabs extends LitElement {
|
|
|
96
95
|
* Whether or not to automatically select a tab when it is focused.
|
|
97
96
|
*/
|
|
98
97
|
this.autoActivate = false;
|
|
99
|
-
this.internals =
|
|
100
|
-
.attachInternals()
|
|
98
|
+
this.internals = this /* needed for closure */
|
|
99
|
+
.attachInternals();
|
|
101
100
|
if (!isServer) {
|
|
102
101
|
this.internals.role = 'tablist';
|
|
103
102
|
this.addEventListener('keydown', this.handleKeydown.bind(this));
|
|
@@ -279,9 +278,6 @@ export class Tabs extends LitElement {
|
|
|
279
278
|
this.scrollToTab(this.activeTab);
|
|
280
279
|
}
|
|
281
280
|
}
|
|
282
|
-
(() => {
|
|
283
|
-
setupHostAria(Tabs, { focusable: false });
|
|
284
|
-
})();
|
|
285
281
|
__decorate([
|
|
286
282
|
queryAssignedElements({ flatten: true })
|
|
287
283
|
], Tabs.prototype, "tabs", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/mdtabs/internal/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/divider/divider.js';\n\nimport { html, isServer, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport {\n polyfillElementInternalsAria,\n setupHostAria,\n} from '@material/web/internal/aria/aria.js';\n\nimport { ANIMATE_INDICATOR, Tab } from './tab.js';\n\nfunction isTab(element: unknown): element is Tab {\n return (\n element instanceof HTMLElement &&\n (element.tagName === 'IX-PRIMARY-TAB' ||\n element.tagName === 'IX-SECONDARY-TAB')\n );\n}\n\n/**\n * @fires change Fired when the selected tab changes. The target's selected or\n * selectedItem and previousSelected or previousSelectedItem provide information\n * about the selection change. The change event is fired when a user interaction\n * like a space/enter key or click cause a selection change. The tab selection\n * based on these actions can be cancelled by calling preventDefault on the\n * triggering `keydown` or `click` event.\n *\n * @example\n * // perform an action if a tab is clicked\n * tabs.addEventListener('change', (event: Event) => {\n * if (event.target.selected === 2)\n * takeAction();\n * }\n * });\n *\n * // prevent a click from triggering tab selection under some condition\n * tabs.addEventListener('click', (event: Event) => {\n * if (notReady)\n * event.preventDefault();\n * }\n * });\n *\n */\nexport class Tabs extends LitElement {\n static {\n setupHostAria(Tabs, { focusable: false });\n }\n\n /**\n * The tabs of this tab bar.\n */\n @queryAssignedElements({ flatten: true })\n readonly tabs!: Tab[];\n\n /**\n * The currently selected tab, `null` only when there are no tab children.\n */\n get activeTab() {\n return this.tabs.find(tab => tab.active) ?? null;\n }\n\n set activeTab(tab: Tab | null) {\n // Ignore setting activeTab to null. As long as there are children, one tab\n // must be selected.\n if (tab) {\n this.activateTab(tab);\n }\n }\n\n /**\n * The index of the currently selected tab.\n */\n get activeTabIndex() {\n return this.tabs.findIndex(tab => tab.active);\n }\n\n set activeTabIndex(index: number) {\n const activateTabAtIndex = () => {\n const tab = this.tabs[index];\n // Ignore out-of-bound indices.\n if (tab) {\n this.activateTab(tab);\n }\n };\n\n if (!this.slotElement) {\n // This is needed to support setting the activeTabIndex via a lit property\n // binding.\n //\n // ```ts\n // html`\n // <md-tabs .activeTabIndex=${1}>\n // <md-tab>First</md-tab>\n // <md-tab>Second</md-tab>\n // </md-tabs>\n // `;\n // ```\n //\n // It's needed since lit's rendering lifecycle is asynchronous, and the\n // `<slot>` element hasn't rendered, so `tabs` is empty.\n this.updateComplete.then(activateTabAtIndex);\n return;\n }\n\n activateTabAtIndex();\n }\n\n /**\n * Whether or not to automatically select a tab when it is focused.\n */\n @property({ type: Boolean, attribute: 'auto-activate' }) autoActivate = false;\n\n @query('slot') private readonly slotElement!: HTMLSlotElement | null;\n\n private get focusedTab() {\n return this.tabs.find(tab => tab.matches(':focus-within'));\n }\n\n private readonly internals = polyfillElementInternalsAria(\n this,\n (this as HTMLElement) /* needed for closure */\n .attachInternals()\n );\n\n constructor() {\n super();\n if (!isServer) {\n this.internals.role = 'tablist';\n this.addEventListener('keydown', this.handleKeydown.bind(this));\n this.addEventListener('keyup', this.handleKeyup.bind(this));\n this.addEventListener('focusout', this.handleFocusout.bind(this));\n }\n }\n\n /**\n * Scrolls the toolbar, if overflowing, to the active tab, or the provided\n * tab.\n *\n * @param tabToScrollTo The tab that should be scrolled to. Defaults to the\n * active tab.\n * @return A Promise that resolves after the tab has been scrolled to.\n */\n async scrollToTab(tabToScrollTo?: Tab | null) {\n await this.updateComplete;\n const { tabs } = this;\n // eslint-disable-next-line\n tabToScrollTo ??= this.activeTab;\n if (!tabToScrollTo || !tabs.includes(tabToScrollTo)) {\n return;\n }\n\n // wait for tabs to render.\n for (const tab of this.tabs) {\n // eslint-disable-next-line\n await tab.updateComplete;\n }\n\n const offset = tabToScrollTo.offsetLeft;\n const extent = tabToScrollTo.offsetWidth;\n const scroll = this.scrollLeft;\n const hostExtent = this.offsetWidth;\n const scrollMargin = 48;\n const min = offset - scrollMargin;\n const max = offset + extent - hostExtent + scrollMargin;\n const to = Math.min(min, Math.max(max, scroll));\n // TODO(b/299934312): improve focus smoothness\n const behavior = !this.focusedTab ? 'smooth' : ('instant' as const);\n // @ts-ignore\n this.scrollTo({ behavior, top: 0, left: to });\n }\n\n protected override render() {\n return html`\n <div class=\"tabs\">\n <slot\n @slotchange=${this.handleSlotChange}\n @click=${this.handleTabClick}\n @keydown=${this.handleTabClick}\n ></slot>\n </div>\n <md-divider part=\"divider\"></md-divider>\n `;\n }\n\n private async handleTabClick(event: Event) {\n const tab = event.target;\n // Allow event to bubble\n await 0;\n if (event.defaultPrevented || !isTab(tab) || tab.active) {\n return;\n }\n\n this.activateTab(tab);\n }\n\n private activateTab(activeTab: Tab) {\n const { tabs } = this;\n const previousTab = this.activeTab;\n if (!tabs.includes(activeTab) || previousTab === activeTab) {\n // Ignore setting activeTab to a tab element that is not a child.\n return;\n }\n\n for (const tab of tabs) {\n tab.active = tab === activeTab;\n const innerTab = tab.shadowRoot?.querySelector('*') as Tab;\n if (innerTab) {\n innerTab.active = tab.active;\n }\n }\n\n if (previousTab) {\n // Don't dispatch a change event if activating a tab when no previous tabs\n // were selected, such as when md-tabs auto-selects the first tab.\n const defaultPrevented = !this.dispatchEvent(\n new Event('change', { bubbles: true, cancelable: true, composed: true })\n );\n if (defaultPrevented) {\n for (const tab of tabs) {\n tab.active = tab === previousTab;\n }\n return;\n }\n\n const activeTabInner = activeTab.shadowRoot?.querySelector('*') as Tab;\n\n activeTabInner[ANIMATE_INDICATOR](previousTab);\n }\n\n this.updateFocusableTab(activeTab);\n this.scrollToTab(activeTab);\n }\n\n private updateFocusableTab(focusableTab: Tab) {\n for (const tab of this.tabs) {\n tab.tabIndex = tab === focusableTab ? 0 : -1;\n }\n }\n\n // focus item on keydown and optionally select it\n private async handleKeydown(event: KeyboardEvent) {\n // Allow event to bubble.\n await 0;\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n const isHome = event.key === 'Home';\n const isEnd = event.key === 'End';\n // Ignore non-navigation keys\n if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {\n return;\n }\n\n const { tabs } = this;\n // Don't try to select another tab if there aren't any.\n if (tabs.length < 2) {\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n\n let indexToFocus: number;\n if (isHome || isEnd) {\n indexToFocus = isHome ? 0 : tabs.length - 1;\n } else {\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft : isRight;\n const { focusedTab } = this;\n if (!focusedTab) {\n // If there is not already a tab focused, select the first or last tab\n // based on the direction we're traveling.\n indexToFocus = forwards ? 0 : tabs.length - 1;\n } else {\n const focusedIndex = this.tabs.indexOf(focusedTab);\n indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1;\n if (indexToFocus >= tabs.length) {\n // Return to start if moving past the last item.\n indexToFocus = 0;\n } else if (indexToFocus < 0) {\n // Go to end if moving before the first item.\n indexToFocus = tabs.length - 1;\n }\n }\n }\n\n const tabToFocus = tabs[indexToFocus];\n tabToFocus.focus();\n if (this.autoActivate) {\n this.activateTab(tabToFocus);\n } else {\n this.updateFocusableTab(tabToFocus);\n }\n }\n\n // scroll to item on keyup.\n private handleKeyup() {\n this.scrollToTab(this.focusedTab ?? this.activeTab);\n }\n\n private handleFocusout() {\n // restore focus to selected item when blurring the tab bar.\n if (this.matches(':focus-within')) {\n return;\n }\n\n const { activeTab } = this;\n if (activeTab) {\n this.updateFocusableTab(activeTab);\n }\n }\n\n private handleSlotChange() {\n const firstTab = this.tabs[0];\n if (!this.activeTab && firstTab) {\n // If the active tab was removed, auto-select the first one. There should\n // always be a selected tab while the bar has children.\n this.activateTab(firstTab);\n }\n\n // When children shift, ensure the active tab is visible. For example, if\n // many children are added before the active tab, it'd be pushed off screen.\n // This ensures it stays visible.\n this.scrollToTab(this.activeTab);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/mdtabs/internal/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/divider/divider.js';\n\nimport { html, isServer, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { ANIMATE_INDICATOR, Tab } from './tab.js';\n\nfunction isTab(element: unknown): element is Tab {\n return (\n element instanceof HTMLElement &&\n (element.tagName === 'IX-PRIMARY-TAB' ||\n element.tagName === 'IX-SECONDARY-TAB')\n );\n}\n\n/**\n * @fires change Fired when the selected tab changes. The target's selected or\n * selectedItem and previousSelected or previousSelectedItem provide information\n * about the selection change. The change event is fired when a user interaction\n * like a space/enter key or click cause a selection change. The tab selection\n * based on these actions can be cancelled by calling preventDefault on the\n * triggering `keydown` or `click` event.\n *\n * @example\n * // perform an action if a tab is clicked\n * tabs.addEventListener('change', (event: Event) => {\n * if (event.target.selected === 2)\n * takeAction();\n * }\n * });\n *\n * // prevent a click from triggering tab selection under some condition\n * tabs.addEventListener('click', (event: Event) => {\n * if (notReady)\n * event.preventDefault();\n * }\n * });\n *\n */\nexport class Tabs extends LitElement {\n /**\n * The tabs of this tab bar.\n */\n @queryAssignedElements({ flatten: true })\n readonly tabs!: Tab[];\n\n /**\n * The currently selected tab, `null` only when there are no tab children.\n */\n get activeTab() {\n return this.tabs.find(tab => tab.active) ?? null;\n }\n\n set activeTab(tab: Tab | null) {\n // Ignore setting activeTab to null. As long as there are children, one tab\n // must be selected.\n if (tab) {\n this.activateTab(tab);\n }\n }\n\n /**\n * The index of the currently selected tab.\n */\n get activeTabIndex() {\n return this.tabs.findIndex(tab => tab.active);\n }\n\n set activeTabIndex(index: number) {\n const activateTabAtIndex = () => {\n const tab = this.tabs[index];\n // Ignore out-of-bound indices.\n if (tab) {\n this.activateTab(tab);\n }\n };\n\n if (!this.slotElement) {\n // This is needed to support setting the activeTabIndex via a lit property\n // binding.\n //\n // ```ts\n // html`\n // <md-tabs .activeTabIndex=${1}>\n // <md-tab>First</md-tab>\n // <md-tab>Second</md-tab>\n // </md-tabs>\n // `;\n // ```\n //\n // It's needed since lit's rendering lifecycle is asynchronous, and the\n // `<slot>` element hasn't rendered, so `tabs` is empty.\n this.updateComplete.then(activateTabAtIndex);\n return;\n }\n\n activateTabAtIndex();\n }\n\n /**\n * Whether or not to automatically select a tab when it is focused.\n */\n @property({ type: Boolean, attribute: 'auto-activate' }) autoActivate = false;\n\n @query('slot') private readonly slotElement!: HTMLSlotElement | null;\n\n private get focusedTab() {\n return this.tabs.find(tab => tab.matches(':focus-within'));\n }\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n constructor() {\n super();\n if (!isServer) {\n this.internals.role = 'tablist';\n this.addEventListener('keydown', this.handleKeydown.bind(this));\n this.addEventListener('keyup', this.handleKeyup.bind(this));\n this.addEventListener('focusout', this.handleFocusout.bind(this));\n }\n }\n\n /**\n * Scrolls the toolbar, if overflowing, to the active tab, or the provided\n * tab.\n *\n * @param tabToScrollTo The tab that should be scrolled to. Defaults to the\n * active tab.\n * @return A Promise that resolves after the tab has been scrolled to.\n */\n async scrollToTab(tabToScrollTo?: Tab | null) {\n await this.updateComplete;\n const { tabs } = this;\n // eslint-disable-next-line\n tabToScrollTo ??= this.activeTab;\n if (!tabToScrollTo || !tabs.includes(tabToScrollTo)) {\n return;\n }\n\n // wait for tabs to render.\n for (const tab of this.tabs) {\n // eslint-disable-next-line\n await tab.updateComplete;\n }\n\n const offset = tabToScrollTo.offsetLeft;\n const extent = tabToScrollTo.offsetWidth;\n const scroll = this.scrollLeft;\n const hostExtent = this.offsetWidth;\n const scrollMargin = 48;\n const min = offset - scrollMargin;\n const max = offset + extent - hostExtent + scrollMargin;\n const to = Math.min(min, Math.max(max, scroll));\n // TODO(b/299934312): improve focus smoothness\n const behavior = !this.focusedTab ? 'smooth' : ('instant' as const);\n // @ts-ignore\n this.scrollTo({ behavior, top: 0, left: to });\n }\n\n protected override render() {\n return html`\n <div class=\"tabs\">\n <slot\n @slotchange=${this.handleSlotChange}\n @click=${this.handleTabClick}\n @keydown=${this.handleTabClick}\n ></slot>\n </div>\n <md-divider part=\"divider\"></md-divider>\n `;\n }\n\n private async handleTabClick(event: Event) {\n const tab = event.target;\n // Allow event to bubble\n await 0;\n if (event.defaultPrevented || !isTab(tab) || tab.active) {\n return;\n }\n\n this.activateTab(tab);\n }\n\n private activateTab(activeTab: Tab) {\n const { tabs } = this;\n const previousTab = this.activeTab;\n if (!tabs.includes(activeTab) || previousTab === activeTab) {\n // Ignore setting activeTab to a tab element that is not a child.\n return;\n }\n\n for (const tab of tabs) {\n tab.active = tab === activeTab;\n const innerTab = tab.shadowRoot?.querySelector('*') as Tab;\n if (innerTab) {\n innerTab.active = tab.active;\n }\n }\n\n if (previousTab) {\n // Don't dispatch a change event if activating a tab when no previous tabs\n // were selected, such as when md-tabs auto-selects the first tab.\n const defaultPrevented = !this.dispatchEvent(\n new Event('change', { bubbles: true, cancelable: true, composed: true })\n );\n if (defaultPrevented) {\n for (const tab of tabs) {\n tab.active = tab === previousTab;\n }\n return;\n }\n\n const activeTabInner = activeTab.shadowRoot?.querySelector('*') as Tab;\n\n activeTabInner[ANIMATE_INDICATOR](previousTab);\n }\n\n this.updateFocusableTab(activeTab);\n this.scrollToTab(activeTab);\n }\n\n private updateFocusableTab(focusableTab: Tab) {\n for (const tab of this.tabs) {\n tab.tabIndex = tab === focusableTab ? 0 : -1;\n }\n }\n\n // focus item on keydown and optionally select it\n private async handleKeydown(event: KeyboardEvent) {\n // Allow event to bubble.\n await 0;\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n const isHome = event.key === 'Home';\n const isEnd = event.key === 'End';\n // Ignore non-navigation keys\n if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {\n return;\n }\n\n const { tabs } = this;\n // Don't try to select another tab if there aren't any.\n if (tabs.length < 2) {\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n\n let indexToFocus: number;\n if (isHome || isEnd) {\n indexToFocus = isHome ? 0 : tabs.length - 1;\n } else {\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft : isRight;\n const { focusedTab } = this;\n if (!focusedTab) {\n // If there is not already a tab focused, select the first or last tab\n // based on the direction we're traveling.\n indexToFocus = forwards ? 0 : tabs.length - 1;\n } else {\n const focusedIndex = this.tabs.indexOf(focusedTab);\n indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1;\n if (indexToFocus >= tabs.length) {\n // Return to start if moving past the last item.\n indexToFocus = 0;\n } else if (indexToFocus < 0) {\n // Go to end if moving before the first item.\n indexToFocus = tabs.length - 1;\n }\n }\n }\n\n const tabToFocus = tabs[indexToFocus];\n tabToFocus.focus();\n if (this.autoActivate) {\n this.activateTab(tabToFocus);\n } else {\n this.updateFocusableTab(tabToFocus);\n }\n }\n\n // scroll to item on keyup.\n private handleKeyup() {\n this.scrollToTab(this.focusedTab ?? this.activeTab);\n }\n\n private handleFocusout() {\n // restore focus to selected item when blurring the tab bar.\n if (this.matches(':focus-within')) {\n return;\n }\n\n const { activeTab } = this;\n if (activeTab) {\n this.updateFocusableTab(activeTab);\n }\n }\n\n private handleSlotChange() {\n const firstTab = this.tabs[0];\n if (!this.activeTab && firstTab) {\n // If the active tab was removed, auto-select the first one. There should\n // always be a selected tab while the bar has children.\n this.activateTab(firstTab);\n }\n\n // When children shift, ensure the active tab is visible. For example, if\n // many children are added before the active tab, it'd be pushed off screen.\n // This ensures it stays visible.\n this.scrollToTab(this.activeTab);\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-tabs following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.12",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@digital-realty/ix-icon-button": "
|
|
34
|
-
"@digital-realty/theme": "^1.0.
|
|
33
|
+
"@digital-realty/ix-icon-button": "*",
|
|
34
|
+
"@digital-realty/theme": "^1.0.8",
|
|
35
35
|
"@lit/react": "^1.0.2",
|
|
36
36
|
"@material/web": "^1.0.0",
|
|
37
37
|
"lit": "^2.0.2",
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"README.md",
|
|
102
102
|
"LICENSE"
|
|
103
103
|
],
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "4c0b776d7e028829eb231dc34af90f9f31a790b0"
|
|
105
105
|
}
|