@ncino/web-components 6.0.0-preview.2 → 6.0.0-preview.3
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.
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as d}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.0/node_modules/lit-element/lit-element.js";import{customElement as p}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as n}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/property.js";import"../tab/tab.gator.js";import{KEY_CONSTANTS as o}from"../../../../consts/key-constants.js";import{createRef as u,ref as v}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{TestableLitElement as f}from"../../../../utils/components/testable-lit-element/testable-lit-element.js";import m from"../../../../packages/web-components/src/components/tabs/gator/tabs.gator.scss.js";import T from"../../../../packages/web-components/src/components/tabs/gator/tabs.gator.tokens.scss.js";import g from"../../../../packages/web-components/src/tokens/semantic.tokens.scss.js";import $ from"../../../../packages/web-components/src/tokens/primitive.tokens.scss.js";import{ifDefined as y}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/if-defined.js";import{unsafeCSS as l}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var I=Object.defineProperty,A=Object.getOwnPropertyDescriptor,r=(t,e,i,b)=>{for(var a=b>1?void 0:b?A(e,i):e,h=t.length-1,c;h>=0;h--)(c=t[h])&&(a=(b?c(e,i,a):c(a))||a);return b&&a&&I(e,i,a),a};let s=class extends f{constructor(){super(...arguments),this.tabsetAriaLabelledByElements=[],this.tabsetAriaLabel=void 0,this.size="medium",this.activeTabIndex=0,this._contentRef=u(),this._tablistRef=u()}updated(t){super.updated(t),t.has("tabsetAriaLabelledByElements")&&(this._tablistRef.value.ariaLabelledByElements=this.tabsetAriaLabelledByElements)}render(){return this.tabs||(this.tabs=Array.from(this.querySelectorAll("ngc-tab"))),d`
|
|
2
2
|
<div class="gator-tabset">
|
|
3
|
-
<div ${v(this._tablistRef)} role="tablist" class="gator-tabset-header" aria-label=${
|
|
4
|
-
${this.tabs.map((t,e)=>
|
|
3
|
+
<div ${v(this._tablistRef)} role="tablist" class="gator-tabset-header" aria-label=${y(this.tabsetAriaLabel)}>
|
|
4
|
+
${this.tabs.map((t,e)=>d`
|
|
5
5
|
<div class="${this.tabSpacerClass} gator-tab"
|
|
6
6
|
id="gator-tab-${e+1}"
|
|
7
|
+
data-testid="${this.dataTestid?`${this.dataTestid}-tab-${e+1}`:`${t.name}-tab`}"
|
|
7
8
|
role="tab"
|
|
8
9
|
tabindex="${this.getButtonTabIndex(e)}"
|
|
9
10
|
@keydown="${i=>this.handleTabKeydown(i)}"
|
|
@@ -21,10 +22,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@
|
|
|
21
22
|
</div>
|
|
22
23
|
`)}
|
|
23
24
|
</div>
|
|
24
|
-
${this.size==="large"?
|
|
25
|
+
${this.size==="large"?d`<div class="gator-tab-border"></div>`:null}
|
|
25
26
|
<div ${v(this._contentRef)}
|
|
26
27
|
aria-labelledby="gator-tab-${this.activeTabIndex+1}"
|
|
27
28
|
class="gator-tabset-content"
|
|
29
|
+
data-testid="${this.dataTestid?`${this.dataTestid}-tabpanel-${this.activeTabIndex+1}`:`${this.tabs[this.activeTabIndex].name}-tabpanel`}"
|
|
28
30
|
id="gator-tabpanel-${this.activeTabIndex+1}"
|
|
29
31
|
tabindex="0"
|
|
30
32
|
role="tabpanel"
|
|
@@ -32,4 +34,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@
|
|
|
32
34
|
${this.tabs[this.activeTabIndex]}
|
|
33
35
|
</div>
|
|
34
36
|
</div>
|
|
35
|
-
`}get tabSizeClass(){return this.size?`gator-tab-button-${this.size}`:""}get tabContainerSizeClass(){return this.size?`gator-tab-container-${this.size}`:""}get tabSpacerClass(){return this.size!="large"?"":"gator-tabset-spacer"}getButtonTabIndex(t){return t===this.activeTabIndex?"0":"-1"}handleTabKeydown(t){if(!this.tabs)return;let e=this.shadowRoot?.querySelectorAll(".gator-tabset-header [role=tab]");if(t.key===o.RIGHT){if(this.activeTabIndex===this.tabs.length-1){this.focusFirstTab(),t.preventDefault();return}this.setActiveTab(this.activeTabIndex+1),e[this.activeTabIndex].focus()}else if(t.key===o.LEFT){if(this.activeTabIndex===0){this.focusLastTab(),t.preventDefault();return}this.setActiveTab(this.activeTabIndex-1),e[this.activeTabIndex].focus(),t.preventDefault()}else t.key===o.HOME?(this.focusFirstTab(),t.preventDefault()):t.key===o.END&&(this.focusLastTab(),t.preventDefault())}focusFirstTab(){let t=this.shadowRoot?.querySelectorAll(".gator-tabset-header [role=tab]");this.setActiveTab(0),t[this.activeTabIndex].focus()}focusLastTab(){if(!this.tabs)return;let t=this.shadowRoot?.querySelectorAll(".gator-tabset-header [role=tab]");this.setActiveTab(this.tabs.length-1),t[this.activeTabIndex].focus()}setActiveTab(t){this.activeTabIndex!==t&&(this.activeTabIndex=t,this.dispatchEvent(new CustomEvent("select",{detail:{index:t,tab:this.tabs?this.tabs[t]:null},bubbles:!0,composed:!0})))}};s.styles=[l(m),l(T),l(g),l(
|
|
37
|
+
`}get tabSizeClass(){return this.size?`gator-tab-button-${this.size}`:""}get tabContainerSizeClass(){return this.size?`gator-tab-container-${this.size}`:""}get tabSpacerClass(){return this.size!="large"?"":"gator-tabset-spacer"}getButtonTabIndex(t){return t===this.activeTabIndex?"0":"-1"}handleTabKeydown(t){if(!this.tabs)return;let e=this.shadowRoot?.querySelectorAll(".gator-tabset-header [role=tab]");if(t.key===o.RIGHT){if(this.activeTabIndex===this.tabs.length-1){this.focusFirstTab(),t.preventDefault();return}this.setActiveTab(this.activeTabIndex+1),e[this.activeTabIndex].focus()}else if(t.key===o.LEFT){if(this.activeTabIndex===0){this.focusLastTab(),t.preventDefault();return}this.setActiveTab(this.activeTabIndex-1),e[this.activeTabIndex].focus(),t.preventDefault()}else t.key===o.HOME?(this.focusFirstTab(),t.preventDefault()):t.key===o.END&&(this.focusLastTab(),t.preventDefault())}focusFirstTab(){let t=this.shadowRoot?.querySelectorAll(".gator-tabset-header [role=tab]");this.setActiveTab(0),t[this.activeTabIndex].focus()}focusLastTab(){if(!this.tabs)return;let t=this.shadowRoot?.querySelectorAll(".gator-tabset-header [role=tab]");this.setActiveTab(this.tabs.length-1),t[this.activeTabIndex].focus()}setActiveTab(t){this.activeTabIndex!==t&&(this.activeTabIndex=t,this.dispatchEvent(new CustomEvent("select",{detail:{index:t,tab:this.tabs?this.tabs[t]:null},bubbles:!0,composed:!0})))}};s.styles=[l(m),l(T),l(g),l($)];r([n({type:String,attribute:"tabset-aria-labelled-by-elements"})],s.prototype,"tabsetAriaLabelledByElements",2);r([n({type:String,attribute:"tabset-aria-label"})],s.prototype,"tabsetAriaLabel",2);r([n({type:String})],s.prototype,"size",2);r([n({type:Number,attribute:"active-tab-index"})],s.prototype,"activeTabIndex",2);s=r([p("ngc-tabset")],s);export{s as NgcTabset};
|
package/package.json
CHANGED
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ncino/web-components",
|
|
4
|
-
"version": "6.0.0-preview.
|
|
4
|
+
"version": "6.0.0-preview.2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|