@digital-realty/ix-tabs 1.0.11 → 1.0.21
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/IxPrimaryTab.d.ts +1 -0
- package/dist/IxPrimaryTab.js +19 -4
- package/dist/IxPrimaryTab.js.map +1 -1
- package/dist/IxSecondaryTab.js +12 -4
- package/dist/IxSecondaryTab.js.map +1 -1
- package/dist/IxTabs.js +0 -1
- package/dist/IxTabs.js.map +1 -1
- package/package.json +4 -4
package/dist/IxPrimaryTab.d.ts
CHANGED
package/dist/IxPrimaryTab.js
CHANGED
|
@@ -6,19 +6,31 @@ export class IxPrimaryTab extends LitElement {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
8
|
this.active = false;
|
|
9
|
+
this.inlineIcon = false;
|
|
9
10
|
}
|
|
10
11
|
render() {
|
|
11
|
-
return html `<md-primary-tab
|
|
12
|
-
|
|
12
|
+
return html `<md-primary-tab
|
|
13
|
+
?active=${this.active}
|
|
14
|
+
?inline-icon=${this.inlineIcon}
|
|
15
|
+
>
|
|
16
|
+
<slot slot="icon" name="icon"></slot>
|
|
17
|
+
<slot></slot
|
|
13
18
|
></md-primary-tab> `;
|
|
14
19
|
}
|
|
15
20
|
}
|
|
16
21
|
IxPrimaryTab.styles = css `
|
|
17
22
|
:host {
|
|
18
23
|
display: flex;
|
|
24
|
+
letter-spacing: var(--ix-primary-tab-letter-spacing, 1.25px);
|
|
25
|
+
text-transform: var(--ix-primary-tab-text-transform, uppercase);
|
|
26
|
+
--md-icon-size: var(--ix-tab-icon-size, 20px);
|
|
19
27
|
}
|
|
20
|
-
::slotted(
|
|
21
|
-
|
|
28
|
+
[inline-icon] ::slotted([slot='icon']) {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-content: center;
|
|
31
|
+
flex-wrap: wrap;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
margin: var(--ix-tab-icon-margin, 0 -6px 0 0);
|
|
22
34
|
}
|
|
23
35
|
md-primary-tab {
|
|
24
36
|
flex: 1 1 0%;
|
|
@@ -27,4 +39,7 @@ IxPrimaryTab.styles = css `
|
|
|
27
39
|
__decorate([
|
|
28
40
|
property({ type: Boolean, reflect: true })
|
|
29
41
|
], IxPrimaryTab.prototype, "active", void 0);
|
|
42
|
+
__decorate([
|
|
43
|
+
property({ type: Boolean, attribute: 'inline-icon' })
|
|
44
|
+
], IxPrimaryTab.prototype, "inlineIcon", void 0);
|
|
30
45
|
//# sourceMappingURL=IxPrimaryTab.js.map
|
package/dist/IxPrimaryTab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxPrimaryTab.js","sourceRoot":"","sources":["../src/IxPrimaryTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,yBAAyB,CAAC;AAEjC,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;
|
|
1
|
+
{"version":3,"file":"IxPrimaryTab.js","sourceRoot":"","sources":["../src/IxPrimaryTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,yBAAyB,CAAC;AAEjC,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAoB8C,WAAM,GAAG,KAAK,CAAC;QAEJ,eAAU,GAAG,KAAK,CAAC;IAW5E,CAAC;IATC,MAAM;QACJ,OAAO,IAAI,CAAA;gBACC,IAAI,CAAC,MAAM;qBACN,IAAI,CAAC,UAAU;;;;wBAIZ,CAAC;IACvB,CAAC;;AA/BM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,CAAC;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB;AAEJ;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;gDAAoB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport './mdtabs/primary-tab.js';\n\nexport class IxPrimaryTab extends LitElement {\n static styles = css`\n :host {\n display: flex;\n letter-spacing: var(--ix-primary-tab-letter-spacing, 1.25px);\n text-transform: var(--ix-primary-tab-text-transform, uppercase);\n --md-icon-size: var(--ix-tab-icon-size, 20px);\n }\n [inline-icon] ::slotted([slot='icon']) {\n display: flex;\n align-content: center;\n flex-wrap: wrap;\n justify-content: center;\n margin: var(--ix-tab-icon-margin, 0 -6px 0 0);\n }\n md-primary-tab {\n flex: 1 1 0%;\n }\n `;\n\n @property({ type: Boolean, reflect: true }) active = false;\n\n @property({ type: Boolean, attribute: 'inline-icon' }) inlineIcon = false;\n\n render() {\n return html`<md-primary-tab\n ?active=${this.active}\n ?inline-icon=${this.inlineIcon}\n >\n <slot slot=\"icon\" name=\"icon\"></slot>\n <slot></slot\n ></md-primary-tab> `;\n }\n}\n"]}
|
package/dist/IxSecondaryTab.js
CHANGED
|
@@ -8,17 +8,25 @@ export class IxSecondaryTab extends LitElement {
|
|
|
8
8
|
this.active = false;
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return html `<md-secondary-tab ?active=${this.active}
|
|
12
|
-
|
|
11
|
+
return html `<md-secondary-tab ?active=${this.active}>
|
|
12
|
+
<slot slot="icon" name="icon"></slot>
|
|
13
|
+
<slot></slot
|
|
13
14
|
></md-secondary-tab>`;
|
|
14
15
|
}
|
|
15
16
|
}
|
|
16
17
|
IxSecondaryTab.styles = css `
|
|
17
18
|
:host {
|
|
18
19
|
display: flex;
|
|
20
|
+
letter-spacing: var(--ix-secondary-tab-letter-spacing, 1.25px);
|
|
21
|
+
text-transform: var(--ix-secondary-tab-text-transform, uppercase);
|
|
22
|
+
--md-icon-size: var(--ix-tab-icon-size, 20px);
|
|
19
23
|
}
|
|
20
|
-
::slotted(
|
|
21
|
-
|
|
24
|
+
::slotted([slot='icon']) {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-content: center;
|
|
27
|
+
flex-wrap: wrap;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
margin: var(--ix-tab-icon-margin, 0 -6px 0 0);
|
|
22
30
|
}
|
|
23
31
|
md-secondary-tab {
|
|
24
32
|
flex: 1 1 0%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxSecondaryTab.js","sourceRoot":"","sources":["../src/IxSecondaryTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AAEnC,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;
|
|
1
|
+
{"version":3,"file":"IxSecondaryTab.js","sourceRoot":"","sources":["../src/IxSecondaryTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AAEnC,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAoB8C,WAAM,GAAG,KAAK,CAAC;IAQ7D,CAAC;IANC,MAAM;QACJ,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,MAAM;;;yBAG9B,CAAC;IACxB,CAAC;;AA1BM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,CAAC;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport './mdtabs/secondary-tab.js';\n\nexport class IxSecondaryTab extends LitElement {\n static styles = css`\n :host {\n display: flex;\n letter-spacing: var(--ix-secondary-tab-letter-spacing, 1.25px);\n text-transform: var(--ix-secondary-tab-text-transform, uppercase);\n --md-icon-size: var(--ix-tab-icon-size, 20px);\n }\n ::slotted([slot='icon']) {\n display: flex;\n align-content: center;\n flex-wrap: wrap;\n justify-content: center;\n margin: var(--ix-tab-icon-margin, 0 -6px 0 0);\n }\n md-secondary-tab {\n flex: 1 1 0%;\n }\n `;\n\n @property({ type: Boolean, reflect: true }) active = false;\n\n render() {\n return html`<md-secondary-tab ?active=${this.active}>\n <slot slot=\"icon\" name=\"icon\"></slot>\n <slot></slot\n ></md-secondary-tab>`;\n }\n}\n"]}
|
package/dist/IxTabs.js
CHANGED
|
@@ -121,7 +121,6 @@ IxTabs.styles = css `
|
|
|
121
121
|
md-tabs {
|
|
122
122
|
flex-grow: 1;
|
|
123
123
|
--md-primary-tab-container-color: transparent;
|
|
124
|
-
--md-primary-tab-label-text-color: var(--md-sys-text-color-secondary);
|
|
125
124
|
}
|
|
126
125
|
ix-icon-button {
|
|
127
126
|
--md-icon-button-hover-state-layer-opacity: 0;
|
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,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,kBAAkB,CAAC;AAE1B,OAAO,kDAAkD,CAAC;AAI1D,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;
|
|
1
|
+
{"version":3,"file":"IxTabs.js","sourceRoot":"","sources":["../src/IxTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, nothing, LitElement } from 'lit';\nimport { property, query } 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 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 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) {\n const { clientWidth, scrollWidth, scrollLeft } = this.tabContainer;\n this.enableLeftScroll = scrollLeft !== 0;\n this.enableRightScroll = scrollLeft !== scrollWidth - clientWidth;\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\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 await 0;\n\n this.querySelector('ix-primary-tab[active]')?.scrollIntoView();\n\n this.tabContainer = this.mdTabs.shadowRoot?.querySelector('.tabs');\n\n if (this.tabContainer) {\n if (this.scrollButtons) {\n if (this.hideScrollBar) {\n this.tabContainer.classList.add('no-scrollbar');\n }\n this.calculateScrollButtonsEnabled();\n window.addEventListener('resize', this.updateScrollButtonState);\n this.tabContainer.addEventListener(\n 'scroll',\n this.updateScrollButtonState\n );\n }\n const { clientWidth, scrollWidth } = this.tabContainer;\n if (this.alignLeft && scrollWidth <= clientWidth) {\n this.inline = true;\n }\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/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.0.
|
|
6
|
+
"version": "1.0.21",
|
|
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": "^1.0.
|
|
34
|
-
"@digital-realty/theme": "^1.0.
|
|
33
|
+
"@digital-realty/ix-icon-button": "^1.0.35",
|
|
34
|
+
"@digital-realty/theme": "^1.0.26",
|
|
35
35
|
"@lit/react": "^1.0.2",
|
|
36
36
|
"@material/web": "1.2.0",
|
|
37
37
|
"lit": "^2.0.2",
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"README.md",
|
|
102
102
|
"LICENSE"
|
|
103
103
|
],
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "dced04ebef5c8342344b1fd3df33b5e22a78725f"
|
|
105
105
|
}
|