npm - kemet-ui - Versions diffs - 2.0.2 → 3.0.0 - Mend

kemet-ui 2.0.2 → 3.0.0

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

Files changed (297) hide show

package/dist/components/kemet-tabs/docs/stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tabs/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tabs';\nimport '../kemet-tab';\nimport '../kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Tabs',\n component: 'kemet-tabs',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst NamedTemplate = ({\n selected = 'settings',\n panelEffect = 'slide',\n swipe = true,\n divider = true,\n tabsAlign = 'center',\n hideInk = false,\n placement = 'top',\n measureHeightOffset,\n}) => html`\n <kemet-tabs selected=\"${selected}\" panel-effect=${panelEffect} ?swipe=${swipe} ?divider=${divider} tabs-align=${tabsAlign} ?hide-ink=${hideInk} placement=${placement} measure-height-offset=${ifDefined(measureHeightOffset)}>\n <kemet-tab slot=\"tab\" link=\"account\">\n <kemet-icon icon=\"person-circle\"></kemet-icon> Account\n </kemet-tab>\n <kemet-tab slot=\"tab\" link=\"settings\">\n <kemet-icon icon=\"gear\"></kemet-icon> Settings\n </kemet-tab>\n <kemet-tab slot=\"tab\" link=\"dashboard\">\n <kemet-icon icon=\"columns-gap\"></kemet-icon> Dashboard\n </kemet-tab>\n <kemet-tab-panel panel=\"account\" slot=\"panel\">\n <h3 kemet-margin-top=\"tiny:none\">Account</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n <kemet-tab-panel panel=\"settings\" slot=\"panel\">\n <h3 kemet-margin-top=\"tiny:none\">Settings</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n <kemet-tab-panel panel=\"dashboard\" slot=\"panel\">\n <h3 kemet-margin-top=\"tiny:none\">Dashboard</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p>Tellus integer feugiat scelerisque varius morbi. Non odio euismod lacinia at quis. Dictum sit amet justo donec. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Sed nisi lacus sed viverra tellus. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Arcu dui vivamus arcu felis bibendum ut tristique. Dictum at tempor commodo ullamcorper a. Nisl nunc mi ipsum faucibus vitae. In eu mi bibendum neque.</p>\n </kemet-tab-panel>\n </kemet-tabs>\n <hr />\n`;\n\nconst IndexTemplate = ({\n panelEffect = 'slide',\n swipe = true,\n divider = true,\n tabsAlign = 'center',\n hideInk = false,\n placement = 'top',\n numOfTabs = 5,\n closable = true,\n measureHeightOffset,\n}) => {\n const tabs = [];\n const panels = [];\n\n for (let i = 0; i < numOfTabs; i += 1) {\n tabs.push(html`<kemet-tab slot=\"tab\" ?closable=${closable}>This is tab ${i + 1}.</kemet-tab>`);\n }\n\n for (let i = 0; i < numOfTabs; i += 1) {\n panels.push(html`\n <kemet-tab-panel slot=\"panel\">\n <h3>Panel ${i + 1}</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n `);\n }\n\n return html`\n <kemet-tabs panel-effect=${panelEffect} ?swipe=${swipe} ?divider=${divider} tabs-align=${tabsAlign} ?hide-ink=${hideInk} placement=${placement} measure-height-offset=${ifDefined(measureHeightOffset)}>\n ${tabs}\n ${panels}\n </kemet-tabs>\n `;\n};\n\nexport const SelectByName: Story = {\n render: (args: any) => NamedTemplate(args),\n args: {\n selected: 'settings',\n panelEffect: 'slide',\n swipe: true,\n divider: true,\n tabsAlign: 'center',\n hideInk: false,\n placement: 'top',\n },\n argTypes: {\n panelEffect: {\n control: { type: 'select' },\n options: ['none', 'slide', 'fade'],\n },\n swipe: {\n control: { type: 'boolean' },\n },\n divider: {\n control: { type: 'boolean' },\n },\n tabsAlign: {\n control: { type: 'select' },\n options: ['center', 'between', 'around', 'evenly', 'start', 'end'],\n },\n hideInk: {\n control: { type: 'boolean' },\n },\n placement: {\n control: { type: 'select' },\n options: ['top', 'right', 'bottom', 'left'],\n },\n measureHeightOffset: {\n control: { type: 'number' },\n },\n }\n};\n\nexport const SelectByIndex: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n closable: true,\n panelEffect: 'slide',\n swipe: true,\n divider: true,\n tabsAlign: 'center',\n hideInk: false,\n placement: 'top',\n },\n argTypes: {\n numOfTabs: {\n control: { type: 'number' },\n },\n closable: {\n control: { type: 'boolean' },\n },\n panelEffect: {\n control: { type: 'select' },\n options: ['none', 'slide', 'fade'],\n },\n swipe: {\n control: { type: 'boolean' },\n },\n divider: {\n control: { type: 'boolean' },\n },\n tabsAlign: {\n control: { type: 'select' },\n options: ['center', 'between', 'around', 'evenly', 'start', 'end'],\n },\n hideInk: {\n control: { type: 'boolean' },\n },\n placement: {\n control: { type: 'select' },\n options: ['top', 'right', 'bottom', 'left'],\n },\n measureHeightOffset: {\n control: { type: 'number' },\n },\n }\n};\n"]}
1	+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tabs/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tabs';\nimport '../kemet-tab';\nimport '../kemet-tab-panel';\n\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n title: 'Components / Tabs',\n component: 'kemet-tabs',\n argTypes: {\n panelEffect: {\n control: { type: 'select' },\n options: ['none', 'slide', 'fade'],\n },\n tabsAlign: {\n control: { type: 'select' },\n options: ['center', 'between', 'around', 'evenly', 'start', 'end'],\n },\n placement: {\n control: { type: 'select' },\n options: ['top', 'right', 'bottom', 'left'],\n },\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst NamedTemplate = (args) => html`\n <kemet-tabs selected=\"${ifDefined(args.selected)}\" panel-effect=${ifDefined(args.panelEffect)} ?swipe=${args.swipe} ?divider=${args.divider} tabs-align=${ifDefined(args.tabsAlign)} ?hide-ink=${args.hideInk} placement=${ifDefined(args.placement)} measure-height-offset=${ifDefined(args.measureHeightOffset)}>\n <kemet-tab slot=\"tab\" link=\"account\">\n <kemet-icon icon=\"person-circle\"></kemet-icon> Account\n </kemet-tab>\n <kemet-tab slot=\"tab\" link=\"settings\">\n <kemet-icon icon=\"gear\"></kemet-icon> Settings\n </kemet-tab>\n <kemet-tab slot=\"tab\" link=\"dashboard\">\n <kemet-icon icon=\"columns-gap\"></kemet-icon> Dashboard\n </kemet-tab>\n <kemet-tab-panel panel=\"account\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Account</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n <kemet-tab-panel panel=\"settings\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Settings</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n <kemet-tab-panel panel=\"dashboard\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Dashboard</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p>Tellus integer feugiat scelerisque varius morbi. Non odio euismod lacinia at quis. Dictum sit amet justo donec. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Sed nisi lacus sed viverra tellus. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Arcu dui vivamus arcu felis bibendum ut tristique. Dictum at tempor commodo ullamcorper a. Nisl nunc mi ipsum faucibus vitae. In eu mi bibendum neque.</p>\n </kemet-tab-panel>\n </kemet-tabs>\n <hr />\n`;\n\nconst IndexTemplate = (args) => {\n const tabs = [];\n const panels = [];\n\n for (let i = 0; i < args.numOfTabs; i += 1) {\n tabs.push(html`<kemet-tab slot=\"tab\" ?closable=${args.closable}>This is tab ${i + 1}.</kemet-tab>`);\n }\n\n for (let i = 0; i < args.numOfTabs; i += 1) {\n panels.push(html`\n <kemet-tab-panel slot=\"panel\">\n <h3>Panel ${i + 1}</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n `);\n }\n\n return html`\n <kemet-tabs panel-effect=${ifDefined(args.panelEffect)} ?swipe=${args.swipe} ?divider=${args.divider} tabs-align=${ifDefined(args.tabsAlign)} ?hide-ink=${args.hideInk} placement=${ifDefined(args.placement)} measure-height-offset=${ifDefined(args.measureHeightOffset)}>\n ${tabs}\n ${panels}\n </kemet-tabs>\n `;\n};\n\nexport const SelectByName: Story = {\n render: (args: any) => NamedTemplate(args),\n args: {\n selected: 'settings',\n },\n};\n\nexport const SelectByIndex: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n },\n};\n\nexport const Closable: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n closable: true,\n },\n};\n\nexport const Fade: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n panelEffect: 'fade',\n },\n};\n\nexport const Slide: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n panelEffect: 'slide',\n },\n};\n\nexport const Divider: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n divider: true,\n },\n};\n\nexport const NoInk: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n hideInk: true,\n },\n};\n\nexport const Right: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'right',\n },\n};\n\nexport const Bottom: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'bottom',\n },\n};\n\nexport const Left: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'left',\n },\n};\n"]}

package/dist/components/kemet-tabs/kemet-tab-panel.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import { LitElement } from 'lit';
  * @prop {boolean} selected - Is true when a panel is selected
  * @prop {string} panel - Identifies the panel to be linked by a tab
  *
