npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.c8fa9a3 → 0.0.0-insider.cc02aea - Mend

@six-group/ui-library 0.0.0-insider.c8fa9a3 → 0.0.0-insider.cc02aea

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"six-switch.entry.js","sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/*\n @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n /\n:host {\n --height: var(--six-selection-control-toggle-size);\n --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n --width: calc(var(--height) 2);\n\n display: inline-block;\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.switch__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--six-selection-control-color-disabled);\n border-radius: var(--height);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color;\n\n .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--six-input-background-color);\n border-radius: 50%;\n transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n transition:\n var(--six-transition-fast) transform ease,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) box-shadow;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n background-color: var(--six-selection-control-color);\n\n .switch__thumb {\n background-color: var(--six-color-white);\n transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n cursor: not-allowed;\n color: var(--six-selection-control-color-disabled);\n\n .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n\n &.switch--checked .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n.switch__label {\n line-height: var(--height);\n margin-left: 0.5em;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n /\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n @State() hasErrorTextSlot = false;\n\n /* The switch's name attribute. /\n @Prop() name = '';\n\n /* The switch's value attribute. /\n @Prop() value = 'on';\n\n /* Set to true to disable the switch. /\n @Prop() disabled = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* Set to true to draw the switch in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n /* Sets focus on the switch. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /* Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"six-switch.entry.js","sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/*\n @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n /\n:host {\n --height: var(--six-selection-control-toggle-size);\n --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n --width: calc(var(--height) 2);\n\n display: inline-block;\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.switch__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--six-selection-control-color-disabled);\n border-radius: var(--height);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color;\n\n .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--six-input-background-color);\n border-radius: 50%;\n transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n transition:\n var(--six-transition-fast) transform ease,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) box-shadow;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n background-color: var(--six-selection-control-color);\n\n .switch__thumb {\n background-color: var(--six-color-white);\n transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n cursor: not-allowed;\n color: var(--six-selection-control-color-disabled);\n\n .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n\n &.switch--checked .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n.switch__label {\n line-height: var(--height);\n margin-left: 0.5em;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n /\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n @State() hasErrorTextSlot = false;\n\n /* The switch's name attribute. /\n @Prop() name = '';\n\n /* The switch's value attribute. /\n @Prop() value = 'on';\n\n /* Set to true to disable the switch. /\n @Prop() disabled = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* Set to true to draw the switch in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n /* Sets focus on the switch. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /* Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,39 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D0Go1Zjj.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-JoG9I7EO.js';
 import { s as scrollIntoView } from './scroll-BY6hIEFX.js';
-/**
- * Animates a given `element` from the position and dimension of `fromElement` to
- * its current position and dimension. Can be useful to implement the FLIP animation technique.
- *
- * @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.
- *
- * @param {Element} element - The element to animate.
- * @param {Element} fromElement - The element representing the initial position and dimensions.
- * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.
- *
- */
-function flipAnimate(element, fromElement, options = {
-    duration: 150,
-    easing: 'ease',
-    fill: 'both',
-}) {
-    const dimensionsTo = fromElement.getBoundingClientRect();
-    const dimensionsFrom = element.getBoundingClientRect();
-    const deltaX = dimensionsTo.left - dimensionsFrom.left;
-    const deltaY = dimensionsTo.top - dimensionsFrom.top;
-    const deltaW = dimensionsTo.width / dimensionsFrom.width;
-    const deltaH = dimensionsTo.height / dimensionsFrom.height;
-    element.animate([
-        {
-            transformOrigin: 'top left',
-            transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,
-        },
-        {
-            transformOrigin: 'top left',
-            transform: 'none',
-        },
-    ], options);
-}
+import { f as flipAnimate } from './animation-SLlDVtvF.js';
 const sixTabGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";
