@digital-realty/ix-tabs 1.1.6 → 1.1.7
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.
- package/dist/IxTabs.d.ts +2 -1
- package/dist/IxTabs.js +39 -28
- package/dist/IxTabs.js.map +1 -1
- package/dist/ix-tabs.min.js +2 -2
- package/package.json +2 -2
package/dist/IxTabs.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
2
|
import './mdtabs/tabs.js';
|
|
3
3
|
import type { MdTabs } from './mdtabs/tabs.js';
|
|
4
4
|
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
@@ -19,6 +19,7 @@ export declare class IxTabs extends LitElement {
|
|
|
19
19
|
private debounceEvent;
|
|
20
20
|
private updateScrollButtonState;
|
|
21
21
|
slotChange(): Promise<void>;
|
|
22
|
+
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
22
23
|
disconnectedCallback(): void;
|
|
23
24
|
private scrollTabs;
|
|
24
25
|
render(): import("lit-html").TemplateResult<1>;
|
package/dist/IxTabs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, css, nothing, LitElement } from 'lit';
|
|
3
|
-
import { property, query } from 'lit/decorators.js';
|
|
3
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
4
4
|
import './mdtabs/tabs.js';
|
|
5
5
|
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
6
6
|
export class IxTabs extends LitElement {
|
|
@@ -26,41 +26,48 @@ export class IxTabs extends LitElement {
|
|
|
26
26
|
}
|
|
27
27
|
calculateScrollButtonsEnabled() {
|
|
28
28
|
var _a;
|
|
29
|
-
if (this.tabContainer)
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
29
|
+
if (!this.tabContainer)
|
|
30
|
+
return;
|
|
31
|
+
const { clientWidth, scrollWidth, scrollLeft } = this.tabContainer;
|
|
32
|
+
this.enableLeftScroll = scrollLeft !== 0;
|
|
33
|
+
this.enableRightScroll = scrollLeft !== scrollWidth - clientWidth;
|
|
34
|
+
if (this.alignLeft) {
|
|
35
|
+
const parent = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth;
|
|
36
|
+
if (parent && scrollWidth > parent) {
|
|
37
|
+
this.inline = false;
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
this.inline = true;
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
async slotChange() {
|
|
45
|
-
var _a
|
|
46
|
-
await 0;
|
|
45
|
+
var _a;
|
|
47
46
|
(_a = this.querySelector('ix-primary-tab[active]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
47
|
+
if (!this.tabContainer)
|
|
48
|
+
return;
|
|
49
|
+
if (this.scrollButtons && this.hideScrollBar) {
|
|
50
|
+
this.tabContainer.classList.add('no-scrollbar');
|
|
51
|
+
}
|
|
52
|
+
if (this.scrollButtons) {
|
|
53
|
+
this.calculateScrollButtonsEnabled();
|
|
54
|
+
window.addEventListener('resize', this.updateScrollButtonState);
|
|
55
|
+
this.tabContainer.addEventListener('scroll', this.updateScrollButtonState);
|
|
56
|
+
}
|
|
57
|
+
await this.updateComplete;
|
|
58
|
+
if (this.tabContainer && this.alignLeft) {
|
|
58
59
|
const { clientWidth, scrollWidth } = this.tabContainer;
|
|
59
|
-
|
|
60
|
-
this.inline = true;
|
|
61
|
-
}
|
|
60
|
+
this.inline = scrollWidth <= clientWidth;
|
|
62
61
|
}
|
|
63
62
|
}
|
|
63
|
+
firstUpdated(_changedProperties) {
|
|
64
|
+
super.firstUpdated(_changedProperties);
|
|
65
|
+
requestAnimationFrame(() => {
|
|
66
|
+
var _a;
|
|
67
|
+
this.tabContainer = (_a = this.mdTabs.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tabs');
|
|
68
|
+
this.slotChange();
|
|
69
|
+
});
|
|
70
|
+
}
|
|
64
71
|
disconnectedCallback() {
|
|
65
72
|
var _a;
|
|
66
73
|
super.disconnectedCallback();
|
|
@@ -107,6 +114,7 @@ export class IxTabs extends LitElement {
|
|
|
107
114
|
}
|
|
108
115
|
IxTabs.styles = css `
|
|
109
116
|
:host {
|
|
117
|
+
max-width: 100%;
|
|
110
118
|
display: flex;
|
|
111
119
|
align-items: center;
|
|
112
120
|
justify-content: center;
|
|
@@ -158,4 +166,7 @@ __decorate([
|
|
|
158
166
|
__decorate([
|
|
159
167
|
property({ type: Boolean })
|
|
160
168
|
], IxTabs.prototype, "enableRightScroll", void 0);
|
|
169
|
+
__decorate([
|
|
170
|
+
state()
|
|
171
|
+
], IxTabs.prototype, "tabContainer", void 0);
|
|
161
172
|
//# sourceMappingURL=IxTabs.js.map
|
package/dist/IxTabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxTabs.js","sourceRoot":"","sources":["../src/IxTabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"IxTabs.js","sourceRoot":"","sources":["../src/IxTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, nothing, LitElement, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport './mdtabs/tabs.js';\nimport type { MdTabs } from './mdtabs/tabs.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\n\ntype ScrollDirection = 'left' | 'right';\n\nexport class IxTabs extends LitElement {\n static styles = css`\n :host {\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n :host(ix-tabs[inline]) {\n display: inline-flex;\n }\n :host(ix-tabs[inline]) ix-icon-button[disabled] {\n display: none;\n }\n md-tabs {\n flex-grow: 1;\n --md-primary-tab-container-color: transparent;\n }\n ix-icon-button {\n --md-icon-button-hover-state-layer-opacity: 0;\n --md-icon-button-pressed-state-layer-opacity: 0;\n --md-icon-button-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-pressed-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n }\n .scroll {\n cursor: pointer;\n }\n `;\n\n @query('md-Tabs') mdTabs!: MdTabs;\n\n @query('ix-primary-tab[active]') activeTab!: Element;\n\n @property({ type: Boolean }) scrollButtons = false;\n\n @property({ type: Boolean }) hideScrollBar = false;\n\n @property({ type: Boolean, reflect: true }) inline = false;\n\n @property({ type: Boolean, attribute: 'left-align' }) alignLeft = false;\n\n @property({ type: Boolean }) private enableLeftScroll = true;\n\n @property({ type: Boolean }) private enableRightScroll = true;\n\n @state() private tabContainer: HTMLElement | null | undefined = null;\n\n get activeTabIndex() {\n return this.mdTabs.activeTabIndex;\n }\n\n set activeTabIndex(index: number) {\n this.mdTabs.activeTabIndex = index;\n }\n\n private calculateScrollButtonsEnabled() {\n if (!this.tabContainer) return;\n\n const { clientWidth, scrollWidth, scrollLeft } = this.tabContainer;\n this.enableLeftScroll = scrollLeft !== 0;\n this.enableRightScroll = scrollLeft !== scrollWidth - clientWidth;\n\n if (this.alignLeft) {\n const parent = this.parentElement?.clientWidth;\n if (parent && scrollWidth > parent) {\n this.inline = false;\n } else {\n this.inline = true;\n }\n }\n }\n\n private debounceEvent: ReturnType<typeof setTimeout> | undefined;\n\n private updateScrollButtonState = () => {\n clearTimeout(this.debounceEvent);\n this.debounceEvent = setTimeout(\n this.calculateScrollButtonsEnabled.bind(this),\n 100\n );\n };\n\n async slotChange() {\n this.querySelector('ix-primary-tab[active]')?.scrollIntoView();\n\n if (!this.tabContainer) return;\n\n if (this.scrollButtons && this.hideScrollBar) {\n this.tabContainer.classList.add('no-scrollbar');\n }\n\n if (this.scrollButtons) {\n this.calculateScrollButtonsEnabled();\n window.addEventListener('resize', this.updateScrollButtonState);\n this.tabContainer.addEventListener(\n 'scroll',\n this.updateScrollButtonState\n );\n }\n\n await this.updateComplete;\n\n if (this.tabContainer && this.alignLeft) {\n const { clientWidth, scrollWidth } = this.tabContainer;\n this.inline = scrollWidth <= clientWidth;\n }\n }\n\n protected firstUpdated(_changedProperties: PropertyValues) {\n super.firstUpdated(_changedProperties);\n\n requestAnimationFrame(() => {\n this.tabContainer = this.mdTabs.shadowRoot?.querySelector('.tabs');\n this.slotChange();\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.scrollButtons) {\n window.removeEventListener('resize', this.updateScrollButtonState);\n this.tabContainer?.removeEventListener(\n 'scroll',\n this.updateScrollButtonState\n );\n }\n }\n\n private scrollTabs(direction: ScrollDirection = 'left', scrollAmount = 0.75) {\n if (this.tabContainer) {\n const { clientWidth, scrollLeft } = this.tabContainer;\n const offset =\n direction === 'left'\n ? clientWidth * -scrollAmount\n : clientWidth * scrollAmount;\n const scrollToPosition = scrollLeft + offset;\n this.tabContainer.scrollTo({\n top: 0,\n left: scrollToPosition,\n behavior: 'smooth',\n });\n }\n }\n\n render() {\n return html`\n ${this.scrollButtons\n ? html`<ix-icon-button\n icon=\"chevron_left\"\n @click=${() => this.scrollTabs('left')}\n ?disabled=${!this.enableLeftScroll}\n ></ix-icon-button>`\n : nothing}\n <md-tabs>\n <slot @slotchange=${this.slotChange}></slot>\n </md-tabs>\n ${this.scrollButtons\n ? html`<ix-icon-button\n icon=\"chevron_right\"\n @click=${() => this.scrollTabs('right')}\n ?disabled=${!this.enableRightScroll}\n ></ix-icon-button>`\n : nothing}\n `;\n }\n}\n"]}
|
package/dist/ix-tabs.min.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{LitElement,isServer,html,nothing,css}from"lit";import{property,query,state,queryAssignedNodes,queryAssignedElements,customElement}from"lit/decorators.js";import{styles}from"@material/web/tabs/internal/tabs-styles.css.js";import"@material/web/divider/divider.js";import"@material/web/elevation/elevation.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/ripple/ripple.js";import{classMap}from"lit/directives/class-map.js";import{EASING}from"@material/web/internal/motion/animation.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";var _a;let INDICATOR=Symbol("indicator"),ANIMATE_INDICATOR=Symbol("animateIndicator");function shouldReduceMotion(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}class Tab extends LitElement{get selected(){return this.active}set selected(t){this.active=t}constructor(){super(),this.isTab=!0,this.active=!1,this.hasIcon=!1,this.iconOnly=!1,this.fullWidthIndicator=!0,this.internals=this.attachInternals(),isServer||(this.internals.role="tab",this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){var t=html`<div class="indicator"></div>`;return html`<div class="button" role="presentation" @click="${this.handleContentClick}"><md-focus-ring part="focus-ring" inward .control="${this}"></md-focus-ring><md-elevation></md-elevation><md-ripple .control="${this}"></md-ripple><div class="content ${classMap(this.getContentClasses())}" role="presentation"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot><slot @slotchange="${this.handleSlotChange}"></slot>${this.fullWidthIndicator?nothing:t}</div>${this.fullWidthIndicator?t:nothing}</div>`}getContentClasses(){return{"has-icon":this.hasIcon,"has-label":!this.iconOnly}}updated(){this.internals.ariaSelected=String(this.active)}async handleKeydown(t){await 0,t.defaultPrevented||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}handleContentClick(t){t.stopPropagation(),this.click()}[(_a=INDICATOR,ANIMATE_INDICATOR)](t){this[INDICATOR]&&(this[INDICATOR].getAnimations().forEach(t=>{t.cancel()}),t=null==(t=null==t?void 0:t.shadowRoot)?void 0:t.querySelector("*"),null!==(t=this.getKeyframes(t)))&&this[INDICATOR].animate(t,{duration:250,easing:EASING.EMPHASIZED})}getKeyframes(t){var e,i,
|
|
1
|
+
import{__decorate}from"tslib";import{LitElement,isServer,html,nothing,css}from"lit";import{property,query,state,queryAssignedNodes,queryAssignedElements,customElement}from"lit/decorators.js";import{styles}from"@material/web/tabs/internal/tabs-styles.css.js";import"@material/web/divider/divider.js";import"@material/web/elevation/elevation.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/ripple/ripple.js";import{classMap}from"lit/directives/class-map.js";import{EASING}from"@material/web/internal/motion/animation.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";var _a;let INDICATOR=Symbol("indicator"),ANIMATE_INDICATOR=Symbol("animateIndicator");function shouldReduceMotion(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}class Tab extends LitElement{get selected(){return this.active}set selected(t){this.active=t}constructor(){super(),this.isTab=!0,this.active=!1,this.hasIcon=!1,this.iconOnly=!1,this.fullWidthIndicator=!0,this.internals=this.attachInternals(),isServer||(this.internals.role="tab",this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){var t=html`<div class="indicator"></div>`;return html`<div class="button" role="presentation" @click="${this.handleContentClick}"><md-focus-ring part="focus-ring" inward .control="${this}"></md-focus-ring><md-elevation></md-elevation><md-ripple .control="${this}"></md-ripple><div class="content ${classMap(this.getContentClasses())}" role="presentation"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot><slot @slotchange="${this.handleSlotChange}"></slot>${this.fullWidthIndicator?nothing:t}</div>${this.fullWidthIndicator?t:nothing}</div>`}getContentClasses(){return{"has-icon":this.hasIcon,"has-label":!this.iconOnly}}updated(){this.internals.ariaSelected=String(this.active)}async handleKeydown(t){await 0,t.defaultPrevented||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}handleContentClick(t){t.stopPropagation(),this.click()}[(_a=INDICATOR,ANIMATE_INDICATOR)](t){this[INDICATOR]&&(this[INDICATOR].getAnimations().forEach(t=>{t.cancel()}),t=null==(t=null==t?void 0:t.shadowRoot)?void 0:t.querySelector("*"),null!==(t=this.getKeyframes(t)))&&this[INDICATOR].animate(t,{duration:250,easing:EASING.EMPHASIZED})}getKeyframes(t){var e,a,i,o,s=shouldReduceMotion();return this.active?(e={},a=(t=null!=(t=null==(t=t[INDICATOR])?void 0:t.getBoundingClientRect())?t:{}).left,t=t.width,o=(i=this[INDICATOR].getBoundingClientRect()).left,t=t/i.width,!s&&void 0!==a&&void 0!==o&&Number(t)?e.transform=`translateX(${(a-o).toFixed(4)}px) scaleX(${t.toFixed(4)})`:e.opacity=0,[e,{transform:"none"}]):s?[{opacity:1},{transform:"none"}]:null}handleSlotChange(){this.iconOnly=!1;for(var t of this.assignedDefaultNodes){var e=t.nodeType===Node.TEXT_NODE&&!!t.wholeText.match(/\S/);if(t.nodeType===Node.ELEMENT_NODE||e)return}this.iconOnly=!0}handleIconSlotChange(){this.hasIcon=0<this.assignedIcons.length}}function isTab(t){return t instanceof HTMLElement&&("IX-PRIMARY-TAB"===t.tagName||"IX-SECONDARY-TAB"===t.tagName)}__decorate([property({type:Boolean,reflect:!0,attribute:"md-tab"})],Tab.prototype,"isTab",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"active",void 0),__decorate([property({type:Boolean})],Tab.prototype,"selected",null),__decorate([property({type:Boolean,attribute:"has-icon"})],Tab.prototype,"hasIcon",void 0),__decorate([property({type:Boolean,attribute:"icon-only"})],Tab.prototype,"iconOnly",void 0),__decorate([query(".indicator")],Tab.prototype,_a,void 0),__decorate([state()],Tab.prototype,"fullWidthIndicator",void 0),__decorate([queryAssignedNodes({flatten:!0})],Tab.prototype,"assignedDefaultNodes",void 0),__decorate([queryAssignedElements({slot:"icon",flatten:!0})],Tab.prototype,"assignedIcons",void 0);class Tabs extends LitElement{get activeTab(){var t;return null!=(t=this.tabs.find(t=>t.active))?t:null}set activeTab(t){t&&this.activateTab(t)}get activeTabIndex(){return this.tabs.findIndex(t=>t.active)}set activeTabIndex(e){var t=()=>{var t=this.tabs[e];t&&this.activateTab(t)};this.slotElement?t():this.updateComplete.then(t)}get focusedTab(){return this.tabs.find(t=>t.matches(":focus-within"))}constructor(){super(),this.autoActivate=!1,this.internals=this.attachInternals(),isServer||(this.internals.role="tablist",this.addEventListener("keydown",this.handleKeydown.bind(this)),this.addEventListener("keyup",this.handleKeyup.bind(this)),this.addEventListener("focusout",this.handleFocusout.bind(this)))}async scrollToTab(t){await this.updateComplete;var e=this.tabs;if((t=null!=t?t:this.activeTab)&&e.includes(t)){for(var a of this.tabs)await a.updateComplete;var e=t.offsetLeft,t=t.offsetWidth,i=this.scrollLeft,o=this.offsetWidth,e=Math.min(e-48,Math.max(e+t-o+48,i)),t=this.focusedTab?"instant":"smooth";this.scrollTo({behavior:t,top:0,left:e})}}render(){return html`<div class="tabs"><slot @slotchange="${this.handleSlotChange}" @click="${this.handleTabClick}" @keydown="${this.handleTabClick}"></slot></div><md-divider part="divider"></md-divider>`}async handleTabClick(t){var e=t.target;await 0,t.defaultPrevented||!isTab(e)||e.active||this.activateTab(e)}activateTab(t){var e=this.tabs,a=this.activeTab;if(e.includes(t)&&a!==t){for(var i of e){i.active=i===t;var o=null==(o=i.shadowRoot)?void 0:o.querySelector("*");o&&(o.active=i.active)}if(a){if(!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))){for(var s of e)s.active=s===a;return}(null==(e=t.shadowRoot)?void 0:e.querySelector("*"))[ANIMATE_INDICATOR](a)}this.updateFocusableTab(t),this.scrollToTab(t)}}updateFocusableTab(t){for(var e of this.tabs)e.tabIndex=e===t?0:-1}async handleKeydown(e){await 0;var a="ArrowLeft"===e.key,i="ArrowRight"===e.key,o="Home"===e.key,s="End"===e.key;if(!e.defaultPrevented&&(a||i||o||s)){var n=this.tabs;if(!(n.length<2)){e.preventDefault();let t;o||s?t=o?0:n.length-1:(e="rtl"===getComputedStyle(this).direction?a:i,s=this.focusedTab,s?(o=this.tabs.indexOf(s),(t=e?o+1:o-1)>=n.length?t=0:t<0&&(t=n.length-1)):t=e?0:n.length-1);a=n[t];a.focus(),this.autoActivate?this.activateTab(a):this.updateFocusableTab(a)}}}handleKeyup(){var t;this.scrollToTab(null!=(t=this.focusedTab)?t:this.activeTab)}handleFocusout(){var t;this.matches(":focus-within")||(t=this.activeTab,t&&this.updateFocusableTab(t))}handleSlotChange(){var t=this.tabs[0];!this.activeTab&&t&&this.activateTab(t),this.scrollToTab(this.activeTab)}}__decorate([queryAssignedElements({flatten:!0})],Tabs.prototype,"tabs",void 0),__decorate([property({type:Boolean,attribute:"auto-activate"})],Tabs.prototype,"autoActivate",void 0),__decorate([query("slot")],Tabs.prototype,"slotElement",void 0);let MdTabs=class extends Tabs{};MdTabs.styles=[styles,css`.tabs.no-scrollbar::-webkit-scrollbar{display:none}`],MdTabs=__decorate([customElement("md-tabs")],MdTabs);class IxTabs extends LitElement{constructor(){super(...arguments),this.scrollButtons=!1,this.hideScrollBar=!1,this.inline=!1,this.alignLeft=!1,this.enableLeftScroll=!0,this.enableRightScroll=!0,this.tabContainer=null,this.updateScrollButtonState=()=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(this.calculateScrollButtonsEnabled.bind(this),100)}}get activeTabIndex(){return this.mdTabs.activeTabIndex}set activeTabIndex(t){this.mdTabs.activeTabIndex=t}calculateScrollButtonsEnabled(){var t,e,a;this.tabContainer&&({clientWidth:a,scrollWidth:t,scrollLeft:e}=this.tabContainer,this.enableLeftScroll=0!==e,this.enableRightScroll=e!==t-a,this.alignLeft)&&(a=null==(e=this.parentElement)?void 0:e.clientWidth,this.inline=!(a&&a<t))}async slotChange(){var t,e;null!=(t=this.querySelector("ix-primary-tab[active]"))&&t.scrollIntoView(),this.tabContainer&&(this.scrollButtons&&this.hideScrollBar&&this.tabContainer.classList.add("no-scrollbar"),this.scrollButtons&&(this.calculateScrollButtonsEnabled(),window.addEventListener("resize",this.updateScrollButtonState),this.tabContainer.addEventListener("scroll",this.updateScrollButtonState)),await this.updateComplete,this.tabContainer)&&this.alignLeft&&({clientWidth:t,scrollWidth:e}=this.tabContainer,this.inline=e<=t)}firstUpdated(t){super.firstUpdated(t),requestAnimationFrame(()=>{var t;this.tabContainer=null==(t=this.mdTabs.shadowRoot)?void 0:t.querySelector(".tabs"),this.slotChange()})}disconnectedCallback(){var t;super.disconnectedCallback(),this.scrollButtons&&(window.removeEventListener("resize",this.updateScrollButtonState),null!=(t=this.tabContainer))&&t.removeEventListener("scroll",this.updateScrollButtonState)}scrollTabs(t="left",e=.75){var a,i;this.tabContainer&&({clientWidth:a,scrollLeft:i}=this.tabContainer,this.tabContainer.scrollTo({top:0,left:i+("left"===t?a*-e:a*e),behavior:"smooth"}))}render(){return html`${this.scrollButtons?html`<ix-icon-button icon="chevron_left" @click="${()=>this.scrollTabs("left")}" ?disabled="${!this.enableLeftScroll}"></ix-icon-button>`:nothing}<md-tabs><slot @slotchange="${this.slotChange}"></slot></md-tabs>${this.scrollButtons?html`<ix-icon-button icon="chevron_right" @click="${()=>this.scrollTabs("right")}" ?disabled="${!this.enableRightScroll}"></ix-icon-button>`:nothing}`}}IxTabs.styles=css`:host{max-width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}:host(ix-tabs[inline]){display:inline-flex}:host(ix-tabs[inline]) ix-icon-button[disabled]{display:none}md-tabs{flex-grow:1;--md-primary-tab-container-color:transparent}ix-icon-button{--md-icon-button-hover-state-layer-opacity:0;--md-icon-button-pressed-state-layer-opacity:0;--md-icon-button-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-pressed-state-layer-color:var(
|
|
2
2
|
--md-sys-text-color-secondary
|
|
3
|
-
)}.scroll{cursor:pointer}`,__decorate([query("md-Tabs")],IxTabs.prototype,"mdTabs",void 0),__decorate([query("ix-primary-tab[active]")],IxTabs.prototype,"activeTab",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"scrollButtons",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"hideScrollBar",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTabs.prototype,"inline",void 0),__decorate([property({type:Boolean,attribute:"left-align"})],IxTabs.prototype,"alignLeft",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"enableLeftScroll",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"enableRightScroll",void 0),window.customElements.define("ix-tabs",IxTabs);
|
|
3
|
+
)}.scroll{cursor:pointer}`,__decorate([query("md-Tabs")],IxTabs.prototype,"mdTabs",void 0),__decorate([query("ix-primary-tab[active]")],IxTabs.prototype,"activeTab",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"scrollButtons",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"hideScrollBar",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTabs.prototype,"inline",void 0),__decorate([property({type:Boolean,attribute:"left-align"})],IxTabs.prototype,"alignLeft",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"enableLeftScroll",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"enableRightScroll",void 0),__decorate([state()],IxTabs.prototype,"tabContainer",void 0),window.customElements.define("ix-tabs",IxTabs);
|
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": "1.1.
|
|
6
|
+
"version": "1.1.7",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
"README.md",
|
|
106
106
|
"LICENSE"
|
|
107
107
|
],
|
|
108
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "93c5eda7400539b6061cdf8ad5ab4216b04700d8"
|
|
109
109
|
}
|