- * @cssproperty --kemet-tab-panel-fade-speed - The fade speed. Default: 0.5s.
+ * @cssproperty --kemet-tab-panel-fade-speed - The fade speed.
  *
  */
 export default class KemetTabPanel extends LitElement {

package/dist/components/kemet-tabs/kemet-tab-panel.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { stylesKemetTabPanel } from './styles';
  * @prop {boolean} selected - Is true when a panel is selected
  * @prop {string} panel - Identifies the panel to be linked by a tab
  *
- * @cssproperty --kemet-tab-panel-fade-speed - The fade speed. Default: 0.5s.
+ * @cssproperty --kemet-tab-panel-fade-speed - The fade speed.
  *
  */
 let KemetTabPanel = class KemetTabPanel extends LitElement {

package/dist/components/kemet-tabs/kemet-tab-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-tab-panel.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;GAYG;AAGH,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,UAAU;IAArD;;QAIE,aAAQ,GAAY,KAAK,CAAC;IAwB5B,CAAC;IAnBC,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAEtC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;CACF,CAAA;AA3BQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAPK,aAAa;IADjC,aAAa,CAAC,iBAAiB,CAAC;GACZ,aAAa,CA4BjC;eA5BoB,aAAa","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTabPanel } from './styles';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-tab-panel\n * @summary A panel in a set of tabs.\n \n @prop {boolean} selected - Is true when a panel is selected\n * @prop {string} panel - Identifies the panel to be linked by a tab\n \n @cssproperty --kemet-tab-panel-fade-speed - The fade speed~~. Default: 0.5s~~.\n \n /\n\n@customElement('kemet-tab-panel')\nexport default class KemetTabPanel extends LitElement {\n static styles = [stylesKemetTabPanel];\n\n @property({ type: Boolean, reflect: true })\n selected: boolean = false;\n\n @property({ type: String })\n panel: string;\n\n updated() {\n this.a11y();\n }\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n\n a11y() {\n this.setAttribute('role', 'tabpanel');\n\n if (this.selected) {\n this.setAttribute('tabindex', '0');\n } else {\n this.setAttribute('tabindex', '-1');\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tab-panel': KemetTabPanel\n }\n}\n\n"]}
1	+ {"version":3,"file":"kemet-tab-panel.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;GAYG;AAGH,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,UAAU;IAArD;;QAIE,aAAQ,GAAY,KAAK,CAAC;IAwB5B,CAAC;IAnBC,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAEtC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;CACF,CAAA;AA3BQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAPK,aAAa;IADjC,aAAa,CAAC,iBAAiB,CAAC;GACZ,aAAa,CA4BjC;eA5BoB,aAAa","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTabPanel } from './styles';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-tab-panel\n * @summary A panel in a set of tabs.\n \n @prop {boolean} selected - Is true when a panel is selected\n * @prop {string} panel - Identifies the panel to be linked by a tab\n \n @cssproperty --kemet-tab-panel-fade-speed - The fade speed.\n \n /\n\n@customElement('kemet-tab-panel')\nexport default class KemetTabPanel extends LitElement {\n static styles = [stylesKemetTabPanel];\n\n @property({ type: Boolean, reflect: true })\n selected: boolean = false;\n\n @property({ type: String })\n panel: string;\n\n updated() {\n this.a11y();\n }\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n\n a11y() {\n this.setAttribute('role', 'tabpanel');\n\n if (this.selected) {\n this.setAttribute('tabindex', '0');\n } else {\n this.setAttribute('tabindex', '-1');\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tab-panel': KemetTabPanel\n }\n}\n\n"]}

package/dist/components/kemet-tabs/kemet-tab.d.ts CHANGED Viewed

@@ -10,8 +10,8 @@ import { LitElement } from 'lit';
  * @prop {string} link - Links to a panel name
  * @prop {boolean} closable - Determines if the tab can be closed
  *
- * @cssproperty --kemet-tab-padding - The padding of the tab. Default: 1rem.
- * @cssproperty --kemet-tab-color - The color of the selected tab. Default: var(--kemet-color-background).
+ * @cssproperty --kemet-tab-padding - The padding of the tab.
+ * @cssproperty --kemet-tab-color - The color of the selected tab.
  *
  * @event kemet-tab-selected - Fires when a tab is selected
  * @event kemet-tab-close - Fires when the tab should close

package/dist/components/kemet-tabs/kemet-tab.js CHANGED Viewed

@@ -14,8 +14,8 @@ import { stylesKemetTab } from './styles';
  * @prop {string} link - Links to a panel name
  * @prop {boolean} closable - Determines if the tab can be closed
  *
- * @cssproperty --kemet-tab-padding - The padding of the tab. Default: 1rem.
- * @cssproperty --kemet-tab-color - The color of the selected tab. Default: var(--kemet-color-background).
+ * @cssproperty --kemet-tab-padding - The padding of the tab.
+ * @cssproperty --kemet-tab-color - The color of the selected tab.
  *
  * @event kemet-tab-selected - Fires when a tab is selected
  * @event kemet-tab-close - Fires when the tab should close

package/dist/components/kemet-tabs/kemet-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-tab.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C;;;;;;;;;;;;;;;;;GAiBG;AAGH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAIE,aAAQ,GAAY,KAAK,CAAC;IAmD5B,CAAC;IA1CC,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,aAAa,EAAE;KACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC5C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,kCAAkC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC;SAC1F;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,cAAc;QACZ,SAAS,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;CACF,CAAA;AAtDQ,eAAM,GAAG,CAAC,cAAc,CAAC,CAAC;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACV;AAVC,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAuD5B;eAvDoB,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTab } from './styles';\n\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-tab\n * @summary A tab in a set of tabs.\n \n @prop {boolean} selected - Is true when the tab is selected\n * @prop {string} link - Links to a panel name\n * @prop {boolean} closable - Determines if the tab can be closed\n \n @cssproperty --kemet-tab-padding - The padding of the tab~~. Default: 1rem~~.\n * @cssproperty --kemet-tab-color - The color of the selected tab~~. Default: var(--kemet-color-background)~~.\n \n @event kemet-tab-selected - Fires when a tab is selected\n * @event kemet-tab-close - Fires when the tab should close\n \n /\n\n@customElement('kemet-tab')\nexport default class KemetTab extends LitElement {\n static styles = [stylesKemetTab];\n\n @property({ type: Boolean, reflect: true })\n selected: boolean = false;\n\n @property({ type: String })\n link: string;\n\n @property({ type: Boolean })\n closable: boolean;\n\n\n firstUpdated() {\n this.addEventListener('click', this.select.bind(this));\n }\n\n updated() {\n this.a11y();\n }\n\n render() {\n return html`\n <slot></slot>\n ${this.makeCloseable()}\n `;\n }\n\n select() {\n emitEvent(this, 'kemet-tab-selected', this);\n }\n\n a11y() {\n this.setAttribute('role', 'tab');\n\n if (this.selected) {\n this.setAttribute('aria-selected', 'true');\n this.setAttribute('tabindex', '0');\n } else {\n this.setAttribute('aria-selected', 'false');\n this.setAttribute('tabindex', '-1');\n }\n }\n\n makeCloseable() {\n if (this.closable) {\n return html`<kemet-icon icon=\"x-lg\" @click=${() => this.handleClosable()}></kemet-icon>`;\n }\n\n return null;\n }\n\n handleClosable() {\n emitEvent(this, 'kemet-tab-close', this);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tab': KemetTab\n }\n}\n\n"]}
1	+ {"version":3,"file":"kemet-tab.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C;;;;;;;;;;;;;;;;;GAiBG;AAGH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAIE,aAAQ,GAAY,KAAK,CAAC;IAmD5B,CAAC;IA1CC,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,aAAa,EAAE;KACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC5C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,kCAAkC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC;SAC1F;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,cAAc;QACZ,SAAS,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;CACF,CAAA;AAtDQ,eAAM,GAAG,CAAC,cAAc,CAAC,CAAC;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACV;AAVC,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAuD5B;eAvDoB,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTab } from './styles';\n\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-tab\n * @summary A tab in a set of tabs.\n \n @prop {boolean} selected - Is true when the tab is selected\n * @prop {string} link - Links to a panel name\n * @prop {boolean} closable - Determines if the tab can be closed\n \n @cssproperty --kemet-tab-padding - The padding of the tab.\n * @cssproperty --kemet-tab-color - The color of the selected tab.\n \n @event kemet-tab-selected - Fires when a tab is selected\n * @event kemet-tab-close - Fires when the tab should close\n \n /\n\n@customElement('kemet-tab')\nexport default class KemetTab extends LitElement {\n static styles = [stylesKemetTab];\n\n @property({ type: Boolean, reflect: true })\n selected: boolean = false;\n\n @property({ type: String })\n link: string;\n\n @property({ type: Boolean })\n closable: boolean;\n\n\n firstUpdated() {\n this.addEventListener('click', this.select.bind(this));\n }\n\n updated() {\n this.a11y();\n }\n\n render() {\n return html`\n <slot></slot>\n ${this.makeCloseable()}\n `;\n }\n\n select() {\n emitEvent(this, 'kemet-tab-selected', this);\n }\n\n a11y() {\n this.setAttribute('role', 'tab');\n\n if (this.selected) {\n this.setAttribute('aria-selected', 'true');\n this.setAttribute('tabindex', '0');\n } else {\n this.setAttribute('aria-selected', 'false');\n this.setAttribute('tabindex', '-1');\n }\n }\n\n makeCloseable() {\n if (this.closable) {\n return html`<kemet-icon icon=\"x-lg\" @click=${() => this.handleClosable()}></kemet-icon>`;\n }\n\n return null;\n }\n\n handleClosable() {\n emitEvent(this, 'kemet-tab-close', this);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tab': KemetTab\n }\n}\n\n"]}

package/dist/components/kemet-tabs/kemet-tabs.d.ts CHANGED Viewed

@@ -28,13 +28,13 @@ import { TypePanelEffect, TypePlacement, TypeTabsAlign } from './types';
  * @csspart ink - The ink element.
  * @csspart divider - The divider element.
  *
- * @cssproperty --kemet-tabs-ink-size - The thickness of the ink. Default: 6px.
- * @cssproperty --kemet-tabs-ink-radius - The radius on the ink. Default:  6px.
- * @cssproperty --kemet-tabs-ink-color - The color of the ink. Default:  var(--kemet-color-background).
- * @cssproperty --kemet-tabs-divider-size - The thickness of the divider. Default: 1px.
- * @cssproperty --kemet-tabs-divider-color - The color of the divider. Default:  var(--kemet-color-gray4).
- * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels. Default:  0.5s.
- * @cssproperty --kemet-tabs-spacer - The space between tabs and panels. Default:  1rem.
+ * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.
+ * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.
+ * @cssproperty --kemet-tabs-ink-color - The color of the ink.
+ * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.
+ * @cssproperty --kemet-tabs-divider-color - The color of the divider.
+ * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.
+ * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.
  *
  * @event kemet-tab-changed - Fires when a tab is changed
  *
@@ -61,7 +61,7 @@ export default class KemetTabs extends LitElement {
     constructor();
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
-    updated(): void;
+    updated(prevProps: any): void;
     handleLinksSlotChange(): void;
     handlePanelsSlotChange(): void;
     handleLeftArrow(): void;

package/dist/components/kemet-tabs/kemet-tabs.js CHANGED Viewed

@@ -33,13 +33,13 @@ import { customElement, property, query, state } from 'lit/decorators.js';
  * @csspart ink - The ink element.
  * @csspart divider - The divider element.
  *
- * @cssproperty --kemet-tabs-ink-size - The thickness of the ink. Default: 6px.
- * @cssproperty --kemet-tabs-ink-radius - The radius on the ink. Default:  6px.
- * @cssproperty --kemet-tabs-ink-color - The color of the ink. Default:  var(--kemet-color-background).
- * @cssproperty --kemet-tabs-divider-size - The thickness of the divider. Default: 1px.
- * @cssproperty --kemet-tabs-divider-color - The color of the divider. Default:  var(--kemet-color-gray4).
- * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels. Default:  0.5s.
- * @cssproperty --kemet-tabs-spacer - The space between tabs and panels. Default:  1rem.
+ * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.
+ * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.
+ * @cssproperty --kemet-tabs-ink-color - The color of the ink.
+ * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.
+ * @cssproperty --kemet-tabs-divider-color - The color of the divider.
+ * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.
+ * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.
  *
  * @event kemet-tab-changed - Fires when a tab is changed
  *
@@ -84,9 +84,17 @@ let KemetTabs = class KemetTabs extends LitElement {
       </section>
     `;
     }
-    updated() {
+    updated(prevProps) {
         this.determineFade();
         this.determineStacked();
+        if (prevProps.get('selected') && prevProps.get('selected') !== this.selected) {
+            this.selectTab();
+            this.selectPanel();
+        }
+        if (typeof prevProps.get('selectedIndex') === 'number' && prevProps.get('selectedIndex') !== this.selected) {
+            this.selectTab();
+            this.selectPanel();
+        }
     }
     handleLinksSlotChange() {
         const tabs = this.querySelectorAll('kemet-tab');

package/dist/components/kemet-tabs/kemet-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-tabs.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tabs.ts"],"names":[],"mappings":";AAAA,iCAAiC;AACjC,yCAAyC;AACzC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAGH,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,UAAU;IAuD/C;QACE,KAAK,EAAE,CAAC;QAjDV,kBAAa,GAAW,CAAC,CAAC;QAG1B,kBAAa,GAAW,CAAC,CAAC;QAG1B,gBAAW,GAAoB,MAAM,CAAC;QAMtC,cAAS,GAAkB,KAAK,CAAC;QAMjC,cAAS,GAAkB,QAAQ,CAAC;QAMpC,YAAO,GAAY,KAAK,CAAC;QA2BvB,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/E,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,YAAY;QACV,sBAAsB;QACtB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAElB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,cAAc,EAAE;;;yCAGY,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE;;UAEjE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;;QAEvB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QACpB,IAAI,CAAC,WAAW,EAAE;uEAC6C,IAAI,CAAC,aAAa;;2CAE9C,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE;;;KAGzE,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,qBAAqB;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAChD,IAAI,KAAK,GAAG,CAAC,CAAC;QAEd,IAAI,CAAC,OAAO,CAAC,CAAC,GAAsB,EAAE,EAAE;YACtC,gEAAgE;YAChE,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;YAClB,KAAK,IAAI,CAAC,CAAC;YAEX,yBAAyB;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAElC,uBAAuB;YACvB,GAAG,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;QACzE,CAAC,CAAC,CAAC;QAEH,0CAA0C;QAC1C,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QAEvD,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC,EAAE,CAAC,CAAC,CAAC;QACN,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,sBAAsB;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;QACxD,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC9D,IAAI,KAAK,GAAG,CAAC,CAAC;QAEd,MAAM,CAAC,OAAO,CAAC,CAAC,KAA6B,EAAE,EAAE;YAC/C,kEAAkE;YAClE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;YACpB,KAAK,IAAI,CAAC,CAAC;YAEX,2BAA2B;YAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QAEH,0CAA0C;QAC1C,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QAE3D,oBAAoB;QACpB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,YAAY,CAAC,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;YAC1F,YAAY,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;SACzF;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,eAAe;QACb,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC5E,MAAM,eAAe,GAAG,eAAe,CAAC,sBAAsB,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE/D,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC;SAC/E;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAChE;QAED,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,eAAe,CAAC,UAAU,GAAG,EAAE,CAAC;SACzD;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC/F,MAAM,WAAW,GAAG,eAAe,CAAC,kBAAkB,CAAC;QACvD,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE/D,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC;SACvE;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;gBACvD,CAAC,CAAC,aAAa,GAAG,CAAC;gBACnB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;SAC1B;QAED,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,WAAW,CAAC,UAAU,GAAG,EAAE,CAAC;SACrD;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,cAAc,CAAC,KAAK;QAClB,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAErC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAClC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QAEvB,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,GAAG,CAAC,MAAM,EAAE,CAAC;IACf,CAAC;IAED,OAAO,CAAC,QAAQ;QACd,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,IAAI,CAAC;SACb;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,QAAQ,KAAK,OAAO,EAAE;YACjG,OAAO,IAAI,CAAA,gCAAgC,IAAI,CAAC,GAAG,CAAC,KAAK,0BAA0B,IAAI,CAAC,GAAG,CAAC,SAAS,WAAW,CAAC;SAClH;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,QAAQ,KAAK,MAAM,EAAE;YAChG,OAAO,IAAI,CAAA,iCAAiC,IAAI,CAAC,GAAG,CAAC,MAAM,0BAA0B,IAAI,CAAC,GAAG,CAAC,SAAS,WAAW,CAAC;SACpH;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,IAAI,CAAA,4BAA4B,CAAC;SACzC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,oDAAoD,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC;SAC7G;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,qDAAqD,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;SAC/G;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,SAAS;QACP,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACnH,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAEtD,uDAAuD;QACvD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACxB,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;gBAEzC,IAAI,OAAO,KAAK,IAAI,CAAC,QAAQ,EAAE;oBAC7B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACpB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;oBAExB,IAAI,CAAC,GAAG,GAAG;wBACT,KAAK,EAAE,GAAG,GAAG,CAAC,WAAW,IAAI;wBAC7B,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,IAAI;wBAC/B,SAAS,EAAE,GAAG,GAAG,CAAC,UAAU,GAAG,cAAc,IAAI;wBACjD,SAAS,EAAE,GAAG,GAAG,CAAC,SAAS,IAAI;qBAChC,CAAC;oBAEF,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC,UAAU,GAAG,cAAc,CAAC;iBACzD;qBAAM;oBACL,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACtB;YACH,CAAC,CAAC,CAAC;YAEH,4BAA4B;SAC7B;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACxB,IAAI,IAAI,CAAC,aAAa,KAAK,GAAG,CAAC,KAAK,EAAE;oBACpC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;oBAEpB,IAAI,CAAC,GAAG,GAAG;wBACT,KAAK,EAAE,GAAG,GAAG,CAAC,WAAW,IAAI;wBAC7B,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,IAAI;wBAC/B,SAAS,EAAE,GAAG,GAAG,CAAC,UAAU,GAAG,cAAc,IAAI;wBACjD,SAAS,EAAE,GAAG,GAAG,CAAC,SAAS,IAAI;qBAChC,CAAC;oBAEF,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC,UAAU,GAAG,cAAc,CAAC;iBACzD;qBAAM;oBACL,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACtB;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,WAAW;QACT,uDAAuD;QACvD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC5B,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;gBAE9C,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,CAAC,EAAE;oBACpD,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;iBAC7B;gBAED,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE;oBAC3D,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;iBACjC;gBAED,IAAI,SAAS,KAAK,IAAI,CAAC,QAAQ,EAAE;oBAC/B,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACtB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;iBACpC;qBAAM;oBACL,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACxB;YACH,CAAC,CAAC,CAAC;YAEH,4BAA4B;SAC7B;aAAM;YACL,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC5B,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,CAAC,EAAE;oBACpD,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;iBAC7B;gBAED,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE;oBAC3D,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;iBACjC;gBAED,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,KAAK,EAAE;oBACtC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;iBACtC;qBAAM;oBACL,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACxB;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,iBAAiB;QACf,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,eAAe,EAAE,IAAI,CAAC,aAAa;SACpC,CAAC;QAEF,SAAS,CAAC,IAAI,EAAE,mBAAmB,EAAE,OAAO,CAAC,CAAC;IAChD,CAAC;IAED,iBAAiB,CAAC,KAAK;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,qDAAqD;YACrD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SACnD;aAAM;YACL,oCAAoC;YACpC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;SACzC;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5B,yCAAyC;YACzC,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM;gBAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5B,yCAAyC;YACzC,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;gBAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACrE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC;QAC5C,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAEvD,IAAI,cAAc,GAAG,CAAC,CAAC;QAEvB,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAC1B,cAAc,IAAI,GAAG,CAAC,WAAW,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,IAAI,cAAc,GAAG,kBAAkB,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,EAAE;YACpG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE;YAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnH,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAE5D,IAAI,eAAe,EAAE;gBACnB,IAAI,CAAC,GAAG,GAAG;oBACT,KAAK,EAAE,GAAG,eAAe,CAAC,WAAW,IAAI;oBACzC,MAAM,EAAE,GAAG,eAAe,CAAC,YAAY,IAAI;oBAC3C,SAAS,EAAE,GAAG,eAAe,CAAC,UAAU,GAAG,cAAc,IAAI;oBAC7D,SAAS,EAAE,GAAG,eAAe,CAAC,SAAS,IAAI;iBAC5C,CAAC;aACH;YAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAEzB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;aACxC;iBAAM;gBACL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;aAC7C;SACF;IACH,CAAC;IAED,YAAY,CAAC,SAAS,EAAE,UAAU;QAChC,IAAI,SAAS,EAAE;YACb,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,SAAS,IAAI,CAA2B,CAAC;YAC7F,IAAI,aAAa;gBAAE,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;SACvE;aAAM;YACL,IAAI,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;gBAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;SAC3F;IACH,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,QAAQ,KAAK,CAAC,GAAG,EAAE;gBACjB,KAAK,MAAM;oBACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;oBAClD,MAAM;gBACR,KAAK,KAAK;oBACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;oBACrE,MAAM;gBACR,KAAK,YAAY;oBACf,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,kBAAkB,CAAC;oBACrF,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;oBAEhF,IAAI,QAAQ,EAAE;wBACZ,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;qBAC1B;oBACD,MAAM;gBACR,KAAK,WAAW;oBACd,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,sBAAsB,CAAC;oBAC7F,MAAM,YAAY,GAAG,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;oBAE5F,IAAI,YAAY,EAAE;wBAChB,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;qBAC9B;oBACD,MAAM;gBACR,OAAO,CAAC,CAAC,MAAM;aAChB;YAED,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;SAC3D;aAAM;YACL,QAAQ,KAAK,CAAC,GAAG,EAAE;gBACjB,KAAK,MAAM;oBACT,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;oBACvB,MAAM;gBACR,KAAK,KAAK;oBACR,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;oBAC1C,MAAM;gBACR,KAAK,YAAY;oBACf,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC7C,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC;qBACzB;yBAAM;wBACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;qBAC3C;oBACD,MAAM;gBACR,KAAK,WAAW;oBACd,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE;wBAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;qBACxB;yBAAM;wBACL,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC;qBACzB;oBACD,MAAM;gBACR,OAAO,CAAC,CAAC,MAAM;aAChB;YAED,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;SACvC;IACH,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACxC,CAAC;IAED,eAAe,CAAC,KAAK;;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QACrC,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QAE/B,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAAC,0CAAE,kBAAkB,CAAC;QACxF,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QACrE,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAAC,0CAAE,sBAAsB,CAAC;QAChG,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAEjF,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACrC,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,IAAI,IAAI;wBAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;iBAChC;qBAAM;oBACL,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM;wBAAE,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC;iBACpE;aACF;iBAAM;gBACL,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,IAAI,QAAQ;wBAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;iBACxC;qBAAM;oBACL,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC;wBAAE,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC;iBACrD;aACF;YAED,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;CACF,CAAA;AAtgBQ,gBAAM,GAAG,CAAC,eAAe,CAAC,CAAC;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACzB;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CAC/B;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACT;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAC/B;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;0CAC1B;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACzB;AAGlB;IADC,KAAK,EAAE;uCACI;AAGZ;IADC,KAAK,EAAE;yCACM;AAGd;IADC,KAAK,EAAE;wCACa;AAGrB;IADC,KAAK,EAAE;wCACa;AAGrB;IADC,KAAK,EAAE;wCACW;AAGnB;IADC,KAAK,CAAC,SAAS,CAAC;gDACU;AApDR,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAugB7B;eAvgBoB,SAAS","sourcesContent":["/* eslint-disable no-lonely-if /\n/ eslint-disable no-case-declarations /\nimport { LitElement, html } from 'lit';\nimport { stylesKemetTabs } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { KemetTabInterface, KemetTabPanelInterface, TypePanelEffect, TypePlacement, TypeTabsAlign } from './types';\n\n/\n @since 1.0.0\n * @status stable\n \n @tagname kemet-tabs\n * @summary A group of tabs and panels.\n \n @prop {string} selected - The selected tab by name\n * @prop {number} selectedIndex - The selected tab by index\n * @prop {number} panelPosition - Positions the current panel\n * @prop {string} panelEffect - The transition effect for panels\n * @prop {boolean} swipe - Determines whether or not to enable swipe behavior\n * @prop {string} placement - Places the tabs to the top, right, bottom, or left\n * @prop {boolean} divider - Determines whether or not to show a divider line\n * @prop {string} tabsAlign - Spacing alignment of the tabs\n * @prop {object} ink - An object that contains information about the ink\n * @prop {boolean} hideInk - Determines whether or not to hide the ink\n * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container\n \n @slot tab - Place the tabs here.\n * @slot panel - Place the panels here.\n \n @csspart links - The container for the tablist.\n * @csspart tablist - Contains the tabs.\n * @csspart panels - Contains the panels.\n * @csspart ink - The ink element.\n * @csspart divider - The divider element.\n \n @cssproperty --kemet-tabs-ink-size - The thickness of the ink. Default: 6px.\n * @cssproperty --kemet-tabs-ink-radius - The radius on the ink. Default: 6px.\n * @cssproperty --kemet-tabs-ink-color - The color of the ink. Default: var(--kemet-color-background).\n * @cssproperty --kemet-tabs-divider-size - The thickness of the divider. Default: 1px.\n * @cssproperty --kemet-tabs-divider-color - The color of the divider. Default: var(--kemet-color-gray4).\n * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels. Default: 0.5s.\n * @cssproperty --kemet-tabs-spacer - The space between tabs and panels. Default: 1rem.\n \n @event kemet-tab-changed - Fires when a tab is changed\n \n /\n\n@customElement('kemet-tabs')\nexport default class KemetTabs extends LitElement {\n static styles = [stylesKemetTabs];\n\n @property({ type: String, reflect: true })\n selected: string;\n\n @property({ type: Number })\n selectedIndex: number = 0;\n\n @property({ type: Number })\n panelPosition: number = 0;\n\n @property({ type: String, reflect: true, attribute: 'panel-effect' })\n panelEffect: TypePanelEffect = 'none';\n\n @property({ type: Boolean })\n swipe: boolean;\n\n @property({ type: String, reflect: true })\n placement: TypePlacement = 'top';\n\n @property({ type: Boolean })\n divider: boolean;\n\n @property({ type: String, reflect: true, attribute: 'tabs-align' })\n tabsAlign: TypeTabsAlign = 'center';\n\n @property({ type: Object })\n ink: any;\n\n @property({ type: Boolean, attribute: 'hide-ink' })\n hideInk: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n overflow: boolean;\n\n @state()\n tabs: any[];\n\n @state()\n panels: any[];\n\n @state()\n xDown: number \| null;\n\n @state()\n yDown: number \| null;\n\n @state()\n links: HTMLElement;\n\n @query('#panels')\n panelsElement: HTMLElement;\n\n\n constructor() {\n super();\n\n this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));\n this.addEventListener('kemet-tab-close', this.handleTabClose.bind(this));\n window.addEventListener('resize', this.handleResize.bind(this));\n }\n\n firstUpdated() {\n // standard properties\n this.tabs = [];\n this.panels = [];\n this.xDown = null;\n this.yDown = null;\n\n this.links = this.shadowRoot.getElementById('links');\n }\n\n render() {\n return html`\n ${this.makeLeftArrow()}\n ${this.makeRightArrow()}\n <div id=\"links\" part=\"links\">\n <div part='tablist' role=\"tablist\">\n <slot name=\"tab\" @slotchange=${() => this.handleLinksSlotChange()}></slot>\n </div>\n ${this.makeInk('links')}\n </div>\n ${this.makeInk('host')}\n ${this.makeDivider()}\n <section id=\"panels\" part=\"panels\" style=\"transform:translateX(${this.panelPosition}px);\">\n <div>\n <slot name=\"panel\" @slotchange=${() => this.handlePanelsSlotChange()}></slot>\n </div>\n </section>\n `;\n }\n\n updated() {\n this.determineFade();\n this.determineStacked();\n }\n\n handleLinksSlotChange() {\n const tabs = this.querySelectorAll('kemet-tab');\n let index = 0;\n\n tabs.forEach((tab: KemetTabInterface) => {\n // give each tab an index to select by if link/panel is not used\n tab.index = index;\n index += 1;\n\n // store the list of tabs\n this.tabs = this.tabs.concat(tab);\n\n // add keyboard support\n tab.addEventListener('keydown', event => this.handleTabKeydown(event));\n });\n\n // default to the first tab/panel selected\n if (this.tabs.length > 0) this.tabs[0].selected = true;\n\n setTimeout(() => {\n this.selectTab();\n }, 1);\n this.determineOverflow();\n }\n\n handlePanelsSlotChange() {\n const panels = this.querySelectorAll('kemet-tab-panel');\n const panelElement = this.shadowRoot.getElementById('panels');\n let index = 0;\n\n panels.forEach((panel: KemetTabPanelInterface) => {\n // give each panel an index to select by if link/panel is not used\n panel.index = index;\n index += 1;\n\n // store the list of panels\n this.panels = this.panels.concat(panel);\n });\n\n // default to the first tab/panel selected\n if (this.panels.length > 0) this.panels[0].selected = true;\n\n // add swipe support\n if (this.swipe) {\n panelElement.addEventListener('touchstart', event => this.handleTouchStart(event), false);\n panelElement.addEventListener('touchmove', event => this.handleTouchMove(event), false);\n }\n\n this.selectPanel();\n }\n\n handleLeftArrow() {\n const selectedElement = this.tabs.find(tab => tab.selected) \|\| this.tabs[0];\n const previousElement = selectedElement.previousElementSibling;\n const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n if (this.selected) {\n this.selected = previousElement ? previousElement.link : selectedElement.link;\n } else {\n this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;\n }\n\n if (previousElement) {\n this.links.scrollLeft = previousElement.offsetLeft - 20;\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n handleRightArrow() {\n const selectedElement = this.tabs.find(tab => tab.selected) \|\| this.tabs[this.tabs.length - 1];\n const nextElement = selectedElement.nextElementSibling;\n const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n if (this.selected) {\n this.selected = nextElement ? nextElement.link : selectedElement.link;\n } else {\n this.selectedIndex = selectedIndex < this.tabs.length - 1\n ? selectedIndex + 1\n : this.tabs.length - 1;\n }\n\n if (nextElement) {\n this.links.scrollLeft = nextElement.offsetLeft - 20;\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n handleTabClose(event) {\n const tab = event.detail;\n const panel = this.panels[tab.index];\n\n this.selected = this.tabs[0].link;\n this.selectedIndex = 0;\n\n panel.remove();\n tab.remove();\n }\n\n makeInk(location) {\n if (this.hideInk) {\n return null;\n }\n\n if ((this.placement === 'top' \|\| this.placement === 'bottom') && this.ink && location === 'links') {\n return html`<div part=\"ink\" style=\"width:${this.ink.width}; transform:translateX(${this.ink.positionX})\"></div>`;\n }\n\n if ((this.placement === 'left' \|\| this.placement === 'right') && this.ink && location === 'host') {\n return html`<div part=\"ink\" style=\"height:${this.ink.height}; transform:translateY(${this.ink.positionY})\"></div>`;\n }\n\n return null;\n }\n\n makeDivider() {\n if (this.divider) {\n return html`<div part=\"divider\"></div>`;\n }\n\n return null;\n }\n\n makeLeftArrow() {\n if (this.overflow) {\n return html`<kemet-icon icon='chevron-left' size=\"20\" @click=${() => this.handleLeftArrow()}></kemet-icon>`;\n }\n\n return null;\n }\n\n makeRightArrow() {\n if (this.overflow) {\n return html`<kemet-icon icon='chevron-right' size=\"20\" @click=${() => this.handleRightArrow()}></kemet-icon>`;\n }\n\n return null;\n }\n\n selectTab() {\n const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n const overflowOffset = this.overflow ? marginLeft : 0;\n\n // if the user uses the selected attribute select by it\n if (this.selected) {\n this.tabs.forEach((tab) => {\n const tabName = tab.getAttribute('link');\n\n if (tabName === this.selected) {\n tab.selected = true;\n this.selected = tabName;\n\n this.ink = {\n width: `${tab.offsetWidth}px`,\n height: `${tab.offsetHeight}px`,\n positionX: `${tab.offsetLeft - overflowOffset}px`,\n positionY: `${tab.offsetTop}px`,\n };\n\n this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n } else {\n tab.selected = false;\n }\n });\n\n // otherwise select by index\n } else {\n this.tabs.forEach((tab) => {\n if (this.selectedIndex === tab.index) {\n tab.selected = true;\n\n this.ink = {\n width: `${tab.offsetWidth}px`,\n height: `${tab.offsetHeight}px`,\n positionX: `${tab.offsetLeft - overflowOffset}px`,\n positionY: `${tab.offsetTop}px`,\n };\n\n this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n } else {\n tab.selected = false;\n }\n });\n }\n }\n\n selectPanel() {\n // if the user uses the selected attribute select by it\n if (this.selected) {\n this.panels.forEach((panel) => {\n const panelName = panel.getAttribute('panel');\n\n if (this.panelEffect === 'fade' && panel.index !== 0) {\n panel.classList.add('push');\n }\n\n if (this.placement === 'left' \|\| this.placement === 'right') {\n panel.classList.add('vertical');\n }\n\n if (panelName === this.selected) {\n panel.selected = true;\n this.animatePanel(panelName, null);\n } else {\n panel.selected = false;\n }\n });\n\n // otherwise select by index\n } else {\n this.panels.forEach((panel) => {\n if (this.panelEffect === 'fade' && panel.index !== 0) {\n panel.classList.add('push');\n }\n\n if (this.placement === 'left' \|\| this.placement === 'right') {\n panel.classList.add('vertical');\n }\n\n if (this.selectedIndex === panel.index) {\n panel.selected = true;\n this.animatePanel(null, panel.index);\n } else {\n panel.selected = false;\n }\n });\n }\n }\n\n dispatchTabChange() {\n const details = {\n currentTabName: this.selected,\n currentTabIndex: this.selectedIndex,\n };\n\n emitEvent(this, 'kemet-tab-changed', details);\n }\n\n tabSelectedChange(event) {\n if (this.selected) {\n // if selected has been set, use the string attribute\n this.selected = event.detail.getAttribute('link');\n } else {\n // otherwise use the generated index\n this.selectedIndex = event.detail.index;\n }\n\n this.selectTab();\n this.selectPanel();\n this.dispatchTabChange();\n }\n\n\n determineFade() {\n this.panels.forEach((panel) => {\n // add fade class if panel effect is fade\n if (this.panelEffect === 'fade') panel.classList.add('fade');\n });\n }\n\n determineStacked() {\n this.panels.forEach((panel) => {\n // add fade class if panel effect is fade\n if (this.panelEffect === 'stacked') panel.classList.add('stacked');\n });\n }\n\n determineOverflow() {\n const tabsContainerWidth = this.offsetWidth;\n const tabElements = this.querySelectorAll('kemet-tab');\n\n let totalTabsWidth = 0;\n\n tabElements.forEach((tab) => {\n totalTabsWidth += tab.offsetWidth;\n });\n\n if (totalTabsWidth > tabsContainerWidth && (this.placement === 'top' \|\| this.placement === 'bottom')) {\n this.overflow = true;\n } else {\n this.overflow = false;\n }\n }\n\n handleResize() {\n if (this.tabs && this.panels) {\n const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n const overflowOffset = this.overflow ? marginLeft : 0;\n const selectedElement = this.tabs.find(tab => tab.selected);\n\n if (selectedElement) {\n this.ink = {\n width: `${selectedElement.offsetWidth}px`,\n height: `${selectedElement.offsetHeight}px`,\n positionX: `${selectedElement.offsetLeft - overflowOffset}px`,\n positionY: `${selectedElement.offsetTop}px`,\n };\n }\n\n this.determineOverflow();\n\n if (this.selected) {\n this.animatePanel(this.selected, null);\n } else {\n this.animatePanel(null, this.selectedIndex);\n }\n }\n }\n\n animatePanel(panelName, panelIndex) {\n if (panelName) {\n const selectedPanel = this.querySelector(`[panel=\"${panelName}\"]`) as KemetTabPanelInterface;\n if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;\n } else {\n if (this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;\n }\n }\n\n handleTabKeydown(event) {\n if (this.selected) {\n switch (event.key) {\n case 'Home':\n this.selected = this.tabs[0].getAttribute('link');\n break;\n case 'End':\n this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');\n break;\n case 'ArrowRight':\n const nextLinkElement = this.querySelector('kemet-tab[selected]').nextElementSibling;\n const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;\n\n if (nextLink) {\n this.selected = nextLink;\n }\n break;\n case 'ArrowLeft':\n const previousLinkElement = this.querySelector('kemet-tab[selected]').previousElementSibling;\n const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;\n\n if (previousLink) {\n this.selected = previousLink;\n }\n break;\n default: break;\n }\n\n this.tabs.find(tab => tab.link === this.selected).focus();\n } else {\n switch (event.key) {\n case 'Home':\n this.selectedIndex = 0;\n break;\n case 'End':\n this.selectedIndex = this.tabs.length - 1;\n break;\n case 'ArrowRight':\n if (this.selectedIndex < this.tabs.length - 1) {\n this.selectedIndex += 1;\n } else {\n this.selectedIndex = this.tabs.length - 1;\n }\n break;\n case 'ArrowLeft':\n if (this.selectedIndex < 1) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex -= 1;\n }\n break;\n default: break;\n }\n\n this.tabs[this.selectedIndex].focus();\n }\n }\n\n handleTouchStart(event) {\n this.xDown = event.touches[0].clientX;\n this.yDown = event.touches[0].clientY;\n }\n\n handleTouchMove(event) {\n if (!this.xDown \|\| !this.yDown) {\n return;\n }\n\n const xUp = event.touches[0].clientX;\n const yUp = event.touches[0].clientY;\n const xDiff = this.xDown - xUp;\n const yDiff = this.yDown - yUp;\n\n const nextElement = this.querySelector('kemet-tab-panel[selected]')?.nextElementSibling;\n const next = nextElement ? nextElement.getAttribute('panel') : false;\n const previousElement = this.querySelector('kemet-tab-panel[selected]')?.previousElementSibling;\n const previous = previousElement ? previousElement.getAttribute('panel') : false;\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) {\n if (this.selected) {\n if (next) this.selected = next;\n } else {\n if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;\n }\n } else {\n if (this.selected) {\n if (previous) this.selected = previous;\n } else {\n if (this.selectedIndex > 0) this.selectedIndex -= 1;\n }\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n this.xDown = null;\n this.yDown = null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tabs': KemetTabs\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-tabs.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-lonely-if /\n/ eslint-disable no-case-declarations /\nimport { LitElement, html } from 'lit';\nimport { stylesKemetTabs } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { KemetTabInterface, KemetTabPanelInterface, TypePanelEffect, TypePlacement, TypeTabsAlign } from './types';\n\n/\n @since 1.0.0\n * @status stable\n \n @tagname kemet-tabs\n * @summary A group of tabs and panels.\n \n @prop {string} selected - The selected tab by name\n * @prop {number} selectedIndex - The selected tab by index\n * @prop {number} panelPosition - Positions the current panel\n * @prop {string} panelEffect - The transition effect for panels\n * @prop {boolean} swipe - Determines whether or not to enable swipe behavior\n * @prop {string} placement - Places the tabs to the top, right, bottom, or left\n * @prop {boolean} divider - Determines whether or not to show a divider line\n * @prop {string} tabsAlign - Spacing alignment of the tabs\n * @prop {object} ink - An object that contains information about the ink\n * @prop {boolean} hideInk - Determines whether or not to hide the ink\n * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container\n \n @slot tab - Place the tabs here.\n * @slot panel - Place the panels here.\n \n @csspart links - The container for the tablist.\n * @csspart tablist - Contains the tabs.\n * @csspart panels - Contains the panels.\n * @csspart ink - The ink element.\n * @csspart divider - The divider element.\n \n @cssproperty --kemet-tabs-ink-size - The thickness of the ink.\n * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.\n * @cssproperty --kemet-tabs-ink-color - The color of the ink.\n * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.\n * @cssproperty --kemet-tabs-divider-color - The color of the divider.\n * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.\n * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.\n \n @event kemet-tab-changed - Fires when a tab is changed\n \n /\n\n@customElement('kemet-tabs')\nexport default class KemetTabs extends LitElement {\n static styles = [stylesKemetTabs];\n\n @property({ type: String, reflect: true })\n selected: string;\n\n @property({ type: Number })\n selectedIndex: number = 0;\n\n @property({ type: Number })\n panelPosition: number = 0;\n\n @property({ type: String, reflect: true, attribute: 'panel-effect' })\n panelEffect: TypePanelEffect = 'none';\n\n @property({ type: Boolean })\n swipe: boolean;\n\n @property({ type: String, reflect: true })\n placement: TypePlacement = 'top';\n\n @property({ type: Boolean })\n divider: boolean;\n\n @property({ type: String, reflect: true, attribute: 'tabs-align' })\n tabsAlign: TypeTabsAlign = 'center';\n\n @property({ type: Object })\n ink: any;\n\n @property({ type: Boolean, attribute: 'hide-ink' })\n hideInk: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n overflow: boolean;\n\n @state()\n tabs: any[];\n\n @state()\n panels: any[];\n\n @state()\n xDown: number \| null;\n\n @state()\n yDown: number \| null;\n\n @state()\n links: HTMLElement;\n\n @query('#panels')\n panelsElement: HTMLElement;\n\n\n constructor() {\n super();\n\n this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));\n this.addEventListener('kemet-tab-close', this.handleTabClose.bind(this));\n window.addEventListener('resize', this.handleResize.bind(this));\n }\n\n firstUpdated() {\n // standard properties\n this.tabs = [];\n this.panels = [];\n this.xDown = null;\n this.yDown = null;\n\n this.links = this.shadowRoot.getElementById('links');\n }\n\n render() {\n return html`\n ${this.makeLeftArrow()}\n ${this.makeRightArrow()}\n <div id=\"links\" part=\"links\">\n <div part='tablist' role=\"tablist\">\n <slot name=\"tab\" @slotchange=${() => this.handleLinksSlotChange()}></slot>\n </div>\n ${this.makeInk('links')}\n </div>\n ${this.makeInk('host')}\n ${this.makeDivider()}\n <section id=\"panels\" part=\"panels\" style=\"transform:translateX(${this.panelPosition}px);\">\n <div>\n <slot name=\"panel\" @slotchange=${() => this.handlePanelsSlotChange()}></slot>\n </div>\n </section>\n `;\n }\n\n updated(prevProps) {\n this.determineFade();\n this.determineStacked();\n\n if (prevProps.get('selected') && prevProps.get('selected') !== this.selected) {\n this.selectTab();\n this.selectPanel();\n }\n\n if (typeof prevProps.get('selectedIndex') === 'number' && prevProps.get('selectedIndex') !== this.selected) {\n this.selectTab();\n this.selectPanel();\n }\n }\n\n handleLinksSlotChange() {\n const tabs = this.querySelectorAll('kemet-tab');\n let index = 0;\n\n tabs.forEach((tab: KemetTabInterface) => {\n // give each tab an index to select by if link/panel is not used\n tab.index = index;\n index += 1;\n\n // store the list of tabs\n this.tabs = this.tabs.concat(tab);\n\n // add keyboard support\n tab.addEventListener('keydown', event => this.handleTabKeydown(event));\n });\n\n // default to the first tab/panel selected\n if (this.tabs.length > 0) this.tabs[0].selected = true;\n\n setTimeout(() => {\n this.selectTab();\n }, 1);\n this.determineOverflow();\n }\n\n handlePanelsSlotChange() {\n const panels = this.querySelectorAll('kemet-tab-panel');\n const panelElement = this.shadowRoot.getElementById('panels');\n let index = 0;\n\n panels.forEach((panel: KemetTabPanelInterface) => {\n // give each panel an index to select by if link/panel is not used\n panel.index = index;\n index += 1;\n\n // store the list of panels\n this.panels = this.panels.concat(panel);\n });\n\n // default to the first tab/panel selected\n if (this.panels.length > 0) this.panels[0].selected = true;\n\n // add swipe support\n if (this.swipe) {\n panelElement.addEventListener('touchstart', event => this.handleTouchStart(event), false);\n panelElement.addEventListener('touchmove', event => this.handleTouchMove(event), false);\n }\n\n this.selectPanel();\n }\n\n handleLeftArrow() {\n const selectedElement = this.tabs.find(tab => tab.selected) \|\| this.tabs[0];\n const previousElement = selectedElement.previousElementSibling;\n const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n if (this.selected) {\n this.selected = previousElement ? previousElement.link : selectedElement.link;\n } else {\n this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;\n }\n\n if (previousElement) {\n this.links.scrollLeft = previousElement.offsetLeft - 20;\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n handleRightArrow() {\n const selectedElement = this.tabs.find(tab => tab.selected) \|\| this.tabs[this.tabs.length - 1];\n const nextElement = selectedElement.nextElementSibling;\n const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n if (this.selected) {\n this.selected = nextElement ? nextElement.link : selectedElement.link;\n } else {\n this.selectedIndex = selectedIndex < this.tabs.length - 1\n ? selectedIndex + 1\n : this.tabs.length - 1;\n }\n\n if (nextElement) {\n this.links.scrollLeft = nextElement.offsetLeft - 20;\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n handleTabClose(event) {\n const tab = event.detail;\n const panel = this.panels[tab.index];\n\n this.selected = this.tabs[0].link;\n this.selectedIndex = 0;\n\n panel.remove();\n tab.remove();\n }\n\n makeInk(location) {\n if (this.hideInk) {\n return null;\n }\n\n if ((this.placement === 'top' \|\| this.placement === 'bottom') && this.ink && location === 'links') {\n return html`<div part=\"ink\" style=\"width:${this.ink.width}; transform:translateX(${this.ink.positionX})\"></div>`;\n }\n\n if ((this.placement === 'left' \|\| this.placement === 'right') && this.ink && location === 'host') {\n return html`<div part=\"ink\" style=\"height:${this.ink.height}; transform:translateY(${this.ink.positionY})\"></div>`;\n }\n\n return null;\n }\n\n makeDivider() {\n if (this.divider) {\n return html`<div part=\"divider\"></div>`;\n }\n\n return null;\n }\n\n makeLeftArrow() {\n if (this.overflow) {\n return html`<kemet-icon icon='chevron-left' size=\"20\" @click=${() => this.handleLeftArrow()}></kemet-icon>`;\n }\n\n return null;\n }\n\n makeRightArrow() {\n if (this.overflow) {\n return html`<kemet-icon icon='chevron-right' size=\"20\" @click=${() => this.handleRightArrow()}></kemet-icon>`;\n }\n\n return null;\n }\n\n selectTab() {\n const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n const overflowOffset = this.overflow ? marginLeft : 0;\n\n // if the user uses the selected attribute select by it\n if (this.selected) {\n this.tabs.forEach((tab) => {\n const tabName = tab.getAttribute('link');\n\n if (tabName === this.selected) {\n tab.selected = true;\n this.selected = tabName;\n\n this.ink = {\n width: `${tab.offsetWidth}px`,\n height: `${tab.offsetHeight}px`,\n positionX: `${tab.offsetLeft - overflowOffset}px`,\n positionY: `${tab.offsetTop}px`,\n };\n\n this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n } else {\n tab.selected = false;\n }\n });\n\n // otherwise select by index\n } else {\n this.tabs.forEach((tab) => {\n if (this.selectedIndex === tab.index) {\n tab.selected = true;\n\n this.ink = {\n width: `${tab.offsetWidth}px`,\n height: `${tab.offsetHeight}px`,\n positionX: `${tab.offsetLeft - overflowOffset}px`,\n positionY: `${tab.offsetTop}px`,\n };\n\n this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n } else {\n tab.selected = false;\n }\n });\n }\n }\n\n selectPanel() {\n // if the user uses the selected attribute select by it\n if (this.selected) {\n this.panels.forEach((panel) => {\n const panelName = panel.getAttribute('panel');\n\n if (this.panelEffect === 'fade' && panel.index !== 0) {\n panel.classList.add('push');\n }\n\n if (this.placement === 'left' \|\| this.placement === 'right') {\n panel.classList.add('vertical');\n }\n\n if (panelName === this.selected) {\n panel.selected = true;\n this.animatePanel(panelName, null);\n } else {\n panel.selected = false;\n }\n });\n\n // otherwise select by index\n } else {\n this.panels.forEach((panel) => {\n if (this.panelEffect === 'fade' && panel.index !== 0) {\n panel.classList.add('push');\n }\n\n if (this.placement === 'left' \|\| this.placement === 'right') {\n panel.classList.add('vertical');\n }\n\n if (this.selectedIndex === panel.index) {\n panel.selected = true;\n this.animatePanel(null, panel.index);\n } else {\n panel.selected = false;\n }\n });\n }\n }\n\n dispatchTabChange() {\n const details = {\n currentTabName: this.selected,\n currentTabIndex: this.selectedIndex,\n };\n\n emitEvent(this, 'kemet-tab-changed', details);\n }\n\n tabSelectedChange(event) {\n if (this.selected) {\n // if selected has been set, use the string attribute\n this.selected = event.detail.getAttribute('link');\n } else {\n // otherwise use the generated index\n this.selectedIndex = event.detail.index;\n }\n\n this.selectTab();\n this.selectPanel();\n this.dispatchTabChange();\n }\n\n\n determineFade() {\n this.panels.forEach((panel) => {\n // add fade class if panel effect is fade\n if (this.panelEffect === 'fade') panel.classList.add('fade');\n });\n }\n\n determineStacked() {\n this.panels.forEach((panel) => {\n // add fade class if panel effect is fade\n if (this.panelEffect === 'stacked') panel.classList.add('stacked');\n });\n }\n\n determineOverflow() {\n const tabsContainerWidth = this.offsetWidth;\n const tabElements = this.querySelectorAll('kemet-tab');\n\n let totalTabsWidth = 0;\n\n tabElements.forEach((tab) => {\n totalTabsWidth += tab.offsetWidth;\n });\n\n if (totalTabsWidth > tabsContainerWidth && (this.placement === 'top' \|\| this.placement === 'bottom')) {\n this.overflow = true;\n } else {\n this.overflow = false;\n }\n }\n\n handleResize() {\n if (this.tabs && this.panels) {\n const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n const overflowOffset = this.overflow ? marginLeft : 0;\n const selectedElement = this.tabs.find(tab => tab.selected);\n\n if (selectedElement) {\n this.ink = {\n width: `${selectedElement.offsetWidth}px`,\n height: `${selectedElement.offsetHeight}px`,\n positionX: `${selectedElement.offsetLeft - overflowOffset}px`,\n positionY: `${selectedElement.offsetTop}px`,\n };\n }\n\n this.determineOverflow();\n\n if (this.selected) {\n this.animatePanel(this.selected, null);\n } else {\n this.animatePanel(null, this.selectedIndex);\n }\n }\n }\n\n animatePanel(panelName, panelIndex) {\n if (panelName) {\n const selectedPanel = this.querySelector(`[panel=\"${panelName}\"]`) as KemetTabPanelInterface;\n if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;\n } else {\n if (this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;\n }\n }\n\n handleTabKeydown(event) {\n if (this.selected) {\n switch (event.key) {\n case 'Home':\n this.selected = this.tabs[0].getAttribute('link');\n break;\n case 'End':\n this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');\n break;\n case 'ArrowRight':\n const nextLinkElement = this.querySelector('kemet-tab[selected]').nextElementSibling;\n const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;\n\n if (nextLink) {\n this.selected = nextLink;\n }\n break;\n case 'ArrowLeft':\n const previousLinkElement = this.querySelector('kemet-tab[selected]').previousElementSibling;\n const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;\n\n if (previousLink) {\n this.selected = previousLink;\n }\n break;\n default: break;\n }\n\n this.tabs.find(tab => tab.link === this.selected).focus();\n } else {\n switch (event.key) {\n case 'Home':\n this.selectedIndex = 0;\n break;\n case 'End':\n this.selectedIndex = this.tabs.length - 1;\n break;\n case 'ArrowRight':\n if (this.selectedIndex < this.tabs.length - 1) {\n this.selectedIndex += 1;\n } else {\n this.selectedIndex = this.tabs.length - 1;\n }\n break;\n case 'ArrowLeft':\n if (this.selectedIndex < 1) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex -= 1;\n }\n break;\n default: break;\n }\n\n this.tabs[this.selectedIndex].focus();\n }\n }\n\n handleTouchStart(event) {\n this.xDown = event.touches[0].clientX;\n this.yDown = event.touches[0].clientY;\n }\n\n handleTouchMove(event) {\n if (!this.xDown \|\| !this.yDown) {\n return;\n }\n\n const xUp = event.touches[0].clientX;\n const yUp = event.touches[0].clientY;\n const xDiff = this.xDown - xUp;\n const yDiff = this.yDown - yUp;\n\n const nextElement = this.querySelector('kemet-tab-panel[selected]')?.nextElementSibling;\n const next = nextElement ? nextElement.getAttribute('panel') : false;\n const previousElement = this.querySelector('kemet-tab-panel[selected]')?.previousElementSibling;\n const previous = previousElement ? previousElement.getAttribute('panel') : false;\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) {\n if (this.selected) {\n if (next) this.selected = next;\n } else {\n if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;\n }\n } else {\n if (this.selected) {\n if (previous) this.selected = previous;\n } else {\n if (this.selectedIndex > 0) this.selectedIndex -= 1;\n }\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n this.xDown = null;\n this.yDown = null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tabs': KemetTabs\n }\n}\n"]}

package/dist/components/kemet-tabs/styles.js CHANGED Viewed

@@ -5,6 +5,9 @@ export const stylesKemetTabs = css `
     --kemet-tabs-ink-radius: 6px;
     --kemet-tabs-divider-size: 1px;
     --kemet-tabs-spacer: 1rem;
+    --kemet-tabs-transition-speed: 0.5s;
+    --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));
+    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));
     display: flex;
     flex-direction: column;
@@ -36,7 +39,7 @@ export const stylesKemetTabs = css `
   }
   :host([panel-effect='slide']) [part='panels'] {
-    transition: transform var(--kemet-tabs-transition-speed, 0.5s) linear;
+    transition: transform var(--kemet-tabs-transition-speed) linear;
   }
   :host([panel-effect='fade']) [part='panels'] {
@@ -115,7 +118,7 @@ export const stylesKemetTabs = css `
   [part='divider'] {
     height: var(--kemet-tabs-divider-size);
-    background-color: var(--kemet-tabs-divider-color, var(--kemet-color-gray4));
+    background-color: var(--kemet-tabs-divider-color);
   }
   :host([placement='left']) [part='divider'],
@@ -131,7 +134,7 @@ export const stylesKemetTabs = css `
     border-top-left-radius: var(--kemet-tabs-ink-radius);
     border-top-right-radius: var(--kemet-tabs-ink-radius);
     transition: all 300ms ease;
-    background-color: var(--kemet-tabs-ink-color, var(--kemet-color-background));
+    background-color: var(--kemet-tabs-ink-color);
   }
   :host([placement='right']) [part='ink'] {
@@ -199,6 +202,8 @@ export const stylesKemetTabs = css `
 `;
 export const stylesKemetTab = css `
   :host {
+    --kemet-tab-color: rgb(var(--kemet-color-foreground));
     cursor: pointer;
     display: inline-flex;
     flex: 0 0 auto;
@@ -210,7 +215,7 @@ export const stylesKemetTab = css `
   :host([selected]) {
     cursor: auto;
-    color: var(--kemet-tab-color, var(--kemet-color-background));
+    color: var(--kemet-tab-color);
   }
   kemet-icon {
@@ -220,6 +225,8 @@ export const stylesKemetTab = css `
 `;
 export const stylesKemetTabPanel = css `
   :host {
+    --kemet-tab-panel-fade-speed: 0.5s;
     width: 100%;
     flex: 0 0 auto;
   }
@@ -231,7 +238,7 @@ export const stylesKemetTabPanel = css `
   :host(.fade) {
     opacity: 0;
     pointer-events: none;
-    transition: opacity var(--kemet-tab-panel-fade-speed, 0.5s) ease;
+    transition: opacity var(--kemet-tab-panel-fade-speed) ease;
   }
   :host(.fade[selected]) {

package/dist/components/kemet-tabs/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMjC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;CAoBhC~~,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CrC~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesKemetTabs = css`\n :host {\n --kemet-tabs-ink-size: 6px;\n --kemet-tabs-ink-radius: 6px;\n --kemet-tabs-divider-size: 1px;\n --kemet-tabs-spacer: 1rem;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n }\n\n :host([placement='bottom']) {\n flex-direction: column-reverse;\n }\n\n :host([placement='left']) {\n flex-direction: row;\n }\n\n :host([placement='right']) {\n flex-direction: row-reverse;\n }\n\n :host([placement='left']),\n :host([placement='right']) {\n overflow: unset;\n }\n\n /* panels /\n\n [part='panels'] > div {\n display: flex;\n }\n\n :host([panel-effect='slide']) [part='panels'] {\n transition: transform var(--kemet-tabs-transition-speed~~, 0.5s~~) linear;\n }\n\n :host([panel-effect='fade']) [part='panels'] {\n transform: none !important;\n }\n\n :host([panel-effect='fade']) [part='panels'] > div {\n flex-flow: row nowrap;\n }\n\n :host([placement='left']) [part='panels'],\n :host([placement='right']) [part='panels'] {\n transform: none !important;\n position: relative;\n width: 100%;\n }\n\n :host([placement='top']) [part='panels'] > div {\n margin-top: var(--kemet-tabs-spacer);\n }\n\n :host([placement='right']) [part='panels'] > div {\n margin-right: var(--kemet-tabs-spacer);\n }\n\n :host([placement='bottom']) [part='panels'] > div {\n margin-bottom: var(--kemet-tabs-spacer);\n }\n\n :host([placement='left']) [part='panels'] > div {\n margin-left: var(--kemet-tabs-spacer);\n }\n\n / tablist /\n\n [part='tablist'] {\n display: flex;\n }\n\n :host([placement='left']) [part='tablist'],\n :host([placement='right']) [part='tablist'] {\n display: flex;\n flex-direction: column;\n align-items: start;\n }\n\n :host([tabs-align='center']) [part='tablist'] {\n justify-content: center;\n }\n\n :host([tabs-align='between']) [part='tablist'] {\n justify-content: space-between;\n }\n\n :host([tabs-align='evenly']) [part='tablist'] {\n justify-content: space-evenly;\n }\n\n :host([tabs-align='around']) [part='tablist'] {\n justify-content: space-around\n }\n\n :host([tabs-align='start']) [part='tablist'] {\n justify-content: flex-start;\n }\n\n :host([tabs-align='end']) [part='tablist'] {\n justify-content: flex-end;\n }\n\n :host([overflow]) [part='tablist'] {\n justify-content: start;\n }\n\n / divider /\n\n [part='divider'] {\n height: var(--kemet-tabs-divider-size);\n background-color: var(--kemet-tabs-divider-color~~, var(--kemet-color-gray4~~));\n }\n\n :host([placement='left']) [part='divider'],\n :host([placement='right']) [part='divider'] {\n width: var(--kemet-tabs-divider-size);\n height: auto;\n }\n\n / ink /\n\n [part='ink'] {\n height: var(--kemet-tabs-ink-size);\n border-top-left-radius: var(--kemet-tabs-ink-radius);\n border-top-right-radius: var(--kemet-tabs-ink-radius);\n transition: all 300ms ease;\n background-color: var(--kemet-tabs-ink-color~~, var(--kemet-color-background~~));\n }\n\n :host([placement='right']) [part='ink'] {\n width: var(--kemet-tabs-ink-size);\n border-top-right-radius: var(--kemet-tabs-ink-radius);\n border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n\n :host([placement='left']) [part='ink'] {\n width: var(--kemet-tabs-ink-size);\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n border-top-left-radius: var(--kemet-tabs-ink-radius);\n border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n }\n\n :host([placement='bottom']) [part='ink'] {\n border-top-right-radius: 0px;\n border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n border-top-left-radius: 0px;\n border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n }\n\n / links /\n\n :host([overflow]) [part='links'] {\n overflow-x: auto;\n margin: 0 2rem;\n scroll-behavior: smooth;\n }\n\n :host([overflow]) [part='links']::-webkit-scrollbar {\n display: none;\n width: 0;\n background: transparent;\n }\n\n :host([placement='bottom']) [part='links'] {\n display: flex;\n flex-direction: column-reverse;\n }\n\n / icon /\n\n [icon='chevron'] {\n cursor: pointer;\n position: absolute;\n top: 1rem;\n }\n\n [icon='chevron-left'] {\n left: 0;\n }\n\n [icon='chevron-right'] {\n right: 0;\n }\n\n :host([placement='bottom']) [icon*='chevron'] {\n top: auto;\n bottom: 1rem;\n }\n`;\n\nexport const stylesKemetTab = css`\n :host {\n cursor: pointer;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n padding: var(--kemet-tab-padding, 1rem);\n }\n\n :host([selected]) {\n cursor: auto;\n color: var(--kemet-tab-color~~, var(--kemet-color-background~~));\n }\n\n kemet-icon {\n cursor: pointer;\n margin-left: 0.5rem;\n }\n`;\n\nexport const stylesKemetTabPanel = css`\n :host {\n width: 100%;\n flex: 0 0 auto;\n }\n\n ::slotted(img) {\n max-width: 100%;\n }\n\n :host(.fade) {\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--kemet-tab-panel-fade-speed~~, 0.5s~~) ease;\n }\n\n :host(.fade[selected]) {\n opacity: 1;\n pointer-events: auto;\n }\n\n :host(.fade.push) {\n margin-left: -100%;\n }\n\n :host(.vertical) {\n display: none;\n }\n\n :host(.vertical[selected]) {\n display: block;\n }\n\n :host(.stacked) {\n position: absolute;\n z-index: -1;\n opacity: 0;\n visibility: hidden;\n }\n\n :host(.stacked[selected]) {\n position: relative;\n z-index: 1;\n opacity: 1;\n visibility: visible;\n }\n`;\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwMjC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBhC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDrC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesKemetTabs = css`\n :host {\n --kemet-tabs-ink-size: 6px;\n --kemet-tabs-ink-radius: 6px;\n --kemet-tabs-divider-size: 1px;\n --kemet-tabs-spacer: 1rem;\n --kemet-tabs-transition-speed: 0.5s;\n --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));\n --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n }\n\n :host([placement='bottom']) {\n flex-direction: column-reverse;\n }\n\n :host([placement='left']) {\n flex-direction: row;\n }\n\n :host([placement='right']) {\n flex-direction: row-reverse;\n }\n\n :host([placement='left']),\n :host([placement='right']) {\n overflow: unset;\n }\n\n /* panels /\n\n [part='panels'] > div {\n display: flex;\n }\n\n :host([panel-effect='slide']) [part='panels'] {\n transition: transform var(--kemet-tabs-transition-speed) linear;\n }\n\n :host([panel-effect='fade']) [part='panels'] {\n transform: none !important;\n }\n\n :host([panel-effect='fade']) [part='panels'] > div {\n flex-flow: row nowrap;\n }\n\n :host([placement='left']) [part='panels'],\n :host([placement='right']) [part='panels'] {\n transform: none !important;\n position: relative;\n width: 100%;\n }\n\n :host([placement='top']) [part='panels'] > div {\n margin-top: var(--kemet-tabs-spacer);\n }\n\n :host([placement='right']) [part='panels'] > div {\n margin-right: var(--kemet-tabs-spacer);\n }\n\n :host([placement='bottom']) [part='panels'] > div {\n margin-bottom: var(--kemet-tabs-spacer);\n }\n\n :host([placement='left']) [part='panels'] > div {\n margin-left: var(--kemet-tabs-spacer);\n }\n\n / tablist /\n\n [part='tablist'] {\n display: flex;\n }\n\n :host([placement='left']) [part='tablist'],\n :host([placement='right']) [part='tablist'] {\n display: flex;\n flex-direction: column;\n align-items: start;\n }\n\n :host([tabs-align='center']) [part='tablist'] {\n justify-content: center;\n }\n\n :host([tabs-align='between']) [part='tablist'] {\n justify-content: space-between;\n }\n\n :host([tabs-align='evenly']) [part='tablist'] {\n justify-content: space-evenly;\n }\n\n :host([tabs-align='around']) [part='tablist'] {\n justify-content: space-around\n }\n\n :host([tabs-align='start']) [part='tablist'] {\n justify-content: flex-start;\n }\n\n :host([tabs-align='end']) [part='tablist'] {\n justify-content: flex-end;\n }\n\n :host([overflow]) [part='tablist'] {\n justify-content: start;\n }\n\n / divider /\n\n [part='divider'] {\n height: var(--kemet-tabs-divider-size);\n background-color: var(--kemet-tabs-divider-color);\n }\n\n :host([placement='left']) [part='divider'],\n :host([placement='right']) [part='divider'] {\n width: var(--kemet-tabs-divider-size);\n height: auto;\n }\n\n / ink /\n\n [part='ink'] {\n height: var(--kemet-tabs-ink-size);\n border-top-left-radius: var(--kemet-tabs-ink-radius);\n border-top-right-radius: var(--kemet-tabs-ink-radius);\n transition: all 300ms ease;\n background-color: var(--kemet-tabs-ink-color);\n }\n\n :host([placement='right']) [part='ink'] {\n width: var(--kemet-tabs-ink-size);\n border-top-right-radius: var(--kemet-tabs-ink-radius);\n border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n\n :host([placement='left']) [part='ink'] {\n width: var(--kemet-tabs-ink-size);\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n border-top-left-radius: var(--kemet-tabs-ink-radius);\n border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n }\n\n :host([placement='bottom']) [part='ink'] {\n border-top-right-radius: 0px;\n border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n border-top-left-radius: 0px;\n border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n }\n\n / links /\n\n :host([overflow]) [part='links'] {\n overflow-x: auto;\n margin: 0 2rem;\n scroll-behavior: smooth;\n }\n\n :host([overflow]) [part='links']::-webkit-scrollbar {\n display: none;\n width: 0;\n background: transparent;\n }\n\n :host([placement='bottom']) [part='links'] {\n display: flex;\n flex-direction: column-reverse;\n }\n\n / icon /\n\n [icon='chevron'] {\n cursor: pointer;\n position: absolute;\n top: 1rem;\n }\n\n [icon='chevron-left'] {\n left: 0;\n }\n\n [icon='chevron-right'] {\n right: 0;\n }\n\n :host([placement='bottom']) [icon*='chevron'] {\n top: auto;\n bottom: 1rem;\n }\n`;\n\nexport const stylesKemetTab = css`\n :host {\n --kemet-tab-color: rgb(var(--kemet-color-foreground));\n\n cursor: pointer;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n padding: var(--kemet-tab-padding, 1rem);\n }\n\n :host([selected]) {\n cursor: auto;\n color: var(--kemet-tab-color);\n }\n\n kemet-icon {\n cursor: pointer;\n margin-left: 0.5rem;\n }\n`;\n\nexport const stylesKemetTabPanel = css`\n :host {\n --kemet-tab-panel-fade-speed: 0.5s;\n\n width: 100%;\n flex: 0 0 auto;\n }\n\n ::slotted(img) {\n max-width: 100%;\n }\n\n :host(.fade) {\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--kemet-tab-panel-fade-speed) ease;\n }\n\n :host(.fade[selected]) {\n opacity: 1;\n pointer-events: auto;\n }\n\n :host(.fade.push) {\n margin-left: -100%;\n }\n\n :host(.vertical) {\n display: none;\n }\n\n :host(.vertical[selected]) {\n display: block;\n }\n\n :host(.stacked) {\n position: absolute;\n z-index: -1;\n opacity: 0;\n visibility: hidden;\n }\n\n :host(.stacked[selected]) {\n position: relative;\n z-index: 1;\n opacity: 1;\n visibility: visible;\n }\n`;\n"]}

package/dist/components/kemet-textarea/docs/stories.d.ts CHANGED Viewed

@@ -7,3 +7,6 @@ declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Disabled: Story;
+export declare const Filled: Story;
+export declare const Rounded: Story;

package/dist/components/kemet-textarea/docs/stories.js CHANGED Viewed

@@ -7,82 +7,52 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Textarea',
     component: 'kemet-textarea',
-};
-export default meta;
-const Template = ({ status = 'standard', validateOnBlur = true, required = true, placeholder = 'Placeholder', minlength = null, maxlength = null, inputmode = 'none', autofocus = false, disabled = false, readonly = false, rows = '4', filled = false, rounded = false, }) => html `<kemet-textarea
-  status=${status}
-  ?required=${required}
-  ?validate-on-blur=${validateOnBlur}
-  placeholder=${ifDefined(placeholder || null)}
-  minlength=${ifDefined(minlength || null)}
-  maxlength=${ifDefined(maxlength || null)}
-  inputmode=${inputmode}
-  ?autofocus=${autofocus}
-  ?disabled=${disabled}
-  ?readonly=${readonly}
-  rows=${rows}
-  ?filled=${filled}
-  ?rounded=${rounded}
-></kemet-textarea>`;
-export const Standard = {
-    render: args => Template(args),
-    args: {
-        status: 'standard',
-        validateOnBlur: true,
-        required: true,
-        placeholder: 'Placeholder',
-        minlength: null,
-        maxlength: null,
-        inputmode: 'none',
-        autofocus: false,
-        disabled: false,
-        readonly: false,
-        rows: 4,
-        filled: false,
-        rounded: false,
-    },
     argTypes: {
         status: {
             control: { type: 'radio' },
             options: ['standard', 'error', 'success', 'warning'],
         },
-        validateOnBlur: {
-            control: { type: 'boolean' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-        placeholder: {
-            control: { type: 'text' },
-        },
-        minlength: {
-            control: { type: 'number' },
-        },
-        maxlength: {
-            control: { type: 'number' },
-        },
         inputmode: {
             control: { type: 'select' },
             options: ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'],
         },
-        autofocus: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        readonly: {
-            control: { type: 'boolean' },
-        },
-        rows: {
-            control: { type: 'number' },
-        },
-        filled: {
-            control: { type: 'boolean' },
-        },
-        rounded: {
-            control: { type: 'boolean' },
-        },
+    }
+};
+export default meta;
+const Template = (args) => html `<kemet-textarea
+  status=${ifDefined(args.status)}
+  ?required=${args.required}
+  ?validate-on-blur=${args.validateOnBlur}
+  placeholder=${ifDefined(args.placeholder || null)}
+  minlength=${ifDefined(args.minlength || null)}
+  maxlength=${ifDefined(args.maxlength || null)}
+  inputmode=${args.inputmode}
+  ?autofocus=${args.autofocus}
+  ?disabled=${args.disabled}
+  ?readonly=${args.readonly}
+  rows=${ifDefined(args.rows)}
+  ?filled=${args.filled}
+  ?rounded=${args.rounded}
+></kemet-textarea>`;
+export const Standard = {
+    render: args => Template(args),
+};
+export const Disabled = {
+    render: args => Template(args),
+    args: {
+        disabled: true
+    }
+};
+export const Filled = {
+    render: args => Template(args),
+    args: {
+        filled: true
+    }
+};
+export const Rounded = {
+    render: args => Template(args),
+    args: {
+        rounded: true
     }
 };
 //# sourceMappingURL=stories.js.map