npm - @six-group/ui-library - Versions diffs - 4.1.2 → 4.2.0 - Mend

@six-group/ui-library 4.1.2 → 4.2.0

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

Files changed (670) hide show

package/dist/collection/components/six-switch/six-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-switch.js","sourceRoot":"","sources":["../../../src/components/six-switch/six-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"six-switch.js","sourceRoot":"","sources":["../../../src/components/six-switch/six-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/six-tab/six-tab.js CHANGED Viewed

@@ -41,7 +41,7 @@ export class SixTab {
         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, { id: this.host.id || this.componentId }, h("div", { part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: 'c5b8229e0f721259a30d70e4756ae4504c915d0f', id: this.host.id || this.componentId }, h("div", { key: '2f3b8d1d278020352802f885a859232370cbbcb3', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -52,7 +52,7 @@ export class SixTab {
                 'tab--active': this.active,
                 'tab--closable': this.closable,
                 'tab--disabled': this.disabled,
-            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", null), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '31c108fd748bf326b1dd40a92d2b35eaef7f8c29', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements

package/dist/collection/components/six-tab/six-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,MAAM;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,6BAA6B;IAE7B,KAAK,CAAC,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;IAED,kCAAkC;IAElC,KAAK,CAAC,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;IACnB,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C,OAAO;QACL,uGAAuG;QACvG,EAAC,IAAI,~~IAAC~~,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW;YACxC,~~WACE~~,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;oBACL,GAAG,EAAE,IAAI;oBAET,aAAa;oBACb,UAAU,EAAE,SAAS,KAAK,KAAK;oBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;oBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;oBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;oBAEnC,SAAS;oBACT,aAAa,EAAE,IAAI,CAAC,MAAM;oBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;oBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;iBAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;gBAEpD,~~eAAQ~~;gBACP,IAAI,CAAC,QAAQ,IAAI,CAChB,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG;YACN,~~WACE~~,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;oBAErC,aAAa;oBACb,qBAAqB,EAAE,SAAS,KAAK,KAAK;oBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;oBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;oBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;iBAC/C,GACI,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 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"]}
1	+ {"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["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 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"]}

package/dist/collection/components/six-tab-group/six-tab-group.js CHANGED Viewed

@@ -84,7 +84,8 @@ export class SixTabGroup {
                 behavior: 'smooth',
             });
         };
-        this.hasScrollControls = false;
+        this.hasLeftControl = false;
+        this.hasRightControl = false;
         this.placement = 'top';
         this.noScrollControls = false;
     }
@@ -106,6 +107,13 @@ export class SixTabGroup {
         this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
         this.resizeObserver.observe(this.nav);
         requestAnimationFrame(() => this.updateScrollControls());
+        this.nav.addEventListener('scroll', () => {
+            if (this.nav == null) {
+                return;
+            }
+            this.hasRightControl = this.calculateRightControlVisibility();
+            this.hasLeftControl = this.calculateLeftControlVisibility();
+        });
         // Update aria labels if the DOM changes
         this.mutationObserver = new MutationObserver((mutations) => {
             if (mutations.some((mutation) => {
@@ -153,12 +161,29 @@ export class SixTabGroup {
     getActiveTab() {
         return this.getAllTabs().find((el) => el.active);
     }
+    calculateRightControlVisibility() {
+        var _a, _b, _c;
+        if (this.nav == null) {
+            return false;
+        }
+        return Math.abs((_a = this.nav) === null || _a === void 0 ? void 0 : _a.scrollLeft) + ((_b = this.nav) === null || _b === void 0 ? void 0 : _b.clientWidth) < ((_c = this.nav) === null || _c === void 0 ? void 0 : _c.scrollWidth) - 1;
+    }
+    calculateLeftControlVisibility() {
+        var _a;
+        if (this.nav == null) {
+            return false;
+        }
+        return Math.abs((_a = this.nav) === null || _a === void 0 ? void 0 : _a.scrollLeft) > 0;
+    }
     updateScrollControls() {
         if (this.nav == null)
             return;
-        this.hasScrollControls = this.noScrollControls
+        this.hasRightControl = this.noScrollControls
+            ? false
+            : ['top', 'bottom'].includes(this.placement) && this.calculateRightControlVisibility();
+        this.hasLeftControl = this.noScrollControls
             ? false
-            : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+            : ['top', 'bottom'].includes(this.placement) && this.calculateLeftControlVisibility();
     }
     setActiveTab(tab, emitEvents = true) {
         var _a, _b, _c;
@@ -201,15 +226,15 @@ export class SixTabGroup {
         });
     }
     render() {
-        return (h("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
+        return (h("div", { key: '9f4e3129b3330d6393261e20c28e8f7ce859b431', part: "base", ref: (el) => (this.tabGroup = el), class: {
                 'tab-group': true,
                 // Placements
                 'tab-group--top': this.placement === 'top',
                 'tab-group--bottom': this.placement === 'bottom',
                 'tab-group--left': this.placement === 'left',
                 'tab-group--right': this.placement === 'right',
-                'tab-group--has-scroll-controls': this.hasScrollControls,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "tab-group__nav-container" }, this.hasScrollControls && (h("six-icon-button", { 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", { ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { name: "nav" }))), this.hasScrollControls && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", null))));
+                'tab-group--has-scroll-controls': this.hasRightControl || this.hasLeftControl,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'd9367d79c9cba004d253a0b831874563af24df47', class: "tab-group__nav-container" }, this.hasLeftControl && (h("six-icon-button", { 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: '464cd0b03882b7c1a8e29e18dc9a170f3a31cd89', ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { key: '91bc9d0b4eb40596e5b3bbf39dd613ac7c338fb5', name: "nav" }))), this.hasRightControl && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { key: 'adfcd725eb3ff69c9dc5cc346d4803598d66c84f', ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", { key: '84d4c9d5a263e4faaa9274eea7b208b7001f8ac7' }))));
     }
     static get is() { return "six-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -265,7 +290,8 @@ export class SixTabGroup {
     }
     static get states() {
         return {
-            "hasScrollControls": {}
+            "hasLeftControl": {},
+            "hasRightControl": {}
         };
     }
     static get events() {

package/dist/collection/components/six-tab-group/six-tab-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-tab-group.js","sourceRoot":"","sources":["../../../src/components/six-tab-group/six-tab-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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() hasScrollControls = false;\n\n /* The placement of the tabs. /\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n\n /* Disables the scroll arrows that appear when tabs overflow. /\n @Prop() noScrollControls = false;\n\n @Watch('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 // 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 updateScrollControls() {\n if (this.nav == null) return;\n\n this.hasScrollControls = this.noScrollControls\n ? false\n : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\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.hasScrollControls,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\">\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_left\"\n onClick={this.handleScrollLeft}\n />\n )}\n <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <slot name=\"nav\" />\n </div>\n </div>\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_right\"\n onClick={this.handleScrollRight}\n />\n )}\n </div>\n\n <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n <slot />\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-tab-group.js","sourceRoot":"","sources":["../../../src/components/six-tab-group/six-tab-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/six-tab-panel/six-tab-panel.js CHANGED Viewed

@@ -19,7 +19,7 @@ export class SixTabPanel {
     render() {
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", null))));
+        h(Host, { key: '6b8958e2148c21062d9d871ffe7a016b2fa8a1c5', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: 'a35fd74db0e878943ccc49d7f33746ac1f5fc221', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '6de9b87d93c055a9c4de931139c7da3a366a2aa1' }))));
     }
     static get is() { return "six-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-tab-panel/six-tab-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-tab-panel.js","sourceRoot":"","sources":["../../../src/components/six-tab-panel/six-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;GASG;AAOH,MAAM,OAAO,WAAW;;QACd,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;oBAK3B,EAAE;sBAGiB,KAAK;;IAEvC,MAAM;QACJ,OAAO;QACL,uGAAuG;QACvG,EAAC,IAAI,~~IAAC~~,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;YAC5F,~~WACE~~,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;gBAE3C,~~eAAQ~~,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tab panel's content.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-tab-panel',\n styleUrl: 'six-tab-panel.scss',\n shadow: true,\n})\nexport class SixTabPanel {\n private componentId = `tab-panel-${++id}`;\n\n @Element() host!: HTMLSixTabPanelElement;\n\n /* The tab panel's name. /\n @Prop() name = '';\n\n /* When true, the tab panel will be shown. */\n @Prop({ reflect: true }) active = false;\n\n render() {\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id \|\| this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n <div\n part=\"base\"\n class=\"tab-panel\"\n role=\"tabpanel\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-hidden={this.active ? 'false' : 'true'}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-tab-panel.js","sourceRoot":"","sources":["../../../src/components/six-tab-panel/six-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;GASG;AAOH,MAAM,OAAO,WAAW;;QACd,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;oBAK3B,EAAE;sBAGiB,KAAK;;IAEvC,MAAM;QACJ,OAAO;QACL,uGAAuG;QACvG,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;YAC5F,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;gBAE3C,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tab panel's content.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-tab-panel',\n styleUrl: 'six-tab-panel.scss',\n shadow: true,\n})\nexport class SixTabPanel {\n private componentId = `tab-panel-${++id}`;\n\n @Element() host!: HTMLSixTabPanelElement;\n\n /* The tab panel's name. /\n @Prop() name = '';\n\n /* When true, the tab panel will be shown. */\n @Prop({ reflect: true }) active = false;\n\n render() {\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id \|\| this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n <div\n part=\"base\"\n class=\"tab-panel\"\n role=\"tabpanel\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-hidden={this.active ? 'false' : 'true'}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/six-tag/six-tag.js CHANGED Viewed

@@ -44,7 +44,7 @@ export class SixTag {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h("span", { part: "base", class: {
+        return (h("span", { key: '59306674f01f712bc2e9daa94716f53120855b5c', part: "base", class: {
                 tag: true,
                 // Types
                 'tag--primary': this.type === 'primary',
@@ -61,7 +61,7 @@ export class SixTag {
                 // Modifers
                 'tag--pill': this.pill,
                 'tag--clear': this.clearable,
-            } }, h("six-tooltip", { ref: (el) => (this.tooltipElement = el) }, h("span", { ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+            } }, h("six-tooltip", { key: 'ed368646e7f65e5ad2976f22175512d48328da36', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '21f45d81e1f0e4778d552b20d11cfcc88bec66ae', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '948620efe64b5a923cf8b65a2f8c3792bdf8e476', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
     }
     static get is() { return "six-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-tag/six-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-tag.js","sourceRoot":"","sources":["../../../src/components/six-tag/six-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,MAAM;;QAmBT,mBAAc,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QAkB1E,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;~~gBACjG~~,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBACtE,IAAI,CAAC,cAAc,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;~~aACrG~~;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC,CAAC;oBA5CyG,SAAS;oBAGtD,QAAQ;oBAGtC,KAAK;yBAGA,KAAK;;IAU1C,iBAAiB;QACf,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;~~YAC/B~~,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;~~SAClD~~;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;~~YAC/B~~,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;~~SAClD~~;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAaD,MAAM;QACJ,OAAO,CACL,~~YACE~~,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;gBAET,QAAQ;gBACR,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBAEjC,QAAQ;gBACR,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAEnC,WAAW;gBACX,WAAW,EAAE,IAAI,CAAC,IAAI;gBACtB,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B;YAED,~~mBAAa~~,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;gBAClD,~~YAAM~~,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc;oBAChF,~~YAAM~~,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAqB,CAAC,GAAI,CACnE,CACK;YAEb,IAAI,CAAC,SAAS,IAAI,CACjB,uBACE,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tag's content.\n \n @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n /\n\n@Component({\n tag: 'six-tag',\n styleUrl: 'six-tag.scss',\n shadow: true,\n})\nexport class SixTag {\n /* The tag's type. /\n @Prop({ reflect: true }) type: 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'action' \| 'text' = 'primary';\n\n /* The tag's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw a pill-style tag with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to make the tag clearable. /\n @Prop({ reflect: true }) clearable = false;\n\n /* Emitted when the clear button is activated. */\n @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n private contentSlotElement: HTMLSlotElement \| undefined;\n private tooltipElement: HTMLSixTooltipElement \| undefined;\n private contentElement: HTMLElement \| undefined;\n private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n connectedCallback() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n componentDidLoad() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private updateTooltip = () => {\n if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n this.tooltipElement.content = getTextContent(this.contentSlotElement);\n this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n }\n };\n\n private handleClearClick = () => {\n this.sixClear.emit();\n };\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n tag: true,\n\n // Types\n 'tag--primary': this.type === 'primary',\n 'tag--success': this.type === 'success',\n 'tag--info': this.type === 'info',\n 'tag--warning': this.type === 'warning',\n 'tag--danger': this.type === 'danger',\n 'tag--action': this.type === 'action',\n 'tag--text': this.type === 'text',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifers\n 'tag--pill': this.pill,\n 'tag--clear': this.clearable,\n }}\n >\n <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n </span>\n </six-tooltip>\n\n {this.clearable && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n size=\"xSmall\"\n name=\"clear\"\n class=\"tag__clear\"\n onClick={this.handleClearClick}\n />\n )}\n </span>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-tag.js","sourceRoot":"","sources":["../../../src/components/six-tag/six-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tag's content.\n \n @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n /\n\n@Component({\n tag: 'six-tag',\n styleUrl: 'six-tag.scss',\n shadow: true,\n})\nexport class SixTag {\n /* The tag's type. /\n @Prop({ reflect: true }) type: 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'action' \| 'text' = 'primary';\n\n /* The tag's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw a pill-style tag with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to make the tag clearable. /\n @Prop({ reflect: true }) clearable = false;\n\n /* Emitted when the clear button is activated. */\n @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n private contentSlotElement: HTMLSlotElement \| undefined;\n private tooltipElement: HTMLSixTooltipElement \| undefined;\n private contentElement: HTMLElement \| undefined;\n private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n connectedCallback() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n componentDidLoad() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private updateTooltip = () => {\n if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n this.tooltipElement.content = getTextContent(this.contentSlotElement);\n this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n }\n };\n\n private handleClearClick = () => {\n this.sixClear.emit();\n };\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n tag: true,\n\n // Types\n 'tag--primary': this.type === 'primary',\n 'tag--success': this.type === 'success',\n 'tag--info': this.type === 'info',\n 'tag--warning': this.type === 'warning',\n 'tag--danger': this.type === 'danger',\n 'tag--action': this.type === 'action',\n 'tag--text': this.type === 'text',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifers\n 'tag--pill': this.pill,\n 'tag--clear': this.clearable,\n }}\n >\n <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n </span>\n </six-tooltip>\n\n {this.clearable && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n size=\"xSmall\"\n name=\"clear\"\n class=\"tag__clear\"\n onClick={this.handleClearClick}\n />\n )}\n </span>\n );\n }\n}\n"]}

package/dist/collection/components/six-textarea/six-textarea.js CHANGED Viewed

@@ -167,7 +167,7 @@ export class SixTextarea {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { 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", { part: "base", class: {
+        return (h(FormControl, { key: '57cd35c0594401cba7b1973ac2e589c4238ee8a1', 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: '01e10905f647a5ade903731024279660ecf963f7', part: "base", class: {
                 textarea: true,
                 // Sizes
                 'textarea--small': this.size === 'small',
@@ -182,7 +182,7 @@ export class SixTextarea {
                 'textarea--resize-none': this.resize === 'none',
                 'textarea--resize-vertical': this.resize === 'vertical',
                 'textarea--resize-auto': this.resize === 'auto',
-            } }, h("textarea", { 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: '376b3fa4959ee044417f7262877f7b97a8483859', 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 }))));
     }
     static get is() { return "six-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-textarea/six-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-textarea.js","sourceRoot":"","sources":["../../../src/components/six-textarea/six-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\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 label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\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 form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n /\n@Component({\n tag: 'six-textarea',\n styleUrl: 'six-textarea.scss',\n shadow: true,\n})\nexport class SixTextarea {\n private inputId = `textarea-${++id}`;\n private labelId = `textarea-label-${id}`;\n private helpTextId = `textarea-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeTextarea?: HTMLTextAreaElement;\n private eventListeners = new EventListeners();\n private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n @Element() host!: HTMLSixTextareaElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n\n /* The textarea's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The textarea's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The textarea's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* The textarea's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The textarea's placeholder text. /\n @Prop() placeholder?: string;\n\n /* The number of rows to display by default. /\n @Prop() rows = 4;\n\n /* Controls how the textarea can be resized. /\n @Prop() resize: 'none' \| 'vertical' \| 'auto' = 'vertical';\n\n /* Set to true to disable the textarea. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true for a readonly textarea. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = 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 /* The textarea's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The textarea's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The textarea's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The textarea's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* The textarea's spellcheck attribute. /\n @Prop() spellcheck = false;\n\n /* The textarea's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('rows')\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeTextarea != null) {\n if (this.nativeTextarea.value !== this.value) {\n this.nativeTextarea.value = this.value;\n }\n }\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-textarea-input', 'input', this.host);\n this.eventListeners.forward('six-textarea-change', 'change', this.host);\n this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.setTextareaHeight();\n if (this.nativeTextarea != null) {\n this.resizeObserver.observe(this.nativeTextarea);\n }\n }\n\n disconnectedCallback() {\n if (this.nativeTextarea != null) {\n this.resizeObserver.unobserve(this.nativeTextarea);\n }\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the textarea. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeTextarea?.focus(options);\n }\n\n /* Removes focus fromt the textarea. /\n @Method()\n async removeFocus() {\n this.nativeTextarea?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeTextarea?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeTextarea == null) return;\n\n this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeTextarea.value) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private setTextareaHeight() {\n if (this.nativeTextarea == null) return;\n\n if (this.resize === 'auto') {\n this.nativeTextarea.style.height = 'auto';\n this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n } else {\n (this.nativeTextarea.style.height as string \| undefined) = undefined;\n }\n }\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n textarea: true,\n\n // Sizes\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n\n // States\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': this.getValue().length === 0,\n 'textarea--invalid': this.invalid,\n\n // Modifiers\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto',\n }}\n >\n <textarea\n part=\"textarea\"\n ref={(el) => (this.nativeTextarea = el)}\n id={this.inputId}\n class=\"textarea__control\"\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.readonly}\n rows={this.rows}\n minLength={this.minlength}\n maxLength={this.maxlength}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n </FormControl>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-textarea.js","sourceRoot":"","sources":["../../../src/components/six-textarea/six-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\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 label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\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 form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n /\n@Component({\n tag: 'six-textarea',\n styleUrl: 'six-textarea.scss',\n shadow: true,\n})\nexport class SixTextarea {\n private inputId = `textarea-${++id}`;\n private labelId = `textarea-label-${id}`;\n private helpTextId = `textarea-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeTextarea?: HTMLTextAreaElement;\n private eventListeners = new EventListeners();\n private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n @Element() host!: HTMLSixTextareaElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n\n /* The textarea's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The textarea's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The textarea's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* The textarea's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The textarea's placeholder text. /\n @Prop() placeholder?: string;\n\n /* The number of rows to display by default. /\n @Prop() rows = 4;\n\n /* Controls how the textarea can be resized. /\n @Prop() resize: 'none' \| 'vertical' \| 'auto' = 'vertical';\n\n /* Set to true to disable the textarea. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true for a readonly textarea. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = 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 /* The textarea's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The textarea's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The textarea's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The textarea's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* The textarea's spellcheck attribute. /\n @Prop() spellcheck = false;\n\n /* The textarea's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('rows')\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeTextarea != null) {\n if (this.nativeTextarea.value !== this.value) {\n this.nativeTextarea.value = this.value;\n }\n }\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-textarea-input', 'input', this.host);\n this.eventListeners.forward('six-textarea-change', 'change', this.host);\n this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.setTextareaHeight();\n if (this.nativeTextarea != null) {\n this.resizeObserver.observe(this.nativeTextarea);\n }\n }\n\n disconnectedCallback() {\n if (this.nativeTextarea != null) {\n this.resizeObserver.unobserve(this.nativeTextarea);\n }\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the textarea. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeTextarea?.focus(options);\n }\n\n /* Removes focus fromt the textarea. /\n @Method()\n async removeFocus() {\n this.nativeTextarea?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeTextarea?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeTextarea == null) return;\n\n this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeTextarea.value) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private setTextareaHeight() {\n if (this.nativeTextarea == null) return;\n\n if (this.resize === 'auto') {\n this.nativeTextarea.style.height = 'auto';\n this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n } else {\n (this.nativeTextarea.style.height as string \| undefined) = undefined;\n }\n }\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n textarea: true,\n\n // Sizes\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n\n // States\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': this.getValue().length === 0,\n 'textarea--invalid': this.invalid,\n\n // Modifiers\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto',\n }}\n >\n <textarea\n part=\"textarea\"\n ref={(el) => (this.nativeTextarea = el)}\n id={this.inputId}\n class=\"textarea__control\"\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.readonly}\n rows={this.rows}\n minLength={this.minlength}\n maxLength={this.maxlength}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n </FormControl>\n );\n }\n}\n"]}

package/dist/collection/components/six-textarea/test/six-textarea.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-textarea.spec.js","sourceRoot":"","sources":["../../../../src/components/six-textarea/test/six-textarea.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAY,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAM9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,IAAI,IAAgC,CAAC;IACrC,IAAI,QAA6B,CAAC;IAElC,UAAU,CAAC,KAAK,IAAI,EAAE;;QACpB,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC;YAC1D,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;YAClB,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;YACpB,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;SACtB,CAAC,CAAC,CAAC;QAEJ,IAAI,GAAG,CAAC,MAAM,WAAW,CAAC;YACxB,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,+BAA+B;YACrC,iBAAiB,EAAE,IAAI;SACxB,CAAC,CAA+B,CAAC;QAElC,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAChE,IAAI,OAAO,IAAI,IAAI,EAAE;~~YACnB~~,QAAQ,GAAG,OAAO,CAAC;YACnB,OAAO;~~SACR~~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","sourcesContent":["import { newSpecPage, SpecPage } from '@stencil/core/testing';\nimport { SixTextarea } from '../six-textarea';\n\ninterface TypedSpecPage<T> extends SpecPage {\n root: HTMLElement & T;\n}\n\ndescribe('six-textarea', () => {\n let page: TypedSpecPage<SixTextarea>;\n let textarea: HTMLTextAreaElement;\n\n beforeEach(async () => {\n global.ResizeObserver = jest.fn().mockImplementation(() => ({\n observe: jest.fn(),\n unobserve: jest.fn(),\n disconnect: jest.fn(),\n }));\n\n page = (await newSpecPage({\n components: [SixTextarea],\n html: `<six-textarea></six-textarea>`,\n supportsShadowDom: true,\n })) as TypedSpecPage<SixTextarea>;\n\n const element = page.root.shadowRoot?.querySelector('textarea');\n if (element != null) {\n textarea = element;\n return;\n }\n fail('textarea not found');\n });\n\n it('renders', async () => {\n // then\n expect(page.root).toEqualHtml(`\n <six-textarea size=\"medium\" value=\"\">\n <mock:shadow-root>\n <div class=\"form-control form-control--medium\" part=\"form-control\">\n <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"textarea-1\" id=\"textarea-label-1\" part=\"label\">\n <slot name=\"label\"></slot>\n </label>\n <div class=\"form-control__input\">\n <div class=\"textarea textarea--empty textarea--medium textarea--resize-vertical\" part=\"base\"><textarea aria-labelledby=\"textarea-label-1\" autocapitalize=\"off\" autocorrect=\"off\" class=\"textarea__control\" id=\"textarea-1\" part=\"textarea\" rows=\"4\" value=\"\"></textarea>\n </div>\n </div>\n <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-1\" part=\"error-text\">\n <slot name=\"error-text\"></slot>\n </div>\n <div aria-hidden=\"true\" class=\"form-control__help-text\" id=\"textarea-help-text-1\" part=\"help-text\">\n <slot name=\"help-text\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n </six-textarea>\n `);\n });\n\n it('should properly dispatch blur event', async () => {\n const spy = jest.fn();\n page.root.addEventListener('six-textarea-blur', spy);\n await page.waitForChanges();\n\n // when\n textarea.dispatchEvent(new Event('blur'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-blur',\n })\n );\n\n // when\n page.root.value = 'some new value';\n await page.waitForChanges();\n textarea.dispatchEvent(new Event('blur'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-blur',\n })\n );\n });\n\n it('should properly dispatch focus event', async () => {\n const spy = jest.fn();\n page.root.addEventListener('six-textarea-focus', spy);\n await page.waitForChanges();\n\n // when\n textarea.dispatchEvent(new Event('focus'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-focus',\n })\n );\n\n // when\n page.root.value = 'some new value';\n await page.waitForChanges();\n textarea.dispatchEvent(new Event('focus'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-focus',\n })\n );\n });\n\n it('should properly dispatch input event', async () => {\n const spy = jest.fn();\n page.root.addEventListener('six-textarea-input', spy);\n await page.waitForChanges();\n\n // when\n textarea.dispatchEvent(new Event('input'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-input',\n })\n );\n\n // when\n page.root.value = 'some new value';\n await page.waitForChanges();\n textarea.dispatchEvent(new Event('input'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-input',\n })\n );\n });\n});\n"]}
1	+ {"version":3,"file":"six-textarea.spec.js","sourceRoot":"","sources":["../../../../src/components/six-textarea/test/six-textarea.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from '@stencil/core/testing';\nimport { SixTextarea } from '../six-textarea';\n\ninterface TypedSpecPage<T> extends SpecPage {\n root: HTMLElement & T;\n}\n\ndescribe('six-textarea', () => {\n let page: TypedSpecPage<SixTextarea>;\n let textarea: HTMLTextAreaElement;\n\n beforeEach(async () => {\n global.ResizeObserver = jest.fn().mockImplementation(() => ({\n observe: jest.fn(),\n unobserve: jest.fn(),\n disconnect: jest.fn(),\n }));\n\n page = (await newSpecPage({\n components: [SixTextarea],\n html: `<six-textarea></six-textarea>`,\n supportsShadowDom: true,\n })) as TypedSpecPage<SixTextarea>;\n\n const element = page.root.shadowRoot?.querySelector('textarea');\n if (element != null) {\n textarea = element;\n return;\n }\n fail('textarea not found');\n });\n\n it('renders', async () => {\n // then\n expect(page.root).toEqualHtml(`\n <six-textarea size=\"medium\" value=\"\">\n <mock:shadow-root>\n <div class=\"form-control form-control--medium\" part=\"form-control\">\n <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"textarea-1\" id=\"textarea-label-1\" part=\"label\">\n <slot name=\"label\"></slot>\n </label>\n <div class=\"form-control__input\">\n <div class=\"textarea textarea--empty textarea--medium textarea--resize-vertical\" part=\"base\"><textarea aria-labelledby=\"textarea-label-1\" autocapitalize=\"off\" autocorrect=\"off\" class=\"textarea__control\" id=\"textarea-1\" part=\"textarea\" rows=\"4\" value=\"\"></textarea>\n </div>\n </div>\n <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-1\" part=\"error-text\">\n <slot name=\"error-text\"></slot>\n </div>\n <div aria-hidden=\"true\" class=\"form-control__help-text\" id=\"textarea-help-text-1\" part=\"help-text\">\n <slot name=\"help-text\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n </six-textarea>\n `);\n });\n\n it('should properly dispatch blur event', async () => {\n const spy = jest.fn();\n page.root.addEventListener('six-textarea-blur', spy);\n await page.waitForChanges();\n\n // when\n textarea.dispatchEvent(new Event('blur'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-blur',\n })\n );\n\n // when\n page.root.value = 'some new value';\n await page.waitForChanges();\n textarea.dispatchEvent(new Event('blur'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-blur',\n })\n );\n });\n\n it('should properly dispatch focus event', async () => {\n const spy = jest.fn();\n page.root.addEventListener('six-textarea-focus', spy);\n await page.waitForChanges();\n\n // when\n textarea.dispatchEvent(new Event('focus'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-focus',\n })\n );\n\n // when\n page.root.value = 'some new value';\n await page.waitForChanges();\n textarea.dispatchEvent(new Event('focus'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-focus',\n })\n );\n });\n\n it('should properly dispatch input event', async () => {\n const spy = jest.fn();\n page.root.addEventListener('six-textarea-input', spy);\n await page.waitForChanges();\n\n // when\n textarea.dispatchEvent(new Event('input'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-input',\n })\n );\n\n // when\n page.root.value = 'some new value';\n await page.waitForChanges();\n textarea.dispatchEvent(new Event('input'));\n await page.waitForChanges();\n\n // then\n expect(spy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: undefined,\n type: 'six-textarea-input',\n })\n );\n });\n});\n"]}

package/dist/collection/components/six-tile/six-tile.js CHANGED Viewed

@@ -48,16 +48,16 @@ export class SixTile {
         this.handleSlotChange();
     }
     render() {
-        return (h("six-tooltip", { disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { part: "base", class: {
+        return (h("six-tooltip", { key: 'cab94c6d0cd1088f15d70709ffae09ab27f4c3ab', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: '124e2e6bec97f3c6c12a7426f22272602b71b782', 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", { part: "header", class: "tile__header" }, h("six-icon-button", { class: {
+            } }, h("div", { key: '49c9f506ca66a50e0ff2bab1da4ea66b6a9c5e8b', part: "header", class: "tile__header" }, h("six-icon-button", { key: '45e2b3878f8cb844e80e0d26285b2a37d8a3356f', class: {
                 'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { name: "icon" })), h("div", { part: "footer", class: {
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: '2d030da9982efd1cd0b33c9fcd85e30764516454', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { name: "icon" })), h("div", { key: 'd0b090d95076b64f29582d7c171fb1570ade78c2', part: "footer", class: {
                 'tile__footer--small': this.size === 'small',
                 'tile__footer--medium': this.size === 'medium',
                 'tile__footer--large': this.size === 'large',