@@ -251,7 +218,7 @@ const SixTabGroup = class {
         });
     }
     render() {
-        return (h("div", { key: '8e1680692b65ef2cf91d3dc3ab9dd76cb8359823', part: "base", ref: (el) => (this.tabGroup = el), class: {
+        return (h("div", { key: '56aaa11f3101ba44544017ee7f881ec20d779b40', part: "base", ref: (el) => (this.tabGroup = el), class: {
                 'tab-group': true,
                 // Placements
                 'tab-group--top': this.placement === 'top',
@@ -259,7 +226,7 @@ const SixTabGroup = class {
                 'tab-group--left': this.placement === 'left',
                 'tab-group--right': this.placement === 'right',
                 'tab-group--has-scroll-controls': this.hasRightControl || this.hasLeftControl,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'bedb1b223b85cd4cf918a3b396fa7e1867016ca6', class: "tab-group__nav-container" }, this.hasLeftControl && (h("six-icon-button", { key: '04a855b42c6258daa8c8759191530be013e6d894', class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })), h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, h("div", { key: 'a7d11be622d317e5d1145f196228f6113c0b50ed', ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { key: '5a669e6d813efc6c5416ebf5f281539842d63e02', name: "nav" }))), this.hasRightControl && (h("six-icon-button", { key: '31d61731441ecef93f315153de71d2ea10f5e58b', class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { key: '68bbdc3b94ee2119fa58d3c6a13a9b135bc941ed', ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", { key: '17de99799e669ae5c18afb6da7e2a23c5c3064e5' }))));
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '439df915243867dc2b8b6fa6b508d99f5dbed623', class: "tab-group__nav-container" }, this.hasLeftControl && (h("six-icon-button", { key: '4921d96aea14fc6ee904b5f56c115fc9dd00c6fa', class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })), h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, h("div", { key: '078cf88dd7be97d186f70f16055b22d5a2a2047b', ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { key: 'b65782fdf2f18b7a59912227293e49c2d3cba83d', name: "nav" }))), this.hasRightControl && (h("six-icon-button", { key: '8273dadfbfb6de487b10b0b7a8e5d6eb3dfa1b81', class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { key: '014ba8c47b65d967dc3eb547f9b282fab8270a58', ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", { key: '488a5b56b66451f1f17802bd0421d4c2d70a773c' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

	@@ -1 +1 @@
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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"}
1	+ {"version":3,"file":"six-tab-group.entry.js","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: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,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-D0Go1Zjj.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-JoG9I7EO.js';
 const sixTabPanelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block;font-family:var(--six-font-family)}.tab-panel{border:solid 1px transparent;padding:20px 20px}";
@@ -15,7 +15,7 @@ const SixTabPanel = class {
     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: '2a0ab4d655a8de97585c947099381c1fab61e858', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: '7ee7661cd01b4390bea7981c4f3fad3e8bb0e6c0', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '21c8561d0a126ef557c1fa9660209f10b6cd7936' }))));
+        h(Host, { key: 'b1d310127f59020a935af04a8bf3df75e6416488', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: 'cb6e790d83b3ad4d843fce91dde842af9bb4588c', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '6e5588f2370b04b078c6567bd1dd0008203e6f43' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D0Go1Zjj.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-JoG9I7EO.js';
-const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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)}";
+const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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.tab--left,.tab.tab--right{display:inline-block;text-align:left}.tab.tab--left::before,.tab.tab--right::before{display:block;font-weight:var(--six-font-weight-bold);content:attr(title);height:0;overflow:hidden;visibility:hidden}.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 {
@@ -34,12 +34,12 @@ const SixTab = class {
         this.sixClose.emit();
     }
     render() {
-        var _a;
+        var _a, _b;
         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: '6b59af3a0794c9ea26b362fa1ea1c0d7513babea', id: this.host.id || this.componentId }, h("div", { key: 'fdb3e8ffb5523a1e6c0f07287925169a0f5fd07f', part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: 'cf68989c61bf87898620dd39ffa5f92907bd2585', id: this.host.id || this.componentId }, h("div", { key: '987c14cf6a61901bdcec0f9029d28f23417f9527', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -50,7 +50,7 @@ const SixTab = class {
                 '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: '907db4032971efbd5a4cfe145db3347404dba051' }), this.closable && (h("six-icon-button", { key: '117fbf10c199b315c8df0f4469b45b63956e156b', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '0227ba2ba257cd478488d2b2d6f580bc5e95340b', part: this.active ? 'active-tab-indicator' : '', class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', title: (_b = this.hoverContent) !== null && _b !== void 0 ? _b : this.host.innerHTML }, h("slot", { key: 'dd6314fa392b9e4a853f50abb5c671c38a764d5f' }), this.closable && (h("six-icon-button", { key: '473fab356355da098555b0699c9ff2a08c778d1d', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '9a662684f5471aea35cfe07072341495e6a20236', part: this.active ? 'active-tab-indicator' : '', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements

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

	@@ -1 +1 @@
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":";;AAAA,MAAM,SAAS,GAAG~~,+yDAA+yD~~;;~~ACGj0D~~,IAAI,EAAE,GAAG,CAAC;MAmBG,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAA,CAAA,WAAW,GAAG,OAAO,EAAE,EAAE,EAAE;;AAMV,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAG/B,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;~~AAGC~~,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;~~AAkF1C~~;~~IA7EC~~,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;;;IAK1D,MAAM,QAAQ,CAAC,OAAsB,EAAA;;QACnC,CAAA,EAAA,GAAA,IAAI,CAAC,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC;;;AAK1B,IAAA,MAAM,WAAW,GAAA;;QACf,CAAA,EAAA,GAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;;IAGV,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;IAGtB,MAAM,GAAA;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;AAClF,QAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,KAAK;QAC9C;;QAEE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAA,EACxC,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;AACL,gBAAA,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;AAC/B,aAAA,EACD,IAAI,EAAC,KAAK,~~EAAA~~,eAAA,~~EACK~~,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,~~EAAA~~,eAAA,~~EAChC~~,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,EAAA,~~EAEpD~~,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CAAC,QAAQ,KACZ,wEACE,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,EAAE,EAAA,aAAA,EACA,MAAM,EAAA,CAClB,CACH,CACG,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,sBAAsB,GAAG,EAAE,EAC/C,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,EACI,CAAA,CACF;;;;;;;;"}
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 &.tab--left,\n &.tab--right {\n display: inline-block;\n text-align: left;\n }\n\n &.tab--left::before,\n &.tab--right::before {\n display: block;\n font-weight: var(--six-font-weight-bold);\n content: attr(title);\n height: 0;\n overflow: hidden;\n visibility: hidden;\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 /* The content to display when the user hovers over the tab's title. Useful if the tab's title has html content in it/\n @Prop() hoverContent?: string;\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 title={this.hoverContent ?? this.host.innerHTML}\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,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-D0Go1Zjj.js';
+import { r as registerInstance, c as createEvent, h } from './index-JoG9I7EO.js';
 import { a as getTextContent } from './slot-j3oIB5oT.js';
-import { d as debounce } from './execution-control-ltzGzaAu.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:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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)}";
@@ -41,7 +41,7 @@ const SixTag = class {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h("span", { key: '6d436b39d9a220ad7e764afb2a61db3c15052bd8', part: "base", class: {
+        return (h("span", { key: 'fa118fba6c2beb1cec064e1dd3a8cc09937358c3', part: "base", class: {
                 tag: true,
                 // Types
                 'tag--primary': this.type === 'primary',
@@ -58,7 +58,7 @@ const SixTag = class {
                 // Modifers
                 'tag--pill': this.pill,
                 'tag--clear': this.clearable,
-            } }, h("six-tooltip", { key: '12faec51f7e0ac427c47037b815564ff6509fa5b', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '38d9b9a805f423491334d8c91463ec7f5c4a5460', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '1dce2aee10cb11b41ea4ff2a3691a7ed6050e3b9', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: 'd31750ec14c421b44ddc7a2f62db6dfd4ac19dd1', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+            } }, h("six-tooltip", { key: '306fac1cde857f9d06c7a646d1f53f4d99ac1464', ref: (el) => (this.tooltipElement = el) }, h("span", { key: 'd44fd48467dc7c31dc7afb213c079d6884183eb6', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '3674beda2a1107fc6509123c655f598019008abf', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: '337b2bd5915e7d8581c1306f96e58a0f3759f9a5', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
     }
 };
 SixTag.style = sixTagCss;

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D0Go1Zjj.js';
-import { F as FormControl } from './form-control-D_uS8E6o.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-JoG9I7EO.js';
+import { F as FormControl } from './form-control-DI6V1ZhR.js';
 import { h as hasSlot } from './slot-j3oIB5oT.js';
 import { E as EventListeners } from './event-listeners-C4h4qpGl.js';
@@ -171,7 +171,7 @@ const SixTextarea = class {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { key: 'e535cb9819c9f78361b451b106349d44aa13bc25', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '5cf703bd10753ce53474c724839745a24769f843', part: "base", class: {
+        return (h(FormControl, { key: '2cb6f77780f4c2c6ffc04ec457b813be55b0a6ee', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '8e00496d1e0053f422375bcd2493cd84626aaf64', part: "base", class: {
                 textarea: true,
                 // Sizes
                 'textarea--small': this.size === 'small',
@@ -186,7 +186,7 @@ const SixTextarea = class {
                 'textarea--resize-none': this.resize === 'none',
                 'textarea--resize-vertical': this.resize === 'vertical',
                 'textarea--resize-auto': this.resize === 'auto',
-            } }, h("textarea", { key: '1a1fc11b8ae91f3c404670a05ea0cc9e0598fa80', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
+            } }, h("textarea", { key: 'e79fefc554fc6d8d4b26b561a40eae2cc7433b11', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D0Go1Zjj.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-JoG9I7EO.js';
 import { h as hasSlot, g as getSlot } from './slot-j3oIB5oT.js';
 const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
@@ -57,22 +57,22 @@ const SixTile = class {
         this.handleSlotChange();
     }
     render() {
-        return (h("six-tooltip", { key: '8bab8c04079d331d563099673f512ae71d6f1286', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: '449bfabf58a6aeba71a1e0b755cf05c5e25b34fe', part: "base", class: {
+        return (h("six-tooltip", { key: '2b2b13f07d07c1f0c90cdfe50f274a98118550a1', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: 'f3ed6365066484ec1b4699c9e5311348747cd8d8', part: "base", class: {
                 tile: true,
                 'tile--visible': this.visible,
                 'tile--small': this.size === 'small',
                 'tile--medium': this.size === 'medium',
                 'tile--large': this.size === 'large',
                 'tile--elevated': this.elevated,
-            } }, h("div", { key: '56d729edf7027563b7172f3f9b18345906e50dff', part: "header", class: "tile__header" }, h("six-icon-button", { key: '7cd9016baa63f562c3b1d0972b3b222c55f9f555', class: {
+            } }, h("div", { key: 'c27ba89ba037b289754169db65bfab716792b551', part: "header", class: "tile__header" }, h("six-icon-button", { key: '9eb0eea2c2ec217cdda335b5d5412ac0e5944297', class: {
                 'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: '2e6d7d3e708360a4018db6dab1daee7a13cd671b', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: '2e0d64a50d9064909c3a0f41a8d8052df6ce1941', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: '84c53bc538cfedda0b1365cafb64c86feaf1d5f3', name: "icon" })), h("div", { key: '46e70b405a6d28c09bd6d3a2a9530fcb0415595c', part: "footer", class: {
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: 'f146d52f032ecf33b3c0cd06471f17c419fd47c0', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: '716cb94b53b0b2272fb70450d0fd77f5a3480d18', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: '791d752d7a3360fdf7424cbafa375ee22d0063b1', name: "icon" })), h("div", { key: 'e03ab0f392a7defc5107f2ec73b0b60b6d3387ca', part: "footer", class: {
                 'tile__footer--small': this.size === 'small',
                 'tile__footer--medium': this.size === 'medium',
                 'tile__footer--large': this.size === 'large',
-            } }, this.label && (h("div", { key: '35774ca3faf7192113f5550375ff895a2873bc1f', class: {
+            } }, this.label && (h("div", { key: '869d56ac50b7c27c1c42ce0ba1368d6bb52d5344', class: {
                 '.label__footer': true,
-            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: '8c1ce8e5e504e6d33f41c0a9f38862fdddd619b1', name: "label" })))));
+            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: '8d5cad1b2b36a42e4f34d78201d03f7160b7ddbd', name: "label" })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D0Go1Zjj.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-JoG9I7EO.js';
 import { I as ItemPickerType } from './types-WA6V9mN8.js';
-import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, d as debounce } from './execution-control-ltzGzaAu.js';
+import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control-CKhg9ibv.js';
 import { E as EventListeners } from './event-listeners-C4h4qpGl.js';
 import { h as hasSlot } from './slot-j3oIB5oT.js';
 import { a as adjustPopupForHoisting, m as movePopup } from './popup-Dd6pdO8C.js';
@@ -221,6 +221,9 @@ const SixTimepicker = class {
         };
         this.handleClearClick = (event) => {
             event.stopPropagation();
+            if (this.inputElement != null) {
+                this.inputElement.value = '';
+            }
             this.value = '';
             this.sixClear.emit();
             this.sixChange.emit({
@@ -278,13 +281,15 @@ const SixTimepicker = class {
                 });
                 return;
             }
-            // update value and popup value, and emit the new value
-            this.value = inputElement.value;
-            this.popupValue = parseTimeString(inputElement.value, this.format);
-            this.sixChange.emit({
-                value: this.popupValue,
-                valueAsString: createTimeString(this.popupValue, this.format),
-            });
+            else {
+                // update value and popup value and emit the new value
+                this.value = inputElement.value;
+                this.popupValue = parseTimeString(inputElement.value, this.format);
+                this.sixChange.emit({
+                    value: this.popupValue,
+                    valueAsString: createTimeString(this.popupValue, this.format),
+                });
+            }
         }, this.debounce));
     }
     componentDidRender() {
@@ -298,6 +303,9 @@ const SixTimepicker = class {
         if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {
             this.value = '';
         }
+        else if (this.inputElement != null) {
+            this.inputElement.value = this.value;
+        }
         // update popup value
         if (this.value === '') {
             if (this.defaultTime == null) {
@@ -430,12 +438,12 @@ const SixTimepicker = class {
             } }, icon));
     }
     render() {
-        return (h("div", { key: '58240c7c32227225d1811fa59e9cf336aad03a4d', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { key: '1b6e9b28d997b67a933d055fa3e73e3c0751aa53', ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
+        return (h("div", { key: 'a3496612a52df399ccd8cb88e2f3564432758b74', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { key: 'ca426a5b063102ea92550ed6779a46c56a663a22', ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
                 'input--empty': this.value === '',
                 'input--hide': this.inline,
-            } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { key: 'b762116d0af1bc11d7f2cbb255b071e8fe3b52cf', ref: (el) => (this.popup = el), part: "popup", class: {
+            } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { key: '8c03ea793c9452af88fe41699ec58b526057d834', ref: (el) => (this.popup = el), part: "popup", class: {
                 timepicker__popup: true,
-                'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,
+                'timepicker__popup--is-up': this.placement == null ? this.isPopupContentUp : this.placement === 'top',
                 'timepicker__popup--is-inline': this.inline,
             } }, ...this.getContent(), this.getAmPmPicker()))));
     }