@ncino/web-components 7.0.0-preview.1 → 7.0.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.
- package/dist/components/checkbox-group/checkbox-group.gator.js +5 -5
- package/dist/components/radio/radio.gator.js +3 -2
- package/dist/components/radio-group/radio-group.gator.js +14 -14
- package/dist/types/components/checkbox-group/checkbox-group.gator.d.ts +2 -0
- package/dist/types/components/radio-group/radio-group.gator.d.ts +2 -0
- package/package.json +1 -1
- package/web-types.json +3 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as l}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 h}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{generateRandomId as p,getElementId as
|
|
2
|
-
<div class="gator-checkbox-group-container">
|
|
3
|
-
${this.label?l`<ngc-input-label id="${e}-label" data-testid=${
|
|
1
|
+
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as l}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 h}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{generateRandomId as p,getElementId as u}from"../../utils/string-utils.js";import m from"../../packages/web-components/src/components/checkbox-group/checkbox-group.gator.scss.js";import"../checkbox/checkbox.gator.js";import"../input/gator/input-label/input-label.gator.js";import"../input/gator/help-text/help-text.gator.js";import{handleDataTestid as g}from"../../utils/datatestid-utils.js";import{ifDefined as b}from"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/if-defined.js";import{NgcInputText as f}from"../input/gator/input-text/input-text.gator.js";import{createRef as x,ref as v}from"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{unsafeCSS as y}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var $=Object.defineProperty,E=Object.getOwnPropertyDescriptor,_=Object.getPrototypeOf,k=Reflect.get,c=(e,t,o,r)=>{for(var s=r>1?void 0:r?E(t,o):t,a=e.length-1,n;a>=0;a--)(n=e[a])&&(s=(r?n(t,o,s):n(s))||s);return r&&s&&$(t,o,s),s},R=(e,t,o)=>k(_(e),o,t);let i=class extends f{constructor(){super(...arguments),this.options=[],this._randomId=p(),this.groupRef=x()}render(){const e=this.elementId;return l`
|
|
2
|
+
<div class="gator-checkbox-group-container" ${v(this.groupRef)} role="group">
|
|
3
|
+
${this.label?l`<ngc-input-label id="${e}-label" data-testid=${b(this.labelDataTestid)}>${this.label}</ngc-input-label>`:null}
|
|
4
4
|
<div id="${e}-group"
|
|
5
5
|
role="group"
|
|
6
6
|
class="gator-checkbox-group"
|
|
@@ -11,7 +11,7 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/re
|
|
|
11
11
|
</div>
|
|
12
12
|
${this.bottomText}
|
|
13
13
|
</div>
|
|
14
|
-
`}get elementId(){return
|
|
14
|
+
`}get elementId(){return u(this.id,this._randomId)}get describedBy(){const e=[];return this.errorText&&e.push(`${this.elementId}-error`),this.helpText&&e.push(`${this.elementId}-help`),e.join(" ")}get checkboxesFromOptions(){return l`
|
|
15
15
|
${this.options.map(e=>l`
|
|
16
16
|
<ngc-checkbox
|
|
17
17
|
value="${e.value}"
|
|
@@ -20,4 +20,4 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/re
|
|
|
20
20
|
>
|
|
21
21
|
</ngc-checkbox>
|
|
22
22
|
`)}
|
|
23
|
-
`}handleCheckboxSelectionChange(e){const t=e;e.stopImmediatePropagation();const
|
|
23
|
+
`}handleCheckboxSelectionChange(e){const t=e;e.stopImmediatePropagation();const o=new Set(this.value?.split(";"));t.detail.selected?o.add(t.detail.value):o.delete(t.detail.value),this.value=Array.from(o).join(";"),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:this.value}))}get checkboxElements(){if(this.options.length>0)return this.shadowRoot?.querySelectorAll("ngc-checkbox");const e=this.shadowRoot?.querySelector("slot")?.assignedElements();return e&&e.length===1&&e[0]instanceof HTMLSlotElement?e[0].assignedElements():e}updated(){const e=new Set(this.value?.split(";")),t=this.checkboxElements;t&&t.length>0&&t.forEach((o,r)=>{const s=o;s.selected=e.has(s.value),s.disabled=this.disabled,s.errorText=this.errorText,s.grouped=!0,g(s,this.dataTestid,`checkbox-${r}`)}),requestAnimationFrame(()=>{const o=this.shadowRoot?.querySelector("ngc-input-label"),r=this.shadowRoot?.querySelectorAll("ngc-help-text");o&&this.groupRef.value&&(this.groupRef.value.ariaLabelledByElements=[o]),r&&this.groupRef.value&&(this.groupRef.value.ariaDescribedByElements=Array.from(r))})}};i.styles=[...R(i,i,"styles"),y(m)];c([d({type:Array})],i.prototype,"options",2);i=c([h("ngc-checkbox-group")],i);export{i as NgcCheckboxGroup};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as h,nothing 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 c}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{generateRandomId as f,getElementId as m}from"../../utils/string-utils.js";import
|
|
1
|
+
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as h,nothing 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 c}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{generateRandomId as f,getElementId as m}from"../../utils/string-utils.js";import b from"../../packages/web-components/src/components/radio/radio.gator.tokens.scss.js";import g from"../../packages/web-components/src/components/radio/radio.gator.scss.js";import{createRef as v,ref as x}from"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{NgcInputText as y}from"../input/gator/input-text/input-text.gator.js";import{unsafeCSS as p}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var k=Object.defineProperty,T=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,R=Reflect.get,a=(e,r,s,o)=>{for(var i=o>1?void 0:o?T(r,s):r,l=e.length-1,n;l>=0;l--)(n=e[l])&&(i=(o?n(r,s,i):n(i))||i);return o&&i&&k(r,s,i),i},_=(e,r,s)=>R($(e),s,r);let t=class extends y{constructor(){super(...arguments),this.titleText="",this.selected=!1,this.radioTabindex=-1,this.grouped=!1,this.inputRef=v(),this._randomId=f()}updated(e){super.updated(e),e.has("errorText")&&this.inputRef.value&&this.inputRef.value.setCustomValidity(this.errorText?"true":""),e.has("selected")&&this.inputRef.value&&(this.inputRef.value.checked=this.selected)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.click)}render(){return this.skeleton?this.skeletonMarkup:h`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<div id="${this.elementId}-radio" class="gator-radio">
|
|
4
4
|
<div class="gator-radio-input-wrapper">
|
|
@@ -13,6 +13,7 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/re
|
|
|
13
13
|
tabindex=${this.tabindex}
|
|
14
14
|
aria-labelledby="${this.elementId}-radio"
|
|
15
15
|
@change="${this.handleChange}"
|
|
16
|
+
aria-describedby="${this.ariaDescribedby}"
|
|
16
17
|
/>
|
|
17
18
|
</div>
|
|
18
19
|
<label class="gator-radio-title">
|
|
@@ -30,4 +31,4 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/re
|
|
|
30
31
|
<ngc-skeleton-loader width="18" height="18" radius="999"></ngc-skeleton-loader>
|
|
31
32
|
<ngc-skeleton-loader width="50" height="18" radius="2"></ngc-skeleton-loader>
|
|
32
33
|
</div>
|
|
33
|
-
`}get elementId(){return m(this.id,this._randomId)}get tabindex(){let e=this.radioTabindex;return this.selected&&(e=0),this.disabled&&(e=-1),e}handleChange(){this.selected=!this.selected,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}click(){this.disabled||this.inputRef.value?.click()}focus(){this.disabled||this.inputRef.value?.focus()}};t.styles=[..._(t,t,"styles"),p(
|
|
34
|
+
`}get elementId(){return m(this.id,this._randomId)}get tabindex(){let e=this.radioTabindex;return this.selected&&(e=0),this.disabled&&(e=-1),e}handleChange(){this.selected=!this.selected,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}click(){this.disabled||this.inputRef.value?.click()}focus(){this.disabled||this.inputRef.value?.focus()}};t.styles=[..._(t,t,"styles"),p(b),p(g)];a([d({type:String,attribute:"title-text"})],t.prototype,"titleText",2);a([d({type:Boolean})],t.prototype,"selected",2);a([d({type:Number,attribute:"radio-tabindex"})],t.prototype,"radioTabindex",2);a([d({type:Boolean,attribute:"grouped"})],t.prototype,"grouped",2);t=a([c("ngc-radio")],t);export{t as NgcRadio};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
2
|
-
<div class="gator-radio-group-container">
|
|
3
|
-
${this.label?
|
|
1
|
+
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as n}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 m}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/property.js";import{generateRandomId as c,getElementId as g}from"../../utils/string-utils.js";import{KEY_CONSTANTS as d}from"../../consts/key-constants.js";import f from"../../packages/web-components/src/components/radio-group/radio-group.gator.scss.js";import"../radio/radio.gator.js";import{handleDataTestid as b}from"../../utils/datatestid-utils.js";import{ifDefined as y}from"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/if-defined.js";import{NgcInputText as v}from"../input/gator/input-text/input-text.gator.js";import{createRef as $,ref as x}from"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{unsafeCSS as E}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var R=Object.defineProperty,T=Object.getOwnPropertyDescriptor,I=Object.getPrototypeOf,S=Reflect.get,u=(e,t,i,o)=>{for(var s=o>1?void 0:o?T(t,i):t,l=e.length-1,r;l>=0;l--)(r=e[l])&&(s=(o?r(t,i,s):r(s))||s);return o&&s&&R(t,i,s),s},_=(e,t,i)=>S(I(e),i,t);let a=class extends v{constructor(){super(...arguments),this.options=[],this._randomId=c(),this.groupRef=$()}render(){return n`
|
|
2
|
+
<div class="gator-radio-group-container" ${x(this.groupRef)} role="group">
|
|
3
|
+
${this.label?n`<ngc-input-label id="${this.elementId}-label" data-testid=${y(this.labelDataTestid)} ?skeleton=${this.skeleton}>${this.label}</ngc-input-label>`:null}
|
|
4
4
|
<div id="${this.elementId}-group"
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
${this.options.length>0?this.radiosFromOptions:
|
|
5
|
+
role="radiogroup"
|
|
6
|
+
class="gator-radio-group"
|
|
7
|
+
aria-labelledby="${this.elementId}-label"
|
|
8
|
+
aria-describedby=${this.describedBy}
|
|
9
|
+
@keydown=${this.handleRadioKeydown}
|
|
10
|
+
@change=${this.handleRadioSelectionChange}
|
|
11
|
+
>
|
|
12
|
+
${this.options.length>0?this.radiosFromOptions:n`<slot></slot>`}
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
15
|
${this.bottomText}
|
|
16
|
-
`}get elementId(){return g(this.id,this._randomId)}get radiosFromOptions(){return
|
|
17
|
-
${this.options.map(e=>
|
|
16
|
+
`}get elementId(){return g(this.id,this._randomId)}get radiosFromOptions(){return n`
|
|
17
|
+
${this.options.map(e=>n`
|
|
18
18
|
<ngc-radio
|
|
19
19
|
title-text=${e.title}
|
|
20
20
|
value=${e.value}
|
|
@@ -23,4 +23,4 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/re
|
|
|
23
23
|
error-text=${this.errorText}
|
|
24
24
|
></ngc-radio>
|
|
25
25
|
`)}
|
|
26
|
-
`}get radioElements(){if(this.options.length>0)return this.shadowRoot?.querySelectorAll("ngc-radio");const e=this.shadowRoot?.querySelector("slot")?.assignedElements();return e&&e.length===1&&e[0]instanceof HTMLSlotElement?e[0].assignedElements():e}get describedBy(){const e=[];return this.errorText&&e.push(`${this.elementId}-error`),this.helpText&&e.push(`${this.elementId}-help`),e.join(" ")}handleRadioSelectionChange(e){const t=e;t.stopImmediatePropagation(),this.value=t.detail.value??t.detail,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:this.value}))}handleRadioKeydown(e){const t=this.radioElements;if(t){const i=Array.from(t).findIndex(
|
|
26
|
+
`}get radioElements(){if(this.options.length>0)return this.shadowRoot?.querySelectorAll("ngc-radio");const e=this.shadowRoot?.querySelector("slot")?.assignedElements();return e&&e.length===1&&e[0]instanceof HTMLSlotElement?e[0].assignedElements():e}get describedBy(){const e=[];return this.errorText&&e.push(`${this.elementId}-error`),this.helpText&&e.push(`${this.elementId}-help`),e.join(" ")}handleRadioSelectionChange(e){const t=e;t.stopImmediatePropagation(),this.value=t.detail.value??t.detail,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:this.value}))}handleRadioKeydown(e){const t=this.radioElements;if(t){const i=Array.from(t).findIndex(r=>r.selected),o=e.key===d.RIGHT||e.key===d.DOWN,s=e.key===d.LEFT||e.key===d.UP,l=e.key===d.SPACE;if(o||s||l){e.preventDefault();let r=i===-1?0:i;o?r=(r+1)%t.length:s?r=(r-1+t.length)%t.length:l&&i===-1&&(r=0);const h=t[r];h&&(h.focus(),h.click())}}}updated(){this.radioElements?.forEach((e,t)=>{e.selected=this.value===e.value,e.disabled=this.disabled,e.errorText=this.errorText,e.grouped=!0,e.radioTabindex=this.getItemTabindex(t),e.skeleton=this.skeleton,b(e,this.dataTestid,`radio-${t}`)}),requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector("ngc-input-label"),t=this.shadowRoot?.querySelectorAll("ngc-help-text");e&&this.groupRef.value&&(this.groupRef.value.ariaLabelledByElements=[e]),t&&this.groupRef.value&&(this.groupRef.value.ariaDescribedByElements=Array.from(t))})}getItemTabindex(e){return e===0&&!this.value?0:-1}};a.styles=[..._(a,a,"styles"),E(f)];u([m({type:Array})],a.prototype,"options",2);a=u([p("ngc-radio-group")],a);export{a as NgcRadioGroup};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { NgcCheckbox } from '../checkbox/checkbox.gator';
|
|
2
2
|
import { NgcInputText } from '../input/gator/input-text/input-text.gator.ts';
|
|
3
|
+
import { Ref } from 'lit/directives/ref.js';
|
|
3
4
|
/**
|
|
4
5
|
* @slot - The checkboxes within the group
|
|
5
6
|
*/
|
|
@@ -14,6 +15,7 @@ export declare class NgcCheckboxGroup extends NgcInputText {
|
|
|
14
15
|
*/
|
|
15
16
|
options: NGC_CHECKBOX_GROUP_OPTION[];
|
|
16
17
|
private _randomId;
|
|
18
|
+
groupRef: Ref<HTMLElement>;
|
|
17
19
|
render(): import('lit').TemplateResult<1>;
|
|
18
20
|
get elementId(): string;
|
|
19
21
|
get describedBy(): string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { NgcRadio } from '../radio/radio.gator';
|
|
2
2
|
import { NgcInputText } from '../input/gator/input-text/input-text.gator.ts';
|
|
3
|
+
import { Ref } from 'lit/directives/ref.js';
|
|
3
4
|
/**
|
|
4
5
|
* @slot - The radios within the group
|
|
5
6
|
*/
|
|
@@ -14,6 +15,7 @@ export declare class NgcRadioGroup extends NgcInputText {
|
|
|
14
15
|
*/
|
|
15
16
|
options: NGC_RADIO_GROUP_OPTION[];
|
|
16
17
|
private _randomId;
|
|
18
|
+
groupRef: Ref<HTMLElement>;
|
|
17
19
|
render(): import('lit').TemplateResult<1>;
|
|
18
20
|
get elementId(): string;
|
|
19
21
|
get radiosFromOptions(): import('lit').TemplateResult<1>;
|
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": "7.0.0-preview.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -1285,6 +1285,7 @@
|
|
|
1285
1285
|
"js": {
|
|
1286
1286
|
"properties": [
|
|
1287
1287
|
{ "name": "options", "type": "NGC_RADIO_GROUP_OPTION[]" },
|
|
1288
|
+
{ "name": "groupRef", "type": "Ref<HTMLElement>" },
|
|
1288
1289
|
{ "name": "elementId" },
|
|
1289
1290
|
{ "name": "radiosFromOptions" },
|
|
1290
1291
|
{ "name": "radioElements", "type": "NgcRadio[]" },
|
|
@@ -2579,6 +2580,7 @@
|
|
|
2579
2580
|
"js": {
|
|
2580
2581
|
"properties": [
|
|
2581
2582
|
{ "name": "options", "type": "NGC_CHECKBOX_GROUP_OPTION[]" },
|
|
2583
|
+
{ "name": "groupRef", "type": "Ref<HTMLElement>" },
|
|
2582
2584
|
{ "name": "elementId" },
|
|
2583
2585
|
{ "name": "describedBy" },
|
|
2584
2586
|
{ "name": "checkboxesFromOptions" },
|