npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.9277796 → 0.0.0-insider.98c4058 - Mend

@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.98c4058

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 (2568) hide show

package/dist/esm/six-tab-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-tab-group.entry.js","mappings":"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","names":[],"sources":["./src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","./src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n/*\n @prop --tabs-border-color: The color of the border that separates tabs.\n /\n:host {\n --tabs-border-color: var(--six-tab-border-color);\n display: block;\n}\n\n.tab-group {\n display: flex;\n border: solid 1px transparent;\n border-radius: 0;\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n }\n\n .tab-group__active-tab-indicator {\n position: absolute;\n transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease;\n }\n\n // Remove the focus ring when the user isn't interacting with a keyboard\n &:not(.focus-visible) ::slotted(six-tab) {\n --focus-ring: none;\n }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n left: 0;\n}\n\n.tab-group__scroll-button--right {\n right: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Top\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--top {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n border-bottom: solid var(--six-tab-border-width) var(--tabs-border-color);\n }\n\n .tab-group__active-tab-indicator {\n bottom: -2px;\n border-bottom: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n }\n\n .tab-group__body {\n order: 2;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Bottom\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--bottom {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n border-top: solid var(--six-tab-border-width) var(--tabs-border-color);\n }\n\n .tab-group__active-tab-indicator {\n top: calc(-1 2px);\n border-top: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n }\n\n .tab-group__body {\n order: 1;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Left\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--left {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-right: solid var(--six-tab-border-width) var(--tabs-border-color);\n }\n\n .tab-group__active-tab-indicator {\n right: calc(-1 * 2px);\n border-right: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Right\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--right {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-left: solid var(--six-tab-border-width) var(--tabs-border-color);\n }\n\n .tab-group__active-tab-indicator {\n left: calc(-1 * 2px);\n border-left: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { getOffset } from '../../utils/offset';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\n\nexport interface SixTabShowPayload {\n name: string;\n}\n\nexport interface SixTabHidePayload {\n name: string;\n}\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n \n @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n /\n@Component({\n tag: 'six-tab-group',\n styleUrl: 'six-tab-group.scss',\n shadow: true,\n})\nexport class SixTabGroup {\n activeTab: HTMLSixTabElement;\n activeTabIndicator: HTMLElement;\n body: HTMLElement;\n mutationObserver: MutationObserver;\n nav: HTMLElement;\n resizeObserver: ResizeObserver;\n tabGroup: HTMLElement;\n tabs: HTMLElement;\n\n @Element() host: HTMLSixTabGroupElement;\n\n @State() hasScrollControls = false;\n\n /* The placement of the tabs. /\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n\n /* Disables the scroll arrows that appear when tabs overflow. /\n @Prop() noScrollControls = false;\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n /* Emitted when a tab is shown. /\n @Event({ eventName: 'six-tab-show' }) sixTabShow: EventEmitter<SixTabShowPayload>;\n\n /* Emitted when a tab is hidden. /\n @Event({ eventName: 'six-tab-hide' }) sixTabHide: EventEmitter<SixTabHidePayload>;\n\n connectedCallback() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleScrollLeft = this.handleScrollLeft.bind(this);\n this.handleScrollRight = this.handleScrollRight.bind(this);\n this.syncActiveTabIndicator = this.syncActiveTabIndicator.bind(this);\n }\n\n componentDidLoad() {\n // Set initial tab state when the tabs first become visible\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() \|\| this.getAllTabs()[0], false);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n\n focusVisible.observe(this.tabGroup);\n\n this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n this.resizeObserver.observe(this.nav);\n requestAnimationFrame(() => this.updateScrollControls());\n\n // Update aria labels if the DOM changes\n this.mutationObserver = new MutationObserver((mutations) => {\n if (\n mutations.some((mutation) => {\n return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName);\n })\n ) {\n setTimeout(() => this.setAriaLabels());\n }\n });\n this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n focusVisible.unobserve(this.tabGroup);\n this.resizeObserver.unobserve(this.nav);\n }\n\n /* Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n const tabs = this.getAllTabs();\n const tab = tabs.find((el) => el.panel === panel);\n\n if (tab) {\n this.setActiveTab(tab);\n }\n }\n\n getAllTabs(includeDisabled = false) {\n const slot = this.tabs.querySelector('slot');\n\n return [...slot.assignedElements()].filter((el: any) => {\n return includeDisabled\n ? el.tagName.toLowerCase() === 'six-tab'\n : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;\n }) as [HTMLSixTabElement];\n }\n\n getAllPanels() {\n const slot = this.body.querySelector('slot');\n return [...slot.assignedElements()].filter((el: any) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n HTMLSixTabPanelElement\n ];\n }\n\n getActiveTab() {\n return this.getAllTabs().find((el) => el.active);\n }\n\n handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n if (tab) {\n this.setActiveTab(tab);\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = document.activeElement as any;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n const tabs = this.getAllTabs();\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (event.key === 'ArrowLeft') {\n index = Math.max(0, index - 1);\n } else if (event.key === 'ArrowRight') {\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus({ preventScroll: true });\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n }\n\n handleScrollLeft() {\n this.nav.scroll({\n left: this.nav.scrollLeft - this.nav.clientWidth,\n behavior: 'smooth',\n });\n }\n\n handleScrollRight() {\n this.nav.scroll({\n left: this.nav.scrollLeft + this.nav.clientWidth,\n behavior: 'smooth',\n });\n }\n\n updateScrollControls() {\n this.hasScrollControls = this.noScrollControls\n ? false\n : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n }\n\n setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n if (tab && tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync tabs and panels\n this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n this.getAllPanels().map((el) => (el.active = el.name === this.activeTab.panel));\n this.syncActiveTabIndicator();\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.sixTabHide.emit({ name: previousTab.panel });\n }\n\n this.sixTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n setAriaLabels() {\n const tabs = this.getAllTabs();\n const panels = this.getAllPanels();\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id'));\n panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n }\n });\n }\n\n syncActiveTabIndicator() {\n const tab = this.getActiveTab();\n\n if (tab) {\n this.activeTabIndicator.style.display = 'block';\n } else {\n this.activeTabIndicator.style.display = 'none';\n return;\n }\n\n const width = tab.clientWidth;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.nav);\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left + this.nav.scrollLeft;\n\n switch (this.placement) {\n case 'top':\n case 'bottom':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'left':\n case 'right':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n render() {\n return (\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'tab-group': true,\n\n // Placements\n 'tab-group--top': this.placement === 'top',\n 'tab-group--bottom': this.placement === 'bottom',\n 'tab-group--left': this.placement === 'left',\n 'tab-group--right': this.placement === 'right',\n\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\">\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_left\"\n onClick={this.handleScrollLeft}\n />\n )}\n <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"tab-group__active-tab-indicator\"\n />\n <slot name=\"nav\" onSlotchange={this.syncActiveTabIndicator} />\n </div>\n </div>\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_right\"\n onClick={this.handleScrollRight}\n />\n )}\n </div>\n\n <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n <slot onSlotchange={this.syncActiveTabIndicator} />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"version":3,"file":"six-tab-group.entry.js","sources":["src/utils/animation.ts","src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["/*\n Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n \n @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n \n @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n \n /\nexport function flipAnimate(\n element: Element,\n fromElement: Element,\n options: KeyframeAnimationOptions = {\n duration: 150,\n easing: 'ease',\n fill: 'both',\n }\n) {\n const dimensionsTo = fromElement.getBoundingClientRect();\n const dimensionsFrom = element.getBoundingClientRect();\n\n const deltaX = dimensionsTo.left - dimensionsFrom.left;\n const deltaY = dimensionsTo.top - dimensionsFrom.top;\n const deltaW = dimensionsTo.width / dimensionsFrom.width;\n const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n element.animate(\n [\n {\n transformOrigin: 'top left',\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n },\n {\n transformOrigin: 'top left',\n transform: 'none',\n },\n ],\n options\n );\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n display: block;\n}\n\n.tab-group {\n display: flex;\n border: solid 1px transparent;\n border-radius: 0;\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n left: 0;\n}\n\n.tab-group__scroll-button--right {\n right: 0;\n}\n\n// TOP\n.tab-group--top {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n }\n\n .tab-group__body {\n order: 2;\n }\n}\n\n// Bottom\n.tab-group--bottom {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n }\n\n .tab-group__body {\n order: 1;\n }\n}\n\n// Left\n\n.tab-group--left {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n}\n\n// Right\n.tab-group--right {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { flipAnimate } from '../../utils/animation';\n\nexport interface SixTabShowPayload {\n name: string;\n}\n\nexport interface SixTabHidePayload {\n name: string;\n}\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n \n @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n /\n@Component({\n tag: 'six-tab-group',\n styleUrl: 'six-tab-group.scss',\n shadow: true,\n})\nexport class SixTabGroup {\n private activeTab?: HTMLSixTabElement;\n private body?: HTMLElement;\n private mutationObserver?: MutationObserver;\n private nav?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n private tabGroup?: HTMLElement;\n private tabs?: HTMLElement;\n\n @Element() host!: HTMLSixTabGroupElement;\n\n @State() hasLeftControl = false;\n @State() hasRightControl = false;\n\n /* The placement of the tabs. /\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n\n /* Disables the scroll arrows that appear when tabs overflow. /\n @Prop() noScrollControls = false;\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n /* Emitted when a tab is shown. /\n @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n /* Emitted when a tab is hidden. /\n @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n componentDidLoad() {\n if (this.tabGroup == null \|\| this.nav == null) return;\n\n // Set initial tab state when the tabs first become visible\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() \|\| this.getAllTabs()[0], false);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n this.resizeObserver.observe(this.nav);\n requestAnimationFrame(() => this.updateScrollControls());\n\n this.nav.addEventListener('scroll', () => {\n if (this.nav == null) {\n return;\n }\n this.hasRightControl = this.calculateRightControlVisibility();\n\n this.hasLeftControl = this.calculateLeftControlVisibility();\n });\n\n // Update aria labels if the DOM changes\n this.mutationObserver = new MutationObserver((mutations) => {\n if (\n mutations.some((mutation) => {\n return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n })\n ) {\n setTimeout(() => this.setAriaLabels());\n }\n });\n this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n if (this.mutationObserver == null \|\| this.tabGroup == null \|\| this.nav == null \|\| this.resizeObserver == null) {\n return;\n }\n this.mutationObserver.disconnect();\n this.resizeObserver.unobserve(this.nav);\n }\n\n /* Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n const tabs = this.getAllTabs();\n const tab = tabs.find((el) => el.panel === panel);\n\n if (tab != null) {\n this.setActiveTab(tab);\n }\n }\n\n private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n const slot = this.tabs?.querySelector('slot');\n if (slot == null) return [];\n\n return [...slot.assignedElements()].filter((el: Element) => {\n return includeDisabled\n ? el.tagName.toLowerCase() === 'six-tab'\n : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n }) as [HTMLSixTabElement];\n }\n\n private getAllPanels(): HTMLSixTabPanelElement[] {\n const slot = this.body?.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n HTMLSixTabPanelElement\n ];\n }\n\n private getActiveTab() {\n return this.getAllTabs().find((el) => el.active);\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n if (tab != null) {\n this.setActiveTab(tab);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.nav == null) return;\n\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = document.activeElement as HTMLSixTabElement;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n const tabs = this.getAllTabs();\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (event.key === 'ArrowLeft') {\n index = Math.max(0, index - 1);\n } else if (event.key === 'ArrowRight') {\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus({ preventScroll: true });\n this.setActiveTab(tabs[index]);\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n };\n\n private handleScrollLeft = () => {\n if (this.nav == null) return;\n\n this.nav.scroll({\n left: this.nav.scrollLeft - this.nav.clientWidth,\n behavior: 'smooth',\n });\n };\n\n private handleScrollRight = () => {\n if (this.nav == null) return;\n\n this.nav.scroll({\n left: this.nav.scrollLeft + this.nav.clientWidth,\n behavior: 'smooth',\n });\n };\n\n private calculateRightControlVisibility() {\n if (this.nav == null) {\n return false;\n }\n return Math.abs(this.nav?.scrollLeft) + this.nav?.clientWidth < this.nav?.scrollWidth - 1;\n }\n\n private calculateLeftControlVisibility() {\n if (this.nav == null) {\n return false;\n }\n return Math.abs(this.nav?.scrollLeft) > 0;\n }\n\n private updateScrollControls() {\n if (this.nav == null) return;\n\n this.hasRightControl = this.noScrollControls\n ? false\n : ['top', 'bottom'].includes(this.placement) && this.calculateRightControlVisibility();\n\n this.hasLeftControl = this.noScrollControls\n ? false\n : ['top', 'bottom'].includes(this.placement) && this.calculateLeftControlVisibility();\n }\n\n private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n if (this.nav == null) return;\n\n const newIndicator = tab?.shadowRoot?.querySelector('.tab__indicator');\n const oldIndicator = this.getActiveTab()?.shadowRoot?.querySelector('.tab__indicator');\n\n if (oldIndicator != null && newIndicator != null) {\n flipAnimate(newIndicator, oldIndicator);\n }\n\n if (tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync tabs and panels\n this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab != null) {\n this.sixTabHide.emit({ name: previousTab.panel });\n }\n\n this.sixTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllTabs();\n const panels = this.getAllPanels();\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel != null) {\n tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n }\n });\n }\n\n render() {\n return (\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'tab-group': true,\n\n // Placements\n 'tab-group--top': this.placement === 'top',\n 'tab-group--bottom': this.placement === 'bottom',\n 'tab-group--left': this.placement === 'left',\n 'tab-group--right': this.placement === 'right',\n\n 'tab-group--has-scroll-controls': this.hasRightControl \|\| this.hasLeftControl,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\">\n {this.hasLeftControl && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_left\"\n onClick={this.handleScrollLeft}\n />\n )}\n <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <slot name=\"nav\" />\n </div>\n </div>\n {this.hasRightControl && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_right\"\n onClick={this.handleScrollRight}\n />\n )}\n </div>\n\n <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/six-tab-panel.entry.js CHANGED Viewed

@@ -1,24 +1,27 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-5c0f6628.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BF09Gr5y.js';
-const sixTabPanelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.tab-panel{border:solid 1px transparent;padding:20px 20px}";
+const sixTabPanelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.tab-panel{border:solid 1px transparent;padding:20px 20px}";
 let id = 0;
 const SixTabPanel = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.componentId = `tab-panel-${++id}`;
-    this.name = '';
-    this.active = false;
-  }
-  render() {
-    return (
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    h(Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", null))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.componentId = `tab-panel-${++id}`;
+        /** The tab panel's name. */
+        this.name = '';
+        /** When true, the tab panel will be shown. */
+        this.active = false;
+    }
+    render() {
+        return (
+        // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
+        h(Host, { key: '52fccbf2229c037c494c7f3ff4f238fbe9b27da3', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: 'd340ff1d3c9a0de1191ae18409fcf594d6f253e2', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: 'd6bcd74692535a5389d3c6379e00fe88a6793cbf' }))));
+    }
+    get host() { return getElement(this); }
 };
 SixTabPanel.style = sixTabPanelCss;
 export { SixTabPanel as six_tab_panel };
