@ncino/web-components 5.1.0-preview.8 → 5.1.0-preview.9

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 (4) hide show
  1. package/dist/components/tabs/gator/tabset/tabset.gator.js +6 -6
  2. package/dist/types/components/tabs/gator/tabset/tabset.gator.d.ts +3 -0
  3. package/package.json +1 -1
  4. package/web-types.json +5 -1
package/dist/components/tabs/gator/tabset/tabset.gator.js CHANGED
@@ -1,7 +1,7 @@
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`
1
+ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as u}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 f}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 d,ref as v}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{TestableLitElement as p}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 y from"../../../../packages/web-components/src/tokens/primitive.tokens.scss.js";import{ifDefined as $}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 p{constructor(){super(...arguments),this.tabsetAriaLabelledByElements=[],this.tabsetAriaLabel=void 0,this.size="medium",this.activeTabIndex=0,this._contentRef=d(),this._tablistRef=d()}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"))),u`
2
2
  <div class="gator-tabset">
3
- <div ${f(this._tablistRef)} role="tablist" class="gator-tabset-header" aria-label=${I(this.tabsetAriaLabel)}>
4
- ${this.tabs.map((t,e)=>c`
3
+ <div ${v(this._tablistRef)} role="tablist" class="gator-tabset-header" aria-label=${$(this.tabsetAriaLabel)}>
4
+ ${this.tabs.map((t,e)=>u`
5
5
  <div class="${this.tabSpacerClass} gator-tab"
6
6
  id="gator-tab-${e+1}"
7
7
  role="tab"
@@ -21,8 +21,8 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@
21
21
  </div>
22
22
  `)}
23
23
  </div>
24
- ${this.size==="large"?c`<div class="gator-tab-border"></div>`:null}
25
- <div ${f(this._contentRef)}
24
+ ${this.size==="large"?u`<div class="gator-tab-border"></div>`:null}
25
+ <div ${v(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===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};
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(y)];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([f("ngc-tabset")],s);export{s as NgcTabset};
package/dist/types/components/tabs/gator/tabset/tabset.gator.d.ts CHANGED
@@ -15,6 +15,9 @@ export declare class NgcTabset extends TestableLitElement {
15
15
  * @property {string} size - The size of the tabs in the tabset
16
16
  */
17
17
  size: string;
18
+ /**
19
+ * @property {number} activeTabIndex - The index of the tab that should be active/selected by default
20
+ */
18
21
  activeTabIndex: number;
19
22
  tabs: NgcTab[] | undefined;
20
23
  _contentRef: Ref<HTMLDivElement>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ncino/web-components",
3
3
  "author": "nCino",
4
- "version": "5.1.0-preview.8",
4
+ "version": "5.1.0-preview.9",
5
5
  "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
6
6
  "publishConfig": {
7
7
  "registry": "https://registry.npmjs.org/"
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.1.0-preview.7",
4
+ "version": "5.1.0-preview.8",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -4571,6 +4571,10 @@
4571
4571
  "name": "size",
4572
4572
  "value": { "type": "string", "default": "'medium'" }
4573
4573
  },
4574
+ {
4575
+ "name": "active-tab-index",
4576
+ "value": { "type": "number", "default": "0" }
4577
+ },
4574
4578
  {
4575
4579
  "name": "data-testid",
4576
4580
  "value": { "type": "string | undefined", "default": "undefined" }