phares3757/oi-metrology
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Static Site

Browse Source
This commit is contained in:
Mike Phares
2024-06-14 16:51:30 -07:00
parent 3aed250488
commit 6737ddfb59
1706 changed files with 628 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Static/package/dist/collection/components/tabs/tab.css vendored Normal file
View File

@ -0,0 +1,3 @@
:host {
display: block;
}

61
Static/package/dist/collection/components/tabs/tab.js vendored Normal file
View File

@ -0,0 +1,61 @@
import { h } from "@stencil/core";
export class IfxTab {
constructor() {
this.header = undefined;
this.disabled = undefined;
}
render() {
return h("slot", null);
}
static get is() { return "ifx-tab"; }
static get originalStyleUrls() {
return {
"$": ["tab.scss"]
};
}
static get styleUrls() {
return {
"$": ["tab.css"]
};
}
static get properties() {
return {
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "header",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=tab.js.map

1
Static/package/dist/collection/components/tabs/tab.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,MAAM;;;;;EAKjB,MAAM;IACJ,OAAO,eAAQ,CAAC;EAClB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n @Prop() header: string;\n @Prop() disabled: boolean;\n\n render() {\n return <slot />;\n }\n}"]}

103
Static/package/dist/collection/components/tabs/tabs.css vendored Normal file
View File

@ -0,0 +1,103 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
display: flex;
}
.tabs {
display: flex;
font-family: var(--ifx-font-family);
}
.tabs.horizontal {
flex-direction: column;
}
.tabs.vertical {
flex-direction: row;
}
.tabs-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
position: relative;
font-weight: 600;
}
.tabs-list:focus-within .active-border {
display: none;
}
.active-border {
content: "";
position: absolute;
transition: left 0.3s ease-in-out, width 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;
}
.tabs.horizontal .active-border {
bottom: 0;
left: 0;
height: 2px;
background-color: #0A8276;
}
.tabs.vertical .tabs-list {
flex-direction: column;
border-bottom: none;
}
.tabs.vertical .tab-content {
padding-top: 0px;
padding-left: 32px;
}
.tab-item {
padding: 8px 16px;
cursor: pointer;
position: relative;
}
.tab-item:hover {
color: #0A8276;
}
.tab-item:active, .tab-item.active {
color: #0A8276;
}
.tab-item:focus, .tab-item.focus {
outline: none;
border-radius: 1px;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.tab-item:focus + .active-border, .tab-item.focus + .active-border {
display: none;
}
.tab-item.disabled {
color: #BFBBBB;
pointer-events: none;
}
.tabs.vertical .tab-item {
border-right: 2px solid transparent;
min-width: 7em;
}
.tabs.vertical .active-border {
left: 0;
top: 0;
width: 2px;
background-color: #0A8276;
}
.tab-content {
padding-top: 24px;
padding-left: 0px;
flex-grow: 1;
}
.tabs.small .tab-item {
font-size: 0.875rem;
}

35
Static/package/dist/collection/components/tabs/tabs.e2e.js vendored Normal file
View File

@ -0,0 +1,35 @@
import { newE2EPage } from "@stencil/core/testing";
describe('IfxTabs', () => {
it('should render with tabs and change active tab', async () => {
const page = await newE2EPage();
await page.setContent(`
<ifx-tabs>
<ifx-tab header="Tab 1">
<div>Tab 1 Content</div>
</ifx-tab>
<ifx-tab header="Tab 2">
<div>Tab 2 Content</div>
</ifx-tab>
<ifx-tab header="Tab 3">
<div>Tab 3 Content</div>
</ifx-tab>
</ifx-tabs>
`);
const tabs = await page.find('ifx-tabs');
expect(tabs).toHaveClass('hydrated');
const tabHeaders = await page.findAll('ifx-tabs >>> .tab-item');
expect(tabHeaders.length).toBe(3);
const tabContents = await page.findAll('ifx-tabs >>> .tab-content > div');
expect(tabContents.length).toBe(3);
const activeBorder = await page.find('ifx-tabs >>> .active-border');
expect(activeBorder).toHaveClass('active-border');
// Change active tab
await tabHeaders[1].click();
await page.waitForChanges();
const newActiveBorder = await page.find('ifx-tabs >>> .active-border');
expect(newActiveBorder).toHaveClass('active-border');
const newActiveTabContent = await page.find('ifx-tabs >>> .tab-content > div[style="display: block;"]');
expect(newActiveTabContent).not.toBeNull();
});
});
//# sourceMappingURL=tabs.e2e.js.map

1
Static/package/dist/collection/components/tabs/tabs.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"tabs.e2e.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;IAC7D,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;;;;;KAYrB,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAErC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;IAChE,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAElC,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC;IAC1E,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAEnC,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;IACpE,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAElD,oBAAoB;IACpB,MAAM,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;IACvE,MAAM,CAAC,eAAe,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAErD,MAAM,mBAAmB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0DAA0D,CAAC,CAAC;IACxG,MAAM,CAAC,mBAAmB,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;EAE7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('IfxTabs', () => {\n it('should render with tabs and change active tab', async () => {\n const page = await newE2EPage();\n await page.setContent(`\n <ifx-tabs>\n <ifx-tab header=\"Tab 1\">\n <div>Tab 1 Content</div>\n </ifx-tab>\n <ifx-tab header=\"Tab 2\">\n <div>Tab 2 Content</div>\n </ifx-tab>\n <ifx-tab header=\"Tab 3\">\n <div>Tab 3 Content</div>\n </ifx-tab>\n </ifx-tabs>\n `);\n\n const tabs = await page.find('ifx-tabs');\n expect(tabs).toHaveClass('hydrated');\n\n const tabHeaders = await page.findAll('ifx-tabs >>> .tab-item');\n expect(tabHeaders.length).toBe(3);\n\n const tabContents = await page.findAll('ifx-tabs >>> .tab-content > div');\n expect(tabContents.length).toBe(3);\n\n const activeBorder = await page.find('ifx-tabs >>> .active-border');\n expect(activeBorder).toHaveClass('active-border');\n\n // Change active tab\n await tabHeaders[1].click();\n await page.waitForChanges();\n\n const newActiveBorder = await page.find('ifx-tabs >>> .active-border');\n expect(newActiveBorder).toHaveClass('active-border');\n\n const newActiveTabContent = await page.find('ifx-tabs >>> .tab-content > div[style=\"display: block;\"]');\n expect(newActiveTabContent).not.toBeNull();\n\n });\n});\n"]}

