@ncino/web-components 6.0.0-preview.1 → 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,20 +1,21 @@
|
|
|
1
|
-
import{customElement as
|
|
1
|
+
import{customElement as c}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as a}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/property.js";import{generateRandomId as u,getElementId as m}from"../../utils/string-utils.js";import b from"../../packages/web-components/src/components/checkbox/checkbox.gator.scss.js";import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as d,nothing as f}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{ref as v}from"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{NgcInputText as x}from"../input/gator/input-text/input-text.gator.js";import{ifDefined as p}from"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/if-defined.js";import{unsafeCSS as g}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var y=Object.defineProperty,$=Object.getOwnPropertyDescriptor,_=Object.getPrototypeOf,T=Reflect.get,s=(e,r,o,l)=>{for(var i=l>1?void 0:l?$(r,o):r,h=e.length-1,n;h>=0;h--)(n=e[h])&&(i=(l?n(r,o,i):n(i))||i);return l&&i&&y(r,o,i),i},k=(e,r,o)=>T(_(e),o,r);let t=class extends x{constructor(){super(...arguments),this.titleText="",this.selected=!1,this.indeterminate=!1,this.hideLabel=!1,this.grouped=!1,this._randomId=u()}updated(e){super.updated(e),e.has("indeterminate")&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate),e.has("errorText")&&this.inputRef.value&&this.inputRef.value.setCustomValidity(this.errorText?"true":"")}render(){const e=this.elementId;return d`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<div id="${e}-checkbox" class="gator-checkbox">
|
|
4
4
|
<div class="gator-checkbox-input-wrapper">
|
|
5
5
|
<input
|
|
6
|
-
${
|
|
6
|
+
${v(this.inputRef)}
|
|
7
7
|
id="${e}"
|
|
8
8
|
class="gator-checkbox-input"
|
|
9
9
|
type="checkbox"
|
|
10
10
|
.checked="${this.selected}"
|
|
11
11
|
?disabled="${this.disabled}"
|
|
12
|
-
aria-labelledby="${e}-checkbox"
|
|
12
|
+
aria-labelledby="${p(this.hideLabel?void 0:`${e}-checkbox`)}"
|
|
13
|
+
aria-describedby=${this.ariaDescribedby}
|
|
13
14
|
@change="${this.handleChange}"
|
|
14
|
-
aria-label
|
|
15
|
+
aria-label=${p(this.hideLabel?this.titleText:void 0)}
|
|
15
16
|
/>
|
|
16
17
|
</div>
|
|
17
|
-
${this.hideLabel?null:
|
|
18
|
+
${this.hideLabel?null:d`
|
|
18
19
|
<label class="gator-checkbox-title">
|
|
19
20
|
${this.titleText}
|
|
20
21
|
<slot></slot>
|
|
@@ -23,7 +24,7 @@ import{customElement as d}from"../../node_modules/.pnpm/@lit_reactive-element@2.
|
|
|
23
24
|
</div>
|
|
24
25
|
${this.bottomText}
|
|
25
26
|
</div>
|
|
26
|
-
`}get elementId(){return
|
|
27
|
+
`}get elementId(){return m(this.id,this._randomId)}get bottomText(){return this.grouped?f:d`
|
|
27
28
|
${this.errorTextMarkup}
|
|
28
29
|
${this.helpTextMarkup}
|
|
29
|
-
`}handleChange(){this.selected=!this.selected,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value,selected:this.selected}}))}click(){this.inputRef.value?.click()}};t.styles=[...
|
|
30
|
+
`}handleChange(){this.selected=!this.selected,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value,selected:this.selected}}))}click(){this.inputRef.value?.click()}};t.styles=[...k(t,t,"styles"),g(b)];s([a({type:String,attribute:"title-text"})],t.prototype,"titleText",2);s([a({type:Boolean})],t.prototype,"selected",2);s([a({type:Boolean})],t.prototype,"indeterminate",2);s([a({type:Boolean,attribute:"hide-label"})],t.prototype,"hideLabel",2);s([a({type:Boolean,attribute:"grouped"})],t.prototype,"grouped",2);t=s([c("ngc-checkbox")],t);export{t as NgcCheckbox};
|
|
@@ -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": "
|
|
4
|
+
"version": "6.0.0-preview.2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|