+//# sourceMappingURL=six-tab-panel.entry.js.map
 //# sourceMappingURL=six-tab-panel.entry.js.map

package/dist/esm/six-tab-panel.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-tab-panel.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,yNAAyN;;ACEhP,IAAI,EAAE,GAAG,CAAC,CAAC;MAkBE,WAAW;;;IACtB,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;gBAKnB,EAAE;kBAGiB,KAAK;;EAEvC,MAAM;IACJ;;IAEE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,IAC5F,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,iBAChC,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,IAE3C,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/six-tab-panel/six-tab-panel.scss?tag=six-tab-panel&encapsulation=shadow","./src/components/six-tab-panel/six-tab-panel.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.tab-panel {\n border: solid 1px transparent;\n padding: 20px 20px;\n}\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tab panel's content.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-tab-panel',\n styleUrl: 'six-tab-panel.scss',\n shadow: true,\n})\nexport class SixTabPanel {\n componentId = `tab-panel-${++id}`;\n\n @Element() host: HTMLSixTabPanelElement;\n\n /* The tab panel's name. /\n @Prop() name = '';\n\n /* When true, the tab panel will be shown. */\n @Prop({ reflect: true }) active = false;\n\n render() {\n return (\n // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n <Host id={this.host.id \|\| this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n <div\n part=\"base\"\n class=\"tab-panel\"\n role=\"tabpanel\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-hidden={this.active ? 'false' : 'true'}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"~~version~~":3}
1	+ {"version":3,"file":"six-tab-panel.entry.js","sources":["src/components/six-tab-panel/six-tab-panel.scss?tag=six-tab-panel&encapsulation=shadow","src/components/six-tab-panel/six-tab-panel.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.tab-panel {\n border: solid 1px transparent;\n padding: 20px 20px;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tab panel's content.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-tab-panel',\n styleUrl: 'six-tab-panel.scss',\n shadow: true,\n})\nexport class SixTabPanel {\n private componentId = `tab-panel-${++id}`;\n\n @Element() host!: HTMLSixTabPanelElement;\n\n /* The tab panel's name. /\n @Prop() name = '';\n\n /* When true, the tab panel will be shown. */\n @Prop({ reflect: true }) active = false;\n\n render() {\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id \|\| this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n <div\n part=\"base\"\n class=\"tab-panel\"\n role=\"tabpanel\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-hidden={this.active ? 'false' : 'true'}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,4NAA4N;;ACEnP,IAAI,EAAE,GAAG,CAAC;MAkBG,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAA,CAAA,WAAW,GAAG,aAAa,EAAE,EAAE,EAAE;;AAKjC,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;;AAGQ,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAkBxC;IAhBC,MAAM,GAAA;QACJ;;QAEE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,EAC5F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,EAAA,eAAA,EACA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,iBAChC,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAA,EAE3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;"}

package/dist/esm/six-tab.entry.js CHANGED Viewed

@@ -1,47 +1,70 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5c0f6628.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BF09Gr5y.js';
-const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";
+const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";
 let id = 0;
 const SixTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sixClose = createEvent(this, "six-tab-close", 7);
-    this.componentId = `tab-${++id}`;
-    this.panel = '';
-    this.active = false;
-    this.closable = false;
-    this.disabled = false;
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-  }
-  /** Sets focus to the tab. */
-  async setFocus(options) {
-    this.tab.focus(options);
-  }
-  /** Removes focus from the tab. */
-  async removeFocus() {
-    this.tab.blur();
-  }
-  handleCloseClick() {
-    this.sixClose.emit();
-  }
-  render() {
-    return (
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    h(Host, { id: this.host.id || this.componentId }, h("div", { part: "base", ref: (el) => (this.tab = el), class: {
-        tab: true,
-        // States
-        'tab--active': this.active,
-        'tab--closable': this.closable,
-        'tab--disabled': this.disabled,
-      }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", null), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sixClose = createEvent(this, "six-tab-close");
+        this.componentId = `tab-${++id}`;
+        /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
+        this.panel = '';
+        /** Set to true to draw the tab in an active state. */
+        this.active = false;
+        /** When true, the tab will be rendered with a close icon. */
+        this.closable = false;
+        /** Set to true to draw the tab in a disabled state. */
+        this.disabled = false;
+    }
+    connectedCallback() {
+        this.handleCloseClick = this.handleCloseClick.bind(this);
+    }
+    /** Sets focus to the tab. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.tab) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the tab. */
+    async removeFocus() {
+        var _a;
+        (_a = this.tab) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    handleCloseClick() {
+        this.sixClose.emit();
+    }
+    render() {
+        var _a;
+        const tabGroup = this.host.closest('six-tab-group');
+        const placement = (_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.placement) !== null && _a !== void 0 ? _a : 'top';
+        return (
+        // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
+        h(Host, { key: '1d9448f852c5350d3cb627647ffc3466f7281298', id: this.host.id || this.componentId }, h("div", { key: 'cc330a70be98dbdccdb89e1c5b035cb2bc761dbd', part: "base", ref: (el) => (this.tab = el), class: {
+                tab: true,
+                // Placements
+                'tab--top': placement === 'top',
+                'tab--bottom': placement === 'bottom',
+                'tab--left': placement === 'left',
+                'tab--right': placement === 'right',
+                // States
+                'tab--active': this.active,
+                'tab--closable': this.closable,
+                'tab--disabled': this.disabled,
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: '4551c8b03d17a513c95734f648536e9cae077d33' }), this.closable && (h("six-icon-button", { key: '8ac44e41d48ae15e0ba57c0965f0c98df1d12b30', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'a138cc0729964dc801f620a48513b312874a36fb', part: this.active ? 'active-tab-indicator' : '', class: {
+                tab__indicator: true,
+                'tab__indicator--active': this.active,
+                // Placements
+                'tab__indicator--top': placement === 'top',
+                'tab__indicator--bottom': placement === 'bottom',
+                'tab__indicator--left': placement === 'left',
+                'tab__indicator--right': placement === 'right',
+            } })));
+    }
+    get host() { return getElement(this); }
 };
 SixTab.style = sixTabCss;
 export { SixTab as six_tab };
+//# sourceMappingURL=six-tab.entry.js.map
 //# sourceMappingURL=six-tab.entry.js.map

package/dist/esm/six-tab.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-tab.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,ikCAAikC;;ACGnlC,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;IACjB,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;iBAMK,EAAE;kBAGD,KAAK;oBAGpB,KAAK;oBAGY,KAAK;;EAKzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;;EAID,MAAM,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GACzB;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAED,MAAM;IACJ;;IAEE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;;QAGT,aAAa,EAAE,IAAI,CAAC,MAAM;QAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;QAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;OAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,eAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","./src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: ~~inline-block~~;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n ~~border-radius: 4px;\n~~ color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n ~~transition~~: ~~var(--six-transition-fast) box-shadow, var(--six-transition-fast) color;\~~n\n &:focus {\n outline: none;\n }\n\n &:focus:~~not~~(~~.tab~~--~~disabled~~) {\n ~~color~~: var(--six-~~tab~~-~~color~~-~~active~~);\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tab's label.\n \n @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n /\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n componentId = `tab-${++id}`;\n tab: HTMLElement;\n\n @Element() host: HTMLSixTabElement;\n\n /* The name of the tab panel the tab will control. The panel must be located in the same tab group. /\n @Prop({ reflect: true }) panel = '';\n\n /* Set to true to draw the tab in an active state. /\n @Prop({ reflect: true }) active = false;\n\n /* When true, the tab will be rendered with a close icon. /\n @Prop() closable = false;\n\n /* Set to true to draw the tab in a disabled state. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event({ eventName: 'six-tab-close' }) sixClose: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /* Sets focus to the tab. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab.focus(options);\n }\n\n /* Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab.blur();\n }\n\n handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n return (\n // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n <Host id={this.host.id \|\| this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled \|\| !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"~~version~~":3}
1	+ {"version":3,"file":"six-tab.entry.js","sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tab's label.\n \n @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n /\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /* The name of the tab panel the tab will control. The panel must be located in the same tab group. /\n @Prop({ reflect: true }) panel = '';\n\n /* Set to true to draw the tab in an active state. /\n @Prop({ reflect: true }) active = false;\n\n /* When true, the tab will be rendered with a close icon. /\n @Prop() closable = false;\n\n /* Set to true to draw the tab in a disabled state. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /* Sets focus to the tab. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /* Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement \| null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id \|\| this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled \|\| !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n part={this.active ? 'active-tab-indicator' : ''}\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/six-tag.entry.js CHANGED Viewed

@@ -1,45 +1,69 @@
-import { r as registerInstance, c as createEvent, h } from './index-5c0f6628.js';
+import { r as registerInstance, c as createEvent, h } from './index-BF09Gr5y.js';
+import { a as getTextContent } from './slot-j3oIB5oT.js';
+import { a as debounce } from './execution-control-CKhg9ibv.js';
-const sixTagCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";
+const sixTagCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;overflow:hidden}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__content{text-overflow:ellipsis;overflow:hidden}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";
 const SixTag = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sixClear = createEvent(this, "six-tag-clear", 7);
-    this.type = 'primary';
-    this.size = 'medium';
-    this.pill = false;
-    this.clearable = false;
-  }
-  connectedCallback() {
-    this.handleClearClick = this.handleClearClick.bind(this);
-  }
-  handleClearClick() {
-    this.sixClear.emit();
-  }
-  render() {
-    return (h("span", { ref: (el) => (this.tag = el), part: "base", class: {
-        tag: true,
-        // Types
-        'tag--primary': this.type === 'primary',
-        'tag--success': this.type === 'success',
-        'tag--info': this.type === 'info',
-        'tag--warning': this.type === 'warning',
-        'tag--danger': this.type === 'danger',
-        'tag--action': this.type === 'action',
-        'tag--text': this.type === 'text',
-        // Sizes
-        'tag--small': this.size === 'small',
-        'tag--medium': this.size === 'medium',
-        'tag--large': this.size === 'large',
-        // Modifers
-        'tag--pill': this.pill,
-        'tag--clear': this.clearable,
-      } }, h("span", { part: "content", class: "tag__content" }, h("slot", null)), this.clearable && (h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sixClear = createEvent(this, "six-tag-clear");
+        /** The tag's type. */
+        this.type = 'primary';
+        /** The tag's size. */
+        this.size = 'medium';
+        /** Set to true to draw a pill-style tag with rounded edges. */
+        this.pill = false;
+        /** Set to true to make the tag clearable. */
+        this.clearable = false;
+        this.resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));
+        this.updateTooltip = () => {
+            if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {
+                this.tooltipElement.content = getTextContent(this.contentSlotElement);
+                this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);
+            }
+        };
+        this.handleClearClick = () => {
+            this.sixClear.emit();
+        };
+    }
+    connectedCallback() {
+        if (this.contentElement != null) {
+            this.resizeObserver.observe(this.contentElement);
+        }
+    }
+    componentDidLoad() {
+        if (this.contentElement != null) {
+            this.resizeObserver.observe(this.contentElement);
+        }
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+    }
+    render() {
+        return (h("span", { key: 'abe76146ab7bc566568e4d6b438d9819089d5e90', part: "base", class: {
+                tag: true,
+                // Types
+                'tag--primary': this.type === 'primary',
+                'tag--success': this.type === 'success',
+                'tag--info': this.type === 'info',
+                'tag--warning': this.type === 'warning',
+                'tag--danger': this.type === 'danger',
+                'tag--action': this.type === 'action',
+                'tag--text': this.type === 'text',
+                // Sizes
+                'tag--small': this.size === 'small',
+                'tag--medium': this.size === 'medium',
+                'tag--large': this.size === 'large',
+                // Modifers
+                'tag--pill': this.pill,
+                'tag--clear': this.clearable,
+            } }, h("six-tooltip", { key: '7e1efc6b920b9e82959988de5add4e01efbf93fe', ref: (el) => (this.tooltipElement = el) }, h("span", { key: 'fefa48774fa20af8db8c973d82ccca9ae841885f', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '080033355f398d05279da89fa74c51c29d0cd28a', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: '2071031731b670de683cf70ebaf6afb29b8bc7d8', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+    }
 };
 SixTag.style = sixTagCss;
 export { SixTag as six_tag };
+//# sourceMappingURL=six-tag.entry.js.map
 //# sourceMappingURL=six-tag.entry.js.map

package/dist/esm/six-tag.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-tag.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,owEAAowE;;MCqBzwE,MAAM;;;;gBAI0F,SAAS;gBAGtD,QAAQ;gBAGtC,KAAK;qBAGA,KAAK;;EAK1C,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,QACE,YACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;;QAGT,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;QACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;;QAGjC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;;QAGnC,WAAW,EAAE,IAAI,CAAC,IAAI;QACtB,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,IAED,YAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,IACvC,eAAQ,CACH,EAEN,IAAI,CAAC,SAAS,KACb,uBACE,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,CACI,EACP;GACH;;;;;;","names":[],"sources":["./src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","./src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tag {\n display: flex;\n align-items: center;\n border: solid 1px;\n font-family: var(--six-font-family);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n cursor: default;\n}\n\n.tag__clear::part(base) {\n color: inherit;\n padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n color: var(--six-color-white);\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-success-500);\n background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-clay-50);\n background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-warning-700);\n background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n color: var(--six-color-white);\n border-color: var(--six-color-danger-800);\n background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n color: var(--six-color-white);\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n font-size: var(--six-button-font-size-small);\n height: calc(var(--six-height-small) * 0.8);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-small);\n padding: 0 var(--six-spacing-x-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xxx-small));\n }\n}\n\n.tag--medium {\n font-size: var(--six-button-font-size-medium);\n height: calc(var(--six-height-medium) * 0.8);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-medium);\n padding: 0 var(--six-spacing-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xx-small));\n }\n}\n\n.tag--large {\n font-size: var(--six-button-font-size-large);\n height: calc(var(--six-height-large) * 0.8);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-large);\n padding: 0 var(--six-spacing-medium);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-x-small));\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n border-radius: var(--six-border-radius-pill);\n}\n","import { Component, h, ~~Prop~~, ~~EventEmitter~~, ~~Event~~ } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tag's content.\n \n @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n /\n\n@Component({\n tag: 'six-tag',\n styleUrl: 'six-tag.scss',\n shadow: true,\n})\nexport class SixTag {\n ~~tag: HTMLElement;\n\n~~ /* The tag's type. /\n @Prop({ reflect: true }) type: 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'action' \| 'text' = 'primary';\n\n /* The tag's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw a pill-style tag with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to make the tag clearable. /\n @Prop({ reflect: true }) clearable = false;\n\n /* Emitted when the clear button is activated. */\n @Event({ eventName: 'six-tag-clear' }) sixClear: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.~~handleClearClick~~ = this.~~handleClearClick~~.~~bind~~(this);\n }\n\n ~~handleClearClick~~() {\n this.~~sixClear~~.~~emit~~();\n }\n\n ~~render~~() {\n ~~return~~ (\n ~~<span~~\n ~~ref~~={(el) => (this.~~tag~~ = el)}\n part=\"base\"\n class={{\n tag: true,\n\n // Types\n 'tag--primary': this.type === 'primary',\n 'tag--success': this.type === 'success',\n 'tag--info': this.type === 'info',\n 'tag--warning': this.type === 'warning',\n 'tag--danger': this.type === 'danger',\n 'tag--action': this.type === 'action',\n 'tag--text': this.type === 'text',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifers\n 'tag--pill': this.pill,\n 'tag--clear': this.clearable,\n }}\n >\n <span part=\"content\" class=\"tag__content\">\n <slot />\n </span>\n\n {this.clearable && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n size=\"xSmall\"\n name=\"clear\"\n class=\"tag__clear\"\n onClick={this.handleClearClick}\n />\n )}\n </span>\n );\n }\n}\n"],"~~version~~":3}
1	+ {"version":3,"file":"six-tag.entry.js","sources":["src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n overflow: hidden;\n}\n\n.tag {\n display: flex;\n align-items: center;\n border: solid 1px;\n font-family: var(--six-font-family);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n cursor: default;\n}\n\n.tag__content {\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.tag__clear::part(base) {\n color: inherit;\n padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n color: var(--six-color-white);\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-success-500);\n background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-clay-50);\n background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-warning-700);\n background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n color: var(--six-color-white);\n border-color: var(--six-color-danger-800);\n background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n color: var(--six-color-white);\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n font-size: var(--six-button-font-size-small);\n height: calc(var(--six-height-small) * 0.8);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-small);\n padding: 0 var(--six-spacing-x-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xxx-small));\n }\n}\n\n.tag--medium {\n font-size: var(--six-button-font-size-medium);\n height: calc(var(--six-height-medium) * 0.8);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-medium);\n padding: 0 var(--six-spacing-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xx-small));\n }\n}\n\n.tag--large {\n font-size: var(--six-button-font-size-large);\n height: calc(var(--six-height-large) * 0.8);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-large);\n padding: 0 var(--six-spacing-medium);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-x-small));\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n border-radius: var(--six-border-radius-pill);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tag's content.\n \n @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n /\n\n@Component({\n tag: 'six-tag',\n styleUrl: 'six-tag.scss',\n shadow: true,\n})\nexport class SixTag {\n /* The tag's type. /\n @Prop({ reflect: true }) type: 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'action' \| 'text' = 'primary';\n\n /* The tag's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw a pill-style tag with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to make the tag clearable. /\n @Prop({ reflect: true }) clearable = false;\n\n /* Emitted when the clear button is activated. */\n @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n private contentSlotElement: HTMLSlotElement \| undefined;\n private tooltipElement: HTMLSixTooltipElement \| undefined;\n private contentElement: HTMLElement \| undefined;\n private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n connectedCallback() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n componentDidLoad() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private updateTooltip = () => {\n if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n this.tooltipElement.content = getTextContent(this.contentSlotElement);\n this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n }\n };\n\n private handleClearClick = () => {\n this.sixClear.emit();\n };\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n tag: true,\n\n // Types\n 'tag--primary': this.type === 'primary',\n 'tag--success': this.type === 'success',\n 'tag--info': this.type === 'info',\n 'tag--warning': this.type === 'warning',\n 'tag--danger': this.type === 'danger',\n 'tag--action': this.type === 'action',\n 'tag--text': this.type === 'text',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifers\n 'tag--pill': this.pill,\n 'tag--clear': this.clearable,\n }}\n >\n <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n </span>\n </six-tooltip>\n\n {this.clearable && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n size=\"xSmall\"\n name=\"clear\"\n class=\"tag__clear\"\n onClick={this.handleClearClick}\n />\n )}\n </span>\n );\n }\n}\n"],"names":[],"mappings":"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"}