@ncino/web-components 2.0.0-preview.1 → 2.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.
Files changed (12) hide show
  1. package/dist/assets/index-chunk5.js +1 -1
  2. package/dist/components/input/base/input-base.js +1 -1
  3. package/dist/components/input/gator/input-label/input-label.gator.js +3 -2
  4. package/dist/components/input/gator/input-text/input-text.gator.js +23 -13
  5. package/dist/components/input/index.js +1 -1
  6. package/dist/components/input/slds/input-text/input-text.slds.js +1 -1
  7. package/dist/types/components/input/base/input-base.d.ts +10 -4
  8. package/dist/types/components/input/gator/help-text/help-text.gator.d.ts +1 -1
  9. package/dist/types/components/input/gator/input-label/input-label.gator.d.ts +4 -0
  10. package/dist/types/components/input/gator/input-text/input-text.gator.d.ts +10 -4
  11. package/package.json +1 -1
  12. package/web-types.json +56 -9
package/dist/assets/index-chunk5.js CHANGED
@@ -1 +1 @@
1
- const r=':host,:root{--color-background-primary: var(--color-blue-10, #F3F5F7);--color-stroke-brand: var(--color-blue-30, #11395B);--color-stroke-brand-secondary: var(--color-blue-20, #C3CDD6);--color-stroke-primary: var(--color-neutral-50, #6D6D6D);--color-stroke-secondary: var(--color-neutral-40, #BFBFBF);--color-stroke-success: var(--color-green-20);--color-stroke-warning: var(--color-orange-20);--color-stroke-error-weak: var(--color-red-20);--color-stroke-error-strong: var(--color-red-30);--color-stroke-tertiary: var(--color-neutral-30, #E5E5E5);--color-stroke-button: var(--color-neutral-70);--color-stroke-interactive: var(--color-neutral-70);--color-text-primary-base: var(--color-neutral-70, #1F1F1F);--color-text-secondary: var(--color-neutral-50, #6D6D6D);--color-text-brand: var(--color-blue-30, #11395B);--color-text-placeholder: var(--color-neutral-50, #6D6D6D);--color-text-error: var(--color-red-40, #AA330E);--color-text-disabled: var(--color-neutral-50, #6D6D6D);--color-text-inverse: var(--color-neutral-0, #FFFFFF);--color-surface-primary: var(--color-neutral-0, #FFFFFF);--color-surface-brand: var(--color-blue-10, #F3F5F7);--color-surface-brand-secondary: var(--color-blue-20, #C3CDD6);--color-surface-secondary: var(--color-neutral-10);--color-surface-error: var(--color-red-10);--color-surface-success: var(--color-green-10);--color-surface-warning: var(--color-orange-10);--color-surface-badge: var(--color-red-30);--color-surface-hover: var(--color-neutral-10, #F7F7F7);--color-surface-loading: var(--color-neutral-30);--color-surface-interactive-primary: var(--color-blue-40, #0E304D);--color-surface-interactive-primary-hover: var(--color-blue-50, #0A2033);--color-surface-interactive-primary-pressed: var(--color-blue-50, #0A2033);--color-icon-error: var(--color-red-30);--color-icon-success: var(--color-green-30);--color-icon-warning: var(--color-orange-30);--color-icon-disabled: var(--color-neutral-40, #BFBFBF);--color-icon-brand: var(--color-blue-30);--color-primary-03-base: var(--color-neutral-70, #1F1F1F);--color-primary-01-placeholder: var(--color-neutral-50, #6D6D6D);--color-underline-primary: var(--color-neutral-40, #BFBFBF);--color-button-pressed: var(--color-neutral-60, #404040);--color-button-disabled: var(--color-neutral-40, #BFBFBF);--color-focus-gap: var(--color-neutral-0, #FFFFFF);--color-focus-border: var(--color-blue-30, #11395B);--primary-01-placeholder: var(--color-neutral-50, #6D6D6D);--text-color-secondary: var(--color-neutral-50, #6D6D6D);--size-stroke-1: 1px;--text-size-body-1: 1.0625rem;--text-size-body-2: .9375rem;--text-size-caption: .8125rem;--text-size-subtitle-1: 1.0625rem;--text-size-h1: 2.5rem;--text-size-h5: 1.25rem;--text-size-button-small: .8125rem;--text-size-button-large: 1.0625rem;--text-line-height-subtitle-1: 1.5rem;--text-line-height-body-1: 1.5rem;--text-line-height-body-2: 1.375rem;--text-line-height-h1: 3.125rem;--text-line-height-h5: 1.875rem;--text-family-sans-serif: "Open Sans", sans-serif;--spacing-2: .5rem;--spacing-5: 1.5rem;--spacing-padding-margin-16: 1rem;--spacing-padding-margin-4: .25rem;--spacing-gap-4: .25rem;--spacing-gap-8: .5rem;--spacing-gap-12: .75rem;--spacing-gap-16: 1rem;--size-icon-default: 1.5rem;--text-line-height-subtitle: 1.5rem}';export{r as s};
1
+ const r=':host,:root{--color-background-primary: var(--color-blue-10, #F3F5F7);--color-stroke-brand: var(--color-blue-30, #11395B);--color-stroke-brand-secondary: var(--color-blue-20, #C3CDD6);--color-stroke-primary: var(--color-neutral-50, #6D6D6D);--color-stroke-secondary: var(--color-neutral-40, #BFBFBF);--color-stroke-success: var(--color-green-20);--color-stroke-warning: var(--color-orange-20);--color-stroke-error-weak: var(--color-red-20);--color-stroke-error-strong: var(--color-red-30);--color-stroke-tertiary: var(--color-neutral-30, #E5E5E5);--color-stroke-button: var(--color-neutral-70);--color-stroke-interactive: var(--color-neutral-70);--color-text-primary-base: var(--color-neutral-70, #1F1F1F);--color-text-secondary: var(--color-neutral-50, #6D6D6D);--color-text-brand: var(--color-blue-30, #11395B);--color-text-placeholder: var(--color-neutral-50, #6D6D6D);--color-text-error: var(--color-red-40, #AA330E);--color-text-disabled: var(--color-neutral-50, #6D6D6D);--color-text-inverse: var(--color-neutral-0, #FFFFFF);--color-surface-primary: var(--color-neutral-0, #FFFFFF);--color-surface-brand: var(--color-blue-10, #F3F5F7);--color-surface-brand-secondary: var(--color-blue-20, #C3CDD6);--color-surface-secondary: var(--color-neutral-10);--color-surface-error: var(--color-red-10);--color-surface-success: var(--color-green-10);--color-surface-warning: var(--color-orange-10);--color-surface-badge: var(--color-red-30);--color-surface-hover: var(--color-neutral-10, #F7F7F7);--color-surface-loading: var(--color-neutral-30);--color-surface-interactive-primary: var(--color-blue-40, #0E304D);--color-surface-interactive-primary-hover: var(--color-blue-50, #0A2033);--color-surface-interactive-primary-pressed: var(--color-blue-50, #0A2033);--color-icon-error: var(--color-red-30);--color-icon-success: var(--color-green-30);--color-icon-warning: var(--color-orange-30);--color-icon-disabled: var(--color-neutral-40, #BFBFBF);--color-icon-brand: var(--color-blue-30);--color-primary-03-base: var(--color-neutral-70, #1F1F1F);--color-primary-01-placeholder: var(--color-neutral-50, #6D6D6D);--color-underline-primary: var(--color-neutral-40, #BFBFBF);--color-button-pressed: var(--color-neutral-60, #404040);--color-button-disabled: var(--color-neutral-40, #BFBFBF);--color-focus-gap: var(--color-neutral-0, #FFFFFF);--color-focus-border: var(--color-blue-30, #11395B);--primary-01-placeholder: var(--color-neutral-50, #6D6D6D);--text-color-secondary: var(--color-neutral-50, #6D6D6D);--size-stroke-1: 1px;--radius-sm: .125rem;--text-size-body-1: 1.0625rem;--text-size-body-2: .9375rem;--text-size-caption: .8125rem;--text-size-subtitle-1: 1.0625rem;--text-size-h1: 2.5rem;--text-size-h5: 1.25rem;--text-size-button-small: .8125rem;--text-size-button-large: 1.0625rem;--text-line-height-subtitle-1: 1.5rem;--text-line-height-body-1: 1.5rem;--text-line-height-body-2: 1.375rem;--text-line-height-h1: 3.125rem;--text-line-height-h5: 1.875rem;--text-family-sans-serif: "Open Sans", sans-serif;--spacing-2: .5rem;--spacing-5: 1.5rem;--spacing-padding-margin-16: 1rem;--spacing-padding-margin-8: .5rem;--spacing-padding-margin-4: .25rem;--spacing-gap-4: .25rem;--spacing-gap-8: .5rem;--spacing-gap-12: .75rem;--spacing-gap-16: 1rem;--size-icon-default: 1.5rem;--text-line-height-subtitle: 1.5rem}';export{r as s};
package/dist/components/input/base/input-base.js CHANGED
@@ -1 +1 @@
1
- import{r as d}from"../../../assets/index-chunk2.js";import{n as t}from"../../../assets/index-chunk.js";var h=Object.defineProperty,e=(p,s,a,n)=>{for(var o=void 0,i=p.length-1,l;i>=0;i--)(l=p[i])&&(o=l(s,a,o)||o);return o&&h(s,a,o),o};class r extends d{constructor(){super(...arguments),this.id="",this.required=!1,this.disabled=!1,this.label="",this.placeholder="",this.errorText="",this.type="text",this.iconRight=""}}e([t()],r.prototype,"id");e([t()],r.prototype,"required");e([t()],r.prototype,"disabled");e([t()],r.prototype,"label");e([t()],r.prototype,"placeholder");e([t()],r.prototype,"value");e([t({attribute:"error-text"})],r.prototype,"errorText");e([t()],r.prototype,"type");e([t({attribute:"icon-right"})],r.prototype,"iconRight");export{r as I};
1
+ import{n as t}from"../../../assets/index-chunk.js";import{T as n}from"../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../assets/index-chunk2.js";var d=Object.defineProperty,e=(p,s,a,h)=>{for(var o=void 0,i=p.length-1,l;i>=0;i--)(l=p[i])&&(o=l(s,a,o)||o);return o&&d(s,a,o),o};class r extends n{constructor(){super(...arguments),this.id="",this.required=!1,this.disabled=!1,this.label="",this.placeholder="",this.errorText="",this.helpText="",this.type="text",this.startIcon="",this.endIcon=""}}e([t()],r.prototype,"id");e([t({type:Boolean})],r.prototype,"required");e([t({type:Boolean})],r.prototype,"disabled");e([t()],r.prototype,"label");e([t()],r.prototype,"placeholder");e([t()],r.prototype,"value");e([t({attribute:"error-text"})],r.prototype,"errorText");e([t({attribute:"help-text"})],r.prototype,"helpText");e([t()],r.prototype,"type");e([t({attribute:"start-icon"})],r.prototype,"startIcon");e([t({attribute:"end-icon"})],r.prototype,"endIcon");export{r as I};
package/dist/components/input/gator/input-label/input-label.gator.js CHANGED
@@ -1,5 +1,6 @@
1
- import{a as o,r as f,x as g}from"../../../../assets/index-chunk2.js";import{t as b}from"../../../../assets/index-chunk3.js";import{n as m}from"../../../../assets/index-chunk.js";import{p as u}from"../../../../assets/index-chunk4.js";import{s as c}from"../../../../assets/index-chunk5.js";const v=".gator-label{font-family:var(--gator-input-label-font-family);font-weight:var(--gator-input-label-font-weight);color:var(--gator-input-label-color);font-size:var(--gator-input-label-font-size);line-height:var(--gator-input-label-line-height)}",h=':host{--gator-input-label-color: var(--color-text-primary);--gator-input-label-font-family: var(--text-family-sans-serif, "Open Sans", sans-serif);--gator-input-label-font-weight: 400;--gator-input-label-font-size: 1.0625rem;--gator-input-label-line-height: 1.5rem}';var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,p=(s,r,l,e)=>{for(var t=e>1?void 0:e?_(r,l):r,n=s.length-1,i;n>=0;n--)(i=s[n])&&(t=(e?i(r,l,t):i(t))||t);return e&&t&&y(r,l,t),t};let a=class extends f{constructor(){super(...arguments),this.for=""}render(){return g`
1
+ import{a as o,r as b,x as g}from"../../../../assets/index-chunk2.js";import{t as m}from"../../../../assets/index-chunk3.js";import{n as f}from"../../../../assets/index-chunk.js";import{p as u}from"../../../../assets/index-chunk4.js";import{s as c}from"../../../../assets/index-chunk5.js";const v=".gator-label{font-family:var(--gator-input-label-font-family);font-weight:var(--gator-input-label-font-weight, 400);color:var(--gator-input-label-color, var(--color-neutral-50, #6D6D6D));font-size:var(--gator-input-label-font-size, var(--text-size-body-1, 1.0625rem));line-height:var(--gator-input-label-line-height, var(--text-line-height-body-1, 1.5rem))}.gator-label_required{font-size:var(--text-size-subtitle-1, 1.0625rem);margin-right:var(--spacing-padding-margin-8, .5rem);color:var(--color-text-error, #AA330E);font-weight:700}",h=':host{--gator-input-label-color: var(--color-text-primary-base, #1F1F1F);--gator-input-label-font-family: var(--text-family-sans-serif, "Open Sans", sans-serif);--gator-input-label-font-weight: 400;--gator-input-label-font-size: 1.0625rem;--gator-input-label-line-height: 1.5rem}';var y=Object.defineProperty,d=Object.getOwnPropertyDescriptor,s=(p,e,l,a)=>{for(var r=a>1?void 0:a?d(e,l):e,i=p.length-1,n;i>=0;i--)(n=p[i])&&(r=(a?n(e,l,r):n(r))||r);return a&&r&&y(e,l,r),r};let t=class extends b{constructor(){super(...arguments),this.for="",this.required=!1}render(){return g`
2
2
  <label class="gator-label" for=${this.for}>
3
+ ${this.required?g`<span class="gator-label_required">*</span>`:null}
3
4
  <slot></slot>
4
5
  </label>
5
- `}};a.styles=[o(v),o(h),o(c),o(u)];p([m({type:String})],a.prototype,"for",2);a=p([b("ngc-input-label")],a);
6
+ `}};t.styles=[o(v),o(h),o(c),o(u)];s([f({type:String})],t.prototype,"for",2);s([f({type:Boolean})],t.prototype,"required",2);t=s([m("ngc-input-label")],t);
package/dist/components/input/gator/input-text/input-text.gator.js CHANGED
@@ -1,35 +1,45 @@
1
- import{a as n,x as o}from"../../../../assets/index-chunk2.js";import"../input-label/input-label.gator.js";import"../help-text/help-text.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/arrow-left.js";import"../../../icon/gator/templates/arrow-right.js";import"../../../icon/gator/templates/balloons.js";import"../../../icon/gator/templates/check-circle.js";import"../../../icon/gator/templates/check.js";import"../../../icon/gator/templates/checkbox.js";import"../../../icon/gator/templates/checkbox-selected.js";import"../../../icon/gator/templates/chevron-down.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/exit.js";import"../../../icon/gator/templates/exit-circle.js";import"../../../icon/gator/templates/eye-crossed.js";import"../../../icon/gator/templates/info.js";import"../../../icon/gator/templates/link.js";import"../../../icon/gator/templates/overflow-menu.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/warning.js";import{s as u}from"../../../../assets/index-chunk5.js";import{p as g}from"../../../../assets/index-chunk4.js";import{t as m}from"../../../../assets/index-chunk3.js";import{n as d}from"../../../../assets/index-chunk.js";import{I as h}from"../../base/input-base.js";import{e as f,n as v}from"../../../../assets/index-chunk7.js";import"../../../icon/icon-registry.js";import"../../../../assets/index-chunk8.js";const x=".gator-form-element{display:block;margin-bottom:1rem}.gator-form-element-control{margin:.5rem 0;display:flex;flex-direction:column}.gator-input{border:1px solid var(--ngc-input-border-color, #BFBFBF);font-size:var(--ngc-input-font-size, 17px);padding:var(--ngc-input-padding);border-radius:var(--ngc-input-border-radius, 2px);flex:1}.gator-has-error{border-color:var(--ngc-input-error-border)!important}.gator-input:hover,.gator-input:focus{border:1px solid var(--ngc-input-border-color-focused, #1F1F1F);outline:none}.gator-form-element-control-icon-right{display:flex;align-items:center}.gator-input-container{max-width:var(--ngc-input-max-width, 200px);display:flex;align-items:center;position:relative}.gator-icon-right{cursor:pointer;display:flex;align-items:center;position:absolute;right:-.5rem}",b=":root,:host{--ngc-input-error-border: var(--color-error, #D0021B);--ngc-input-border-color: var(--color-grey-40, #BFBFBF);--ngc-input-border-color-focused: var(--color-grey-70, #1F1F1F);--ngc-input-min-width: 200px;--ngc-input-padding: 12px 16px;--ngc-input-border-radius: 2px;--ngc-input-max-width: 200px;--ngc-input-font-size: 17px}";var $=Object.defineProperty,y=Object.getOwnPropertyDescriptor,c=(r,i,s,e)=>{for(var t=e>1?void 0:e?y(i,s):i,a=r.length-1,l;a>=0;a--)(l=r[a])&&(t=(e?l(i,s,t):l(t))||t);return e&&t&&$(i,s,t),t};let p=class extends h{constructor(){super(...arguments),this._inputRef=f(),this.for=""}render(){return o`
1
+ import{a as n,x as r}from"../../../../assets/index-chunk2.js";import"../input-label/input-label.gator.js";import"../help-text/help-text.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/arrow-left.js";import"../../../icon/gator/templates/arrow-right.js";import"../../../icon/gator/templates/balloons.js";import"../../../icon/gator/templates/check-circle.js";import"../../../icon/gator/templates/check.js";import"../../../icon/gator/templates/checkbox.js";import"../../../icon/gator/templates/checkbox-selected.js";import"../../../icon/gator/templates/chevron-down.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/exit.js";import"../../../icon/gator/templates/exit-circle.js";import"../../../icon/gator/templates/eye-crossed.js";import"../../../icon/gator/templates/info.js";import"../../../icon/gator/templates/link.js";import"../../../icon/gator/templates/overflow-menu.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/warning.js";import{s as h}from"../../../../assets/index-chunk5.js";import{p as m}from"../../../../assets/index-chunk4.js";import{t as g}from"../../../../assets/index-chunk3.js";import{n as f}from"../../../../assets/index-chunk.js";import{I as v}from"../../base/input-base.js";import{e as u,n as c}from"../../../../assets/index-chunk7.js";import"../../../icon/icon-registry.js";import"../../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../../assets/index-chunk8.js";const x="input,textarea{border:none}input:focus,textarea:focus{outline:none}.gator-input-has-focus{outline:2px solid var(--ngc-input-border-color-focused, #1F1F1F)!important;border:1px solid transparent!important}.gator-form-element{display:block;margin-bottom:1rem}.gator-form-element-control{padding:var(--ngc-input-padding);display:flex;flex-direction:column}.gator-input{display:flex;width:100%;height:100%;font-size:var(--ngc-input-font-size, 1.0625rem)}.gator-form-element-control{margin:.5rem 0;border:1px solid var(--ngc-input-border-color, #BFBFBF);border-radius:var(--ngc-input-border-radius, 2px);flex:1}.gator-form-element-control:hover{border:1px solid var(--ngc-input-border-color-hovered, #1F1F1F);outline:none}.gator-has-error{border-color:var(--ngc-input-error-border)!important}.gator-form-element-control-icon-right{display:flex;align-items:center}.gator-input-container{max-width:var(--ngc-input-max-width, 200px);display:flex;align-items:center;position:relative}.gator-input-start,.gator-input-end{display:flex;align-items:center}.gator-input-start{margin-right:.5rem}",b=":root,:host{--ngc-input-error-border: var(--color-error, #D0021B);--ngc-input-border-color: var(--color-grey-40, #BFBFBF);--ngc-input-border-color-focused: var(--color-stroke-brand, #1F1F1F);--ngc-input-border-color-hovered: var(--color-stroke-interactive, #0052CC);--ngc-input-min-width: 200px;--ngc-input-padding: var(--spacing-3, .75rem) var(--spacing-4, 1rem);--ngc-input-border-radius: var(--radius-sm, .125rem);--ngc-input-max-width: 100%;--ngc-input-font-size: 17px}";var $=Object.defineProperty,I=Object.getOwnPropertyDescriptor,d=(t,i,a,o)=>{for(var e=o>1?void 0:o?I(i,a):i,p=t.length-1,l;p>=0;p--)(l=t[p])&&(e=(o?l(i,a,e):l(e))||e);return o&&e&&$(i,a,e),e};let s=class extends v{constructor(){super(...arguments),this._inputRef=u(),this._controlRef=u(),this.for=""}render(){return r`
2
2
  <div class="gator-form-element">
3
3
  ${this.label?this.labelMarkup:null}
4
- <div class="gator-form-element-control">
4
+ <div ${c(this._controlRef)} class="gator-form-element-control ${this.errorClass}">
5
5
  <div class="gator-input-container">
6
+ ${this.shouldHaveStartMarkup?r`
7
+ <div class="gator-input-start">
8
+ ${this.startIconMarkup}
9
+ </div>`:null}
6
10
  <input
7
- ${v(this._inputRef)}
11
+ ${c(this._inputRef)}
8
12
  type="${this.type}"
9
13
  .id="${this.id}"
10
14
  .placeholder="${this.placeholder}"
11
15
  .required="${this.required}"
12
16
  .disabled="${this.disabled}"
13
- class="gator-input ${this.errorClass}"
17
+ class="gator-input"
14
18
  aria-invalid="${this.isAriaInvalid}"
19
+ aria-required="${this.required}"
15
20
  .value="${this.value}"
16
21
  @input="${this.handleChange}"
22
+ @focusin="${this.handleInputFocusIn}"
23
+ @focusout="${this.handleInputFocusOut}"
17
24
  />
18
- <div class="gator-icon-right">
19
- ${this.passwordVisibilityMarkup}
20
- ${this.iconRightMarkup}
21
- </div>
25
+ ${this.shouldHaveEndMarkup?r`
26
+ <div class="gator-input-end">
27
+ ${this.passwordVisibilityMarkup}
28
+ ${this.endIconMarkup}
29
+ </div>`:null}
22
30
  </div>
23
31
  </div>
24
32
 
25
- ${this.errorTextMarkup}
33
+ ${this.bottomText}
26
34
  </div>
27
- `}handleChange(r){const i=r.target;this.value=i.value}get labelMarkup(){return o`
35
+ `}get shouldHaveStartMarkup(){return this.startIcon}get shouldHaveEndMarkup(){return this.endIcon||this.type==="password"}get startIconMarkup(){return this.startIcon?r`<ngc-icon .name="${this.startIcon}"></ngc-icon>`:null}get endIconMarkup(){return this.endIcon?r`
36
+ <ngc-icon .name="${this.endIcon}"></ngc-icon>`:null}get labelMarkup(){return r`
28
37
  <ngc-input-label
29
38
  .for="${this.id}"
30
39
  .required="${this.required}"
31
40
  >
32
41
  ${this.label}
33
- </ngc-input-label>`}get isAriaInvalid(){return this.errorText?"true":"false"}get errorClass(){return this.errorText?"gator-has-error":""}get errorTextMarkup(){return this.errorText?o`
34
- <ngc-help-text icon error>${this.errorText}</ngc-help-text>`:null}get iconRightMarkup(){return this.iconRight?o`
35
- <ngc-icon .name="${this.iconRight}"></ngc-icon>`:null}get passwordVisibilityMarkup(){return this.iconRightMarkup||this.type!=="password"?"":o`<ngc-icon name="eye-crossed" @click="${this.togglePasswordVisibility}"></ngc-icon>`}togglePasswordVisibility(){const r=this._inputRef.value;r&&(r.type=r.type==="password"?"text":"password")}};p.styles=[n(x),n(u),n(g),n(b)];c([d()],p.prototype,"for",2);p=c([m("ngc-input-text")],p);
42
+ </ngc-input-label>`}get isAriaInvalid(){return this.errorText?"true":"false"}get errorClass(){return this.errorText?"gator-has-error":""}get bottomText(){return this.errorText||this.helpText?r`
43
+ <ngc-help-text ?icon="${this.errorText}" ?error="${this.errorText}">
44
+ ${this.errorText||this.helpText}
45
+ </ngc-help-text>`:null}get passwordVisibilityMarkup(){return this.endIconMarkup||this.type!=="password"?null:r`<ngc-icon name="eye-crossed" @click="${this.togglePasswordVisibility}"></ngc-icon>`}handleChange(t){const i=t.target;this.value=i.value}togglePasswordVisibility(){const t=this._inputRef.value;t&&(t.type=t.type==="password"?"text":"password")}handleInputFocusIn(){var t;(t=this._controlRef.value)==null||t.classList.add("gator-input-has-focus")}handleInputFocusOut(){var t;(t=this._controlRef.value)==null||t.classList.remove("gator-input-has-focus")}};s.styles=[n(x),n(h),n(m),n(b)];d([f()],s.prototype,"for",2);s=d([g("ngc-input-text")],s);
package/dist/components/input/index.js CHANGED
@@ -1 +1 @@
1
- import"./gator/input-label/input-label.gator.js";import"./gator/help-text/help-text.gator.js";import"./gator/input-text/input-text.gator.js";import"./slds/input-text/input-text.slds.js";import"./slds/input-error/input-error.slds.js";import"./slds/input-label/input-label.slds.js";import"../../assets/index-chunk2.js";import"../../assets/index-chunk3.js";import"../../assets/index-chunk.js";import"../../assets/index-chunk4.js";import"../../assets/index-chunk5.js";import"../icon/gator/icon.gator.js";import"../icon/gator/templates/arrow-left.js";import"../icon/icon-registry.js";import"../icon/gator/templates/arrow-right.js";import"../icon/gator/templates/balloons.js";import"../icon/gator/templates/check-circle.js";import"../icon/gator/templates/check.js";import"../icon/gator/templates/checkbox.js";import"../icon/gator/templates/checkbox-selected.js";import"../icon/gator/templates/chevron-down.js";import"../icon/gator/templates/chevron-right.js";import"../icon/gator/templates/chevron-up.js";import"../icon/gator/templates/exit.js";import"../icon/gator/templates/exit-circle.js";import"../icon/gator/templates/eye-crossed.js";import"../icon/gator/templates/info.js";import"../icon/gator/templates/link.js";import"../icon/gator/templates/overflow-menu.js";import"../icon/gator/templates/picture.js";import"../icon/gator/templates/radio.js";import"../icon/gator/templates/radio-selected.js";import"../icon/gator/templates/restricted.js";import"../icon/gator/templates/warning.js";import"./base/input-base.js";import"../../assets/index-chunk7.js";import"../../assets/index-chunk8.js";import"../../assets/index-chunk6.js";
1
+ import"./gator/input-label/input-label.gator.js";import"./gator/help-text/help-text.gator.js";import"./gator/input-text/input-text.gator.js";import"./slds/input-text/input-text.slds.js";import"./slds/input-error/input-error.slds.js";import"./slds/input-label/input-label.slds.js";import"../../assets/index-chunk2.js";import"../../assets/index-chunk3.js";import"../../assets/index-chunk.js";import"../../assets/index-chunk4.js";import"../../assets/index-chunk5.js";import"../icon/gator/icon.gator.js";import"../icon/gator/templates/arrow-left.js";import"../icon/icon-registry.js";import"../icon/gator/templates/arrow-right.js";import"../icon/gator/templates/balloons.js";import"../icon/gator/templates/check-circle.js";import"../icon/gator/templates/check.js";import"../icon/gator/templates/checkbox.js";import"../icon/gator/templates/checkbox-selected.js";import"../icon/gator/templates/chevron-down.js";import"../icon/gator/templates/chevron-right.js";import"../icon/gator/templates/chevron-up.js";import"../icon/gator/templates/exit.js";import"../icon/gator/templates/exit-circle.js";import"../icon/gator/templates/eye-crossed.js";import"../icon/gator/templates/info.js";import"../icon/gator/templates/link.js";import"../icon/gator/templates/overflow-menu.js";import"../icon/gator/templates/picture.js";import"../icon/gator/templates/radio.js";import"../icon/gator/templates/radio-selected.js";import"../icon/gator/templates/restricted.js";import"../icon/gator/templates/warning.js";import"./base/input-base.js";import"../../utils/components/testable-lit-element/testable-lit-element.js";import"../../assets/index-chunk7.js";import"../../assets/index-chunk8.js";import"../../assets/index-chunk6.js";
package/dist/components/input/slds/input-text/input-text.slds.js CHANGED
@@ -1,4 +1,4 @@
1
- import{a as p,x as o}from"../../../../assets/index-chunk2.js";import"../input-label/input-label.slds.js";import"../input-error/input-error.slds.js";import{s as h}from"../../../../assets/index-chunk6.js";import{t as d}from"../../../../assets/index-chunk3.js";import{n as c}from"../../../../assets/index-chunk.js";import{I as m}from"../../base/input-base.js";var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,u=(t,e,l,s)=>{for(var r=s>1?void 0:s?f(e,l):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(r=(s?n(e,l,r):n(r))||r);return s&&r&&v(e,l,r),r};let i=class extends m{constructor(){super(...arguments),this.for=""}render(){return o`
1
+ import{a as p,x as o}from"../../../../assets/index-chunk2.js";import"../input-label/input-label.slds.js";import"../input-error/input-error.slds.js";import{s as h}from"../../../../assets/index-chunk6.js";import{t as d}from"../../../../assets/index-chunk3.js";import{n as c}from"../../../../assets/index-chunk.js";import{I as m}from"../../base/input-base.js";import"../../../../utils/components/testable-lit-element/testable-lit-element.js";var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,u=(t,e,l,s)=>{for(var r=s>1?void 0:s?f(e,l):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(r=(s?n(e,l,r):n(r))||r);return s&&r&&v(e,l,r),r};let i=class extends m{constructor(){super(...arguments),this.for=""}render(){return o`
2
2
  <div class="slds-form-element ${this.hasErrorClass}">
3
3
  ${this.label?this.labelMarkup:null}
4
4
  <div class="slds-form-element__control">
package/dist/types/components/input/base/input-base.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { LitElement } from 'lit';
2
- export declare class InputBase extends LitElement {
1
+ import { TestableLitElement } from '../../../utils/components/testable-lit-element/testable-lit-element.ts';
2
+ export declare class InputBase extends TestableLitElement {
3
3
  id: string;
4
4
  required: boolean;
5
5
  disabled: boolean;
@@ -7,14 +7,20 @@ export declare class InputBase extends LitElement {
7
7
  placeholder: string;
8
8
  value: string | number | undefined | null;
9
9
  errorText: string;
10
+ helpText: string;
10
11
  /**
11
12
  * @property {string} type - The type of the input element.
12
13
  * @type {string}
13
14
  */
14
15
  type: string;
15
16
  /**
16
- * @property {string} iconRight - The icon to display on the right side of the input.
17
+ * @property {string} startIcon - The icon to display on the right side of the input.
17
18
  * @type {string}
18
19
  */
19
- iconRight: string;
20
+ startIcon: string;
21
+ /**
22
+ * @property {string} endIcon - The icon to display on the right side of the input.
23
+ * @type {string}
24
+ */
25
+ endIcon: string;
20
26
  }
package/dist/types/components/input/gator/help-text/help-text.gator.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare class NgcHelpText extends LitElement {
6
6
  */
7
7
  id: string;
8
8
  /**
9
- * @property {boolean} icon - Defines if the help text inline message should render the preceeding icon.
9
+ * @property {boolean} icon - Defines if the help text inline message should render the preceding icon.
10
10
  */
11
11
  icon: boolean;
12
12
  /**
package/dist/types/components/input/gator/input-label/input-label.gator.d.ts CHANGED
@@ -5,6 +5,10 @@ export declare class NgcInputLabel extends LitElement {
5
5
  * @property {string} for - The id of the input element the label is for.
6
6
  */
7
7
  for: string;
8
+ /**
9
+ * @property {boolean} required - Whether the label is required.
10
+ */
11
+ required: boolean;
8
12
  render(): import('lit').TemplateResult<1>;
9
13
  }
10
14
  declare global {
package/dist/types/components/input/gator/input-text/input-text.gator.d.ts CHANGED
@@ -3,16 +3,22 @@ import { Ref } from 'lit/directives/ref.js';
3
3
  export declare class NgcInputText extends InputBase {
4
4
  static styles: import('lit').CSSResult[];
5
5
  _inputRef: Ref<HTMLInputElement>;
6
+ _controlRef: Ref<HTMLDivElement>;
6
7
  for: string;
7
8
  render(): import('lit').TemplateResult<1>;
8
- handleChange(e: Event): void;
9
+ get shouldHaveStartMarkup(): string;
10
+ get shouldHaveEndMarkup(): string | boolean;
11
+ get startIconMarkup(): import('lit').TemplateResult<1> | null;
12
+ get endIconMarkup(): import('lit').TemplateResult<1> | null;
9
13
  get labelMarkup(): import('lit').TemplateResult<1>;
10
14
  get isAriaInvalid(): "true" | "false";
11
15
  get errorClass(): "" | "gator-has-error";
12
- get errorTextMarkup(): import('lit').TemplateResult<1> | null;
13
- get iconRightMarkup(): import('lit').TemplateResult<1> | null;
14
- get passwordVisibilityMarkup(): "" | import('lit').TemplateResult<1>;
16
+ get bottomText(): import('lit').TemplateResult<1> | null;
17
+ get passwordVisibilityMarkup(): import('lit').TemplateResult<1> | null;
18
+ handleChange(e: Event): void;
15
19
  togglePasswordVisibility(): void;
20
+ handleInputFocusIn(): void;
21
+ handleInputFocusOut(): void;
16
22
  }
17
23
  declare global {
18
24
  interface HTMLElementTagNameMap {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ncino/web-components",
3
3
  "author": "nCino",
4
- "version": "2.0.0-preview.1",
4
+ "version": "2.0.0-preview.2",
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": "1.3.0-preview.1",
4
+ "version": "2.0.0-preview.1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -747,11 +747,18 @@
747
747
  "description": "\n---\n",
748
748
  "doc-url": "",
749
749
  "attributes": [
750
- { "name": "for", "value": { "type": "string", "default": "''" } }
750
+ { "name": "for", "value": { "type": "string", "default": "''" } },
751
+ {
752
+ "name": "required",
753
+ "value": { "type": "boolean", "default": "false" }
754
+ }
751
755
  ],
752
756
  "events": [],
753
757
  "js": {
754
- "properties": [{ "name": "for", "type": "string" }],
758
+ "properties": [
759
+ { "name": "for", "type": "string" },
760
+ { "name": "required", "type": "boolean" }
761
+ ],
755
762
  "events": []
756
763
  }
757
764
  },
@@ -1511,25 +1518,41 @@
1511
1518
  "name": "error-text",
1512
1519
  "value": { "type": "string", "default": "''" }
1513
1520
  },
1521
+ {
1522
+ "name": "help-text",
1523
+ "value": { "type": "string", "default": "''" }
1524
+ },
1514
1525
  {
1515
1526
  "name": "type",
1516
1527
  "value": { "type": "string", "default": "'text'" }
1517
1528
  },
1518
1529
  {
1519
- "name": "icon-right",
1530
+ "name": "start-icon",
1531
+ "value": { "type": "string", "default": "''" }
1532
+ },
1533
+ {
1534
+ "name": "end-icon",
1520
1535
  "value": { "type": "string", "default": "''" }
1536
+ },
1537
+ {
1538
+ "name": "data-testid",
1539
+ "value": { "type": "string | undefined", "default": "undefined" }
1521
1540
  }
1522
1541
  ],
1523
1542
  "events": [],
1524
1543
  "js": {
1525
1544
  "properties": [
1526
1545
  { "name": "_inputRef", "type": "Ref<HTMLInputElement>" },
1546
+ { "name": "_controlRef", "type": "Ref<HTMLDivElement>" },
1527
1547
  { "name": "for", "type": "string" },
1548
+ { "name": "shouldHaveStartMarkup" },
1549
+ { "name": "shouldHaveEndMarkup" },
1550
+ { "name": "startIconMarkup" },
1551
+ { "name": "endIconMarkup" },
1528
1552
  { "name": "labelMarkup" },
1529
1553
  { "name": "isAriaInvalid" },
1530
1554
  { "name": "errorClass" },
1531
- { "name": "errorTextMarkup" },
1532
- { "name": "iconRightMarkup" },
1555
+ { "name": "bottomText" },
1533
1556
  { "name": "passwordVisibilityMarkup" },
1534
1557
  { "name": "id", "type": "string" },
1535
1558
  { "name": "required", "type": "boolean" },
@@ -1538,8 +1561,14 @@
1538
1561
  { "name": "placeholder", "type": "string" },
1539
1562
  { "name": "value", "type": "string | number | undefined | null" },
1540
1563
  { "name": "errorText", "type": "string" },
1564
+ { "name": "helpText", "type": "string" },
1541
1565
  { "name": "type", "type": "string" },
1542
- { "name": "iconRight", "type": "string" }
1566
+ { "name": "startIcon", "type": "string" },
1567
+ { "name": "endIcon", "type": "string" },
1568
+ { "name": "dataTestid", "type": "string | undefined" },
1569
+ { "name": "labelDataTestid" },
1570
+ { "name": "helpTextDataTestid" },
1571
+ { "name": "errorMessageDataTestid" }
1543
1572
  ],
1544
1573
  "events": []
1545
1574
  }
@@ -1615,13 +1644,25 @@
1615
1644
  "name": "error-text",
1616
1645
  "value": { "type": "string", "default": "''" }
1617
1646
  },
1647
+ {
1648
+ "name": "help-text",
1649
+ "value": { "type": "string", "default": "''" }
1650
+ },
1618
1651
  {
1619
1652
  "name": "type",
1620
1653
  "value": { "type": "string", "default": "'text'" }
1621
1654
  },
1622
1655
  {
1623
- "name": "icon-right",
1656
+ "name": "start-icon",
1624
1657
  "value": { "type": "string", "default": "''" }
1658
+ },
1659
+ {
1660
+ "name": "end-icon",
1661
+ "value": { "type": "string", "default": "''" }
1662
+ },
1663
+ {
1664
+ "name": "data-testid",
1665
+ "value": { "type": "string | undefined", "default": "undefined" }
1625
1666
  }
1626
1667
  ],
1627
1668
  "events": [],
@@ -1638,8 +1679,14 @@
1638
1679
  { "name": "placeholder", "type": "string" },
1639
1680
  { "name": "value", "type": "string | number | undefined | null" },
1640
1681
  { "name": "errorText", "type": "string" },
1682
+ { "name": "helpText", "type": "string" },
1641
1683
  { "name": "type", "type": "string" },
1642
- { "name": "iconRight", "type": "string" }
1684
+ { "name": "startIcon", "type": "string" },
1685
+ { "name": "endIcon", "type": "string" },
1686
+ { "name": "dataTestid", "type": "string | undefined" },
1687
+ { "name": "labelDataTestid" },
1688
+ { "name": "helpTextDataTestid" },
1689
+ { "name": "errorMessageDataTestid" }
1643
1690
  ],
1644
1691
  "events": []
1645
1692
  }