@ncino/web-components 5.1.0-preview.1 → 5.1.0-preview.2
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,13 +1,13 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as c}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
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as c}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 v}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/property.js";import{state as p}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/state.js";import"../tab/tab.gator.js";import{KEY_CONSTANTS as o}from"../../../../consts/key-constants.js";import{createRef as u,ref as f}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{TestableLitElement as m}from"../../../../utils/components/testable-lit-element/testable-lit-element.js";import T from"../../../../packages/web-components/src/components/tabs/gator/tabs.gator.scss.js";import g from"../../../../packages/web-components/src/components/tabs/gator/tabs.gator.tokens.scss.js";import y from"../../../../packages/web-components/src/tokens/semantic.tokens.scss.js";import $ from"../../../../packages/web-components/src/tokens/primitive.tokens.scss.js";import{ifDefined as I}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 A=Object.defineProperty,S=Object.getOwnPropertyDescriptor,r=(t,e,i,b)=>{for(var a=b>1?void 0:b?S(e,i):e,n=t.length-1,h;n>=0;n--)(h=t[n])&&(a=(b?h(e,i,a):h(a))||a);return b&&a&&A(e,i,a),a};let s=class extends m{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"))),c`
|
|
2
2
|
<div class="gator-tabset">
|
|
3
|
-
<div ${
|
|
3
|
+
<div ${f(this._tablistRef)} role="tablist" class="gator-tabset-header" aria-label=${I(this.tabsetAriaLabel)}>
|
|
4
4
|
${this.tabs.map((t,e)=>c`
|
|
5
5
|
<div class="${this.tabSpacerClass} gator-tab"
|
|
6
6
|
id="gator-tab-${e+1}"
|
|
7
7
|
role="tab"
|
|
8
8
|
tabindex="${this.getButtonTabIndex(e)}"
|
|
9
9
|
@keydown="${i=>this.handleTabKeydown(i)}"
|
|
10
|
-
@click="${()=>this.
|
|
10
|
+
@click="${()=>this.setActiveTab(e)}"
|
|
11
11
|
aria-controls="gator-tabpanel-${e+1}"
|
|
12
12
|
aria-selected="${e===this.activeTabIndex}"
|
|
13
13
|
>
|
|
@@ -22,7 +22,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@
|
|
|
22
22
|
`)}
|
|
23
23
|
</div>
|
|
24
24
|
${this.size==="large"?c`<div class="gator-tab-border"></div>`:null}
|
|
25
|
-
<div ${
|
|
25
|
+
<div ${f(this._contentRef)}
|
|
26
26
|
aria-labelledby="gator-tab-${this.activeTabIndex+1}"
|
|
27
27
|
class="gator-tabset-content"
|
|
28
28
|
id="gator-tabpanel-${this.activeTabIndex+1}"
|
|
@@ -32,4 +32,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@
|
|
|
32
32
|
${this.tabs[this.activeTabIndex]}
|
|
33
33
|
</div>
|
|
34
34
|
</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===
|
|
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(T),l(g),l(y),l($)];r([d({type:String,attribute:"tabset-aria-labelled-by-elements"})],s.prototype,"tabsetAriaLabelledByElements",2);r([d({type:String,attribute:"tabset-aria-label"})],s.prototype,"tabsetAriaLabel",2);r([d({type:String})],s.prototype,"size",2);r([p()],s.prototype,"activeTabIndex",2);s=r([v("ngc-tabset")],s);export{s as NgcTabset};
|
|
@@ -28,6 +28,11 @@ export declare class NgcTabset extends TestableLitElement {
|
|
|
28
28
|
handleTabKeydown(e: KeyboardEvent): void;
|
|
29
29
|
focusFirstTab(): void;
|
|
30
30
|
focusLastTab(): void;
|
|
31
|
+
/**
|
|
32
|
+
* Sets the active tab and dispatches the select event
|
|
33
|
+
* @param index The index of the tab to set as active
|
|
34
|
+
*/
|
|
35
|
+
setActiveTab(index: number): void;
|
|
31
36
|
}
|
|
32
37
|
declare global {
|
|
33
38
|
interface HTMLElementTagNameMap {
|
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": "5.0
|
|
4
|
+
"version": "5.1.0-preview.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -4541,7 +4541,7 @@
|
|
|
4541
4541
|
},
|
|
4542
4542
|
{
|
|
4543
4543
|
"name": "ngc-tabset",
|
|
4544
|
-
"description": "\n---\n",
|
|
4544
|
+
"description": "\n---\n\n\n### **Events:**\n - **select**\n\n### **Methods:**\n - **setActiveTab(index: _number_)** - Sets the active tab and dispatches the select event",
|
|
4545
4545
|
"doc-url": "",
|
|
4546
4546
|
"attributes": [
|
|
4547
4547
|
{
|
|
@@ -4561,7 +4561,7 @@
|
|
|
4561
4561
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
4562
4562
|
}
|
|
4563
4563
|
],
|
|
4564
|
-
"events": [],
|
|
4564
|
+
"events": [{ "name": "select", "type": "CustomEvent" }],
|
|
4565
4565
|
"js": {
|
|
4566
4566
|
"properties": [
|
|
4567
4567
|
{ "name": "tabsetAriaLabelledByElements", "type": "Element[]" },
|
|
@@ -4579,7 +4579,7 @@
|
|
|
4579
4579
|
{ "name": "helpTextDataTestid" },
|
|
4580
4580
|
{ "name": "errorMessageDataTestid" }
|
|
4581
4581
|
],
|
|
4582
|
-
"events": []
|
|
4582
|
+
"events": [{ "name": "select", "type": "CustomEvent" }]
|
|
4583
4583
|
}
|
|
4584
4584
|
},
|
|
4585
4585
|
{
|