301
Static/package/dist/collection/components/tabs/tabs.js vendored Normal file
View File

@ -0,0 +1,301 @@
//ifxTabs.tsx
import { h } from "@stencil/core";
export class IfxTabs {
constructor() {
this.tabs = [];
this.orientation = "horizontal";
this.activeTabIndex = 0;
this.internalOrientation = undefined;
this.internalActiveTabIndex = 0;
this.internalFocusedTabIndex = 0;
this.tabRefs = [];
this.tabHeaderRefs = [];
this.disabledTabs = [];
this.tabObjects = [];
}
setActiveAndFocusedTab(index) {
this.internalActiveTabIndex = index;
this.internalFocusedTabIndex = index;
}
activeTabIndexChanged(newValue, oldValue) {
if (newValue !== oldValue) {
this.setActiveAndFocusedTab(newValue);
}
}
componentWillLoad() {
this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
if (this.internalActiveTabIndex !== this.activeTabIndex) {
this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
}
;
// this.internalActiveTabIndex = this.activeTabIndex;
this.internalFocusedTabIndex = this.internalActiveTabIndex;
this.updateTabStyles();
this.onSlotChange();
}
updateTabStyles() {
this.tabHeaderRefs.forEach((tab, index) => {
tab.classList.toggle('active', index === this.internalActiveTabIndex);
tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false');
});
}
// needed for smooth border transition
reRenderBorder() {
const borderElement = this.el.shadowRoot.querySelector('.active-border');
if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {
if (this.orientation === 'horizontal') {
borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;
borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;
borderElement.style.top = '';
borderElement.style.height = '';
}
else {
borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;
borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;
borderElement.style.left = '';
borderElement.style.width = '';
}
}
}
// when a slot is removed / added
onSlotChange() {
const tabs = this.el.querySelectorAll('ifx-tab');
this.tabObjects = Array.from(tabs).map((tab) => {
return {
header: tab === null || tab === void 0 ? void 0 : tab.header,
disabled: (tab === null || tab === void 0 ? void 0 : tab.disabled) === true
};
});
this.tabRefs = Array.from(tabs);
this.tabRefs.forEach((tab, index) => {
tab.setAttribute('slot', `tab-${index}`);
});
}
setDefaultOrientation() {
const validOrientations = ['horizontal', 'vertical'];
const lowercaseOrientation = this.orientation.toLowerCase();
if (!validOrientations.includes(lowercaseOrientation)) {
this.internalOrientation = 'horizontal';
}
else
this.internalOrientation = this.orientation;
}
componentDidLoad() {
this.updateBorderAndFocus();
// Add keyboard event listeners for each tab header
this.tabHeaderRefs.forEach((tab, index) => {
tab.addEventListener('focus', this.onTabFocus(index));
});
}
onTabFocus(index) {
return () => {
this.internalFocusedTabIndex = index;
};
}
disconnectedCallback() {
// Remove keyboard event listeners when component is unmounted
this.tabHeaderRefs.forEach((tab, index) => {
tab.removeEventListener('focus', this.onTabFocus(index));
});
}
componentDidUpdate() {
this.updateBorderAndFocus();
}
updateBorderAndFocus() {
this.reRenderBorder();
this.updateTabFocusability();
}
updateTabFocusability() {
this.tabHeaderRefs.forEach((tab, index) => {
tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;
});
}
focusNextTab() {
let nextIndex = this.internalFocusedTabIndex + 1;
while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {
nextIndex++;
}
if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {
this.internalFocusedTabIndex = nextIndex;
this.tabHeaderRefs[nextIndex].focus();
}
}
focusPreviousTab() {
let prevIndex = this.internalFocusedTabIndex - 1;
while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {
prevIndex--;
}
if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {
this.internalFocusedTabIndex = prevIndex;
this.tabHeaderRefs[prevIndex].focus();
}
}
getTabItemClass(index) {
const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;
const isDisabled = this.tabObjects[index].disabled;
return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
}
handleClick(tab, index) {
this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
if (!tab.disabled)
this.internalActiveTabIndex = index;
}
handleKeyDown(ev) {
if (ev.key === 'Tab') {
if (ev.shiftKey) {
// Shift + Tab
if (this.internalFocusedTabIndex === 0) {
// Allow default behavior to move focus out of component
return;
}
else {
ev.preventDefault();
this.focusPreviousTab();
}
}
else {
// Tab
if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {
// Allow default behavior to move focus out of component
return;
}
else {
ev.preventDefault();
this.focusNextTab();
}
}
}
else if (ev.key === 'Enter') {
if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {
const previouslyActiveTabIndex = this.internalActiveTabIndex;
this.internalActiveTabIndex = this.internalFocusedTabIndex;
this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex });
}
}
}
render() {
var _a;
return (h("div", { "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
_a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), tabindex: "0", onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), h("div", { class: "active-border" })), h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
}
static get is() { return "ifx-tabs"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["tabs.scss"]
};
}
static get styleUrls() {
return {
"$": ["tabs.css"]
};
}
static get properties() {
return {
"tabs": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{ header: string, disabled?: boolean }[]",
"resolved": "{ header: string; disabled?: boolean; }[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "[]"
},
"orientation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "orientation",
"reflect": false,
"defaultValue": "\"horizontal\""
},
"activeTabIndex": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "active-tab-index",
"reflect": false,
"defaultValue": "0"
}
};
}
static get states() {
return {
"internalOrientation": {},
"internalActiveTabIndex": {},
"internalFocusedTabIndex": {},
"tabRefs": {},
"tabHeaderRefs": {},
"disabledTabs": {},
"tabObjects": {}
};
}
static get events() {
return [{
"method": "ifxTabChange",
"name": "ifxTabChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "activeTabIndex",
"methodName": "activeTabIndexChanged"
}];
}
static get listeners() {
return [{
"name": "slotchange",
"method": "onSlotChange",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=tabs.js.map

1
Static/package/dist/collection/components/tabs/tabs.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

71
Static/package/dist/collection/components/tabs/tabs.stories.js vendored Normal file
View File

@ -0,0 +1,71 @@
import { action } from "@storybook/addon-actions";
const tabHeaders = [{
header: "tab a",
disabled: false
},
{
header: "tab b",
disabled: true
},
{
header: "tab c",
disabled: false,
}];
export default {
title: 'Components/Tabs',
tags: ['autodocs'],
component: 'ifx-tabs',
argTypes: {
amountOfTabs: { name: 'Amount of Tabs', control: 'number' },
orientation: {
name: 'Orientation',
options: ['horizontal', 'vertical'],
control: { type: 'radio' },
},
activeTabIndex: {
name: 'Active tab index',
description: 'Set a tab as active by providing the index (tab can not be disabled)',
},
ifxTabChange: {
action: 'ifxTabChange',
description: 'Custom event emitted on tab index change, containing the current (currentTab) and the previous tab (previousTab)',
table: {
type: {
summary: 'Framework integration',
detail: 'React: onIfxTabChange={handleChange}\nVue:@ifxTabChange="handleChange"\nAngular:(ifxTabChange)="handleChange()"\nVanillaJs:.addEventListener("ifxTabChange", (event) => {//handle change});',
},
},
},
},
};
const Template = (args) => {
const tabsElement = document.createElement('ifx-tabs');
tabsElement.setAttribute('orientation', args.orientation);
tabsElement.setAttribute('active-tab-index', tabHeaders[args.activeTabIndex].disabled ? '' : args.activeTabIndex);
tabsElement.addEventListener('ifxTabChange', action(`ifxTabChange`));
for (let i = 0; i < args.amountOfTabs; i++) {
const tabContent = document.createElement('ifx-tab');
tabContent.setAttribute('header', tabHeaders[i].header);
tabContent.setAttribute('disabled', tabHeaders[i].disabled.toString());
tabContent.innerHTML = `
Content for Tab #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
`;
tabsElement.append(tabContent);
}
return tabsElement;
};
export const Default = Template.bind({});
Default.args = {
amountOfTabs: 3,
orientation: 'horizontal',
activeTabIndex: 0
};
export const Disabled = Template.bind({});
Disabled.args = {
amountOfTabs: 3,
orientation: 'horizontal',
activeTabIndex: 2
};
//# sourceMappingURL=tabs.stories.js.map

1
Static/package/dist/collection/components/tabs/tabs.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC;IAClB,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,KAAK;GAChB;EACD;IACE,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,IAAI;GACf;EACD;IACE,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,KAAK;GAChB,CAAC,CAAC;AAGH,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,SAAS,EAAE,UAAU;EACrB,QAAQ,EAAE;IACR,YAAY,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,QAAQ,EAAE;IAC3D,WAAW,EAAE;MACX,IAAI,EAAE,aAAa;MACnB,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;MACnC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,cAAc,EAAE;MACd,IAAI,EAAE,kBAAkB;MACxB,WAAW,EAAE,sEAAsE;KACpF;IAED,YAAY,EAAE;MACZ,MAAM,EAAE,cAAc;MACtB,WAAW,EAAE,kHAAkH;MAC/H,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,6LAA6L;SACtM;OACF;KACF;GACF;CACF,CAAC;AAGF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAuB,CAAC;EAC7E,WAAW,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;EAC1D,WAAW,CAAC,YAAY,CAAC,kBAAkB,EAAE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EAClH,WAAW,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;EAErE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE;IAC1C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,UAAU,CAAC,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACxD,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvE,UAAU,CAAC,SAAS,GAAG;2BACA,CAAC,GAAG,CAAC;;;KAG3B,CAAC;IACF,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;GAChC;EAED,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACb,YAAY,EAAE,CAAC;EACf,WAAW,EAAE,YAAY;EACzB,cAAc,EAAE,CAAC;CAElB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;EACd,YAAY,EAAE,CAAC;EACf,WAAW,EAAE,YAAY;EACzB,cAAc,EAAE,CAAC;CAClB,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nconst tabHeaders = [{\n header: \"tab a\",\n disabled: false\n},\n{\n header: \"tab b\",\n disabled: true\n},\n{\n header: \"tab c\",\n disabled: false,\n}];\n\n\nexport default {\n title: 'Components/Tabs',\n tags: ['autodocs'],\n\n component: 'ifx-tabs',\n argTypes: {\n amountOfTabs: { name: 'Amount of Tabs', control: 'number' },\n orientation: {\n name: 'Orientation',\n options: ['horizontal', 'vertical'],\n control: { type: 'radio' },\n },\n activeTabIndex: {\n name: 'Active tab index',\n description: 'Set a tab as active by providing the index (tab can not be disabled)',\n },\n\n ifxTabChange: {\n action: 'ifxTabChange',\n description: 'Custom event emitted on tab index change, containing the current (currentTab) and the previous tab (previousTab)',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxTabChange={handleChange}\\nVue:@ifxTabChange=\"handleChange\"\\nAngular:(ifxTabChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxTabChange\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\n\nconst Template = (args) => {\n const tabsElement = document.createElement('ifx-tabs') as HTMLIfxTabsElement;\n tabsElement.setAttribute('orientation', args.orientation);\n tabsElement.setAttribute('active-tab-index', tabHeaders[args.activeTabIndex].disabled ? '' : args.activeTabIndex);\n tabsElement.addEventListener('ifxTabChange', action(`ifxTabChange`));\n\n for (let i = 0; i < args.amountOfTabs; i++) {\n const tabContent = document.createElement('ifx-tab');\n tabContent.setAttribute('header', tabHeaders[i].header);\n tabContent.setAttribute('disabled', tabHeaders[i].disabled.toString());\n tabContent.innerHTML = `\n Content for Tab #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n `;\n tabsElement.append(tabContent);\n }\n\n return tabsElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n amountOfTabs: 3,\n orientation: 'horizontal',\n activeTabIndex: 0\n\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n amountOfTabs: 3,\n orientation: 'horizontal',\n activeTabIndex: 2\n};\n"]}