@ncino/web-components 2.1.0-preview.1 → 2.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.
- package/dist/components/input/gator/dropdown/input-dropdown.gator.js +3 -2
- package/dist/components/input/gator/input-masked/input-masked.gator.js +1 -1
- package/dist/components/input/gator/input-text/input-text.gator.js +15 -11
- package/dist/types/components/input/gator/input-text/input-text.gator.d.ts +2 -0
- package/package.json +1 -1
- package/web-types.json +2 -2
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import{a as v,x as d}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/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-left.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/dashboard.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/percent.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/shield-lock.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/settings.js";import"../../../icon/gator/templates/warning.js";import"../../../list/gator/list/list.gator.js";import"../../../list/gator/list-item/list-item.gator.js";import{t as m}from"../../../../assets/index-chunk3.js";import{n as p}from"../../../../assets/index-chunk.js";import{r as f}from"../../../../assets/index-chunk4.js";import{e as c,n}from"../../../../assets/index-chunk8.js";import{a as x,c as b,b as y}from"../../../../assets/index-chunk13.js";import{K as o}from"../../../../consts/key-constants.js";import{N as g}from"../../base/input-base.gator.js";import{f as w,a as $}from"../../../../utils/places-utils.js";import{f as _}from"../../../../utils/industry-utils.js";import"../../../../assets/index-chunk5.js";import"../../../../assets/index-chunk6.js";import"../../../../utils/mixins/attribute-deletion.js";import"../../../icon/icon-registry.js";import"../../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../divider/gator/divider.gator.js";import"../../../divider/divider.js";import"../../../../assets/index-
|
|
1
|
+
import{a as v,x as d}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/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-left.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/dashboard.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/percent.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/shield-lock.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/settings.js";import"../../../icon/gator/templates/warning.js";import"../../../list/gator/list/list.gator.js";import"../../../list/gator/list-item/list-item.gator.js";import{t as m}from"../../../../assets/index-chunk3.js";import{n as p}from"../../../../assets/index-chunk.js";import{r as f}from"../../../../assets/index-chunk4.js";import{e as c,n}from"../../../../assets/index-chunk8.js";import{a as x,c as b,b as y}from"../../../../assets/index-chunk13.js";import{K as o}from"../../../../consts/key-constants.js";import{N as g}from"../../base/input-base.gator.js";import{f as w,a as $}from"../../../../utils/places-utils.js";import{f as _}from"../../../../utils/industry-utils.js";import{o as R}from"../../../../assets/index-chunk7.js";import"../../../../assets/index-chunk5.js";import"../../../../assets/index-chunk6.js";import"../../../../utils/mixins/attribute-deletion.js";import"../../../icon/icon-registry.js";import"../../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../divider/gator/divider.gator.js";import"../../../divider/divider.js";import"../../../../assets/index-chunk9.js";import"../../base/input-base.js";const D=':root,:host{--ngc-input-dropdown-list-max-height: 14rem}.gator-dropdown-listbox{position:absolute;width:max-content;top:0;left:0;display:none;max-height:var(--ngc-input-dropdown-list-max-height);overflow-y:scroll;overflow-x:hidden;border-radius:var(--radius-card-medium, .5rem);padding:var(--spacing-padding-margin-8, .5rem) 2px;background:var(--color-surface-primary-white, #FFF);box-shadow:var(--shadow-x-offset-0, 0px) var(--shadow-shadow-3-dropdown-property-1-y-offset, 7px) var(--shadow-shadow-3-dropdown-property-1-blur, 12px) var(--shadow-shadow-3-dropdown-property-1-spread, 0px) var(--shadow-color-10, rgba(31, 31, 31, .1)),var(--shadow-x-offset-0, 0px) var(--shadow-shadow-3-dropdown-property-2-y-offset, 8px) var(--shadow-shadow-3-dropdown-property-2-blur, 16px) var(--shadow-shadow-3-dropdown-property-2-spread, 0px) var(--shadow-color-8, rgba(31, 31, 31, .08)),var(--shadow-x-offset-0, 0px) var(--shadow-shadow-3-dropdown-property-3-y-offset, 9px) var(--shadow-shadow-3-dropdown-property-3-blur, 18px) var(--shadow-shadow-3-dropdown-property-3-spread, 0px) var(--shadow-color-8, rgba(31, 31, 31, .08))}.gator-form-element-control:focus{outline:2px solid var(--ngc-input-border-color-focused, #1F1F1F)!important;border:1px solid transparent!important}.gator-dropdown-listbox_expanded{display:block}.gator-faux-input-placeholder{color:var(--text-color-placeholder, #6D6D6D);font-family:var(--text-family-body, "Open Sans");font-size:var(--text-size-body-1, 1.0625rem);line-height:var(--text-line-height-body-1, 1.5rem);letter-spacing:var(--text-letter-spacing-default, 0rem)}';var F=Object.defineProperty,k=Object.getOwnPropertyDescriptor,I=Object.getPrototypeOf,O=Reflect.get,l=(t,e,i,a)=>{for(var r=a>1?void 0:a?k(e,i):e,h=t.length-1,u;h>=0;h--)(u=t[h])&&(r=(a?u(e,i,r):u(r))||r);return a&&r&&F(e,i,r),r},P=(t,e,i)=>O(I(t),i,e);let s=class extends g{constructor(){super(...arguments),this.options=[],this.autocomplete=!1,this._expanded=!1,this._searchValue="",this.listboxRef=c(),this.listRef=c(),this.inputRef=c()}render(){return d`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
${this.label?this.labelMarkup:null}
|
|
4
4
|
<div
|
|
5
5
|
${n(this.controlRef)}
|
|
6
6
|
class="gator-form-element-control ${this.errorClass} gator-cursor-pointer"
|
|
7
|
+
data-testid=${R(this.dataTestid)}-listbox
|
|
7
8
|
aria-controls="listbox-${this.id}"
|
|
8
9
|
aria-expanded="${this._expanded}"
|
|
9
10
|
aria-haspopup="listbox"
|
|
@@ -87,4 +88,4 @@ import{a as v,x as d}from"../../../../assets/index-chunk2.js";import"../input-la
|
|
|
87
88
|
type="div"
|
|
88
89
|
>
|
|
89
90
|
${this.label}
|
|
90
|
-
</ngc-input-label>`}toggleListbox(t,e){var i;e||(this._expanded=!this._expanded),setTimeout(()=>{var a;this.assignPosition(),this.listRef.value&&(t==o.DOWN||!this.value)?this._activeDescendant=this.listRef.value.falseFocusFirstItem():this.value&&this.listRef.value&&(this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value)),this._expanded&&((a=this.controlRef.value)==null||a.setAttribute("aria-activedescendant",this.replacedActiveDescendant))}),this._expanded||(this._activeDescendant=void 0,(i=this.controlRef.value)==null||i.removeAttribute("aria-activedescendant"))}get endIconMarkup(){return d`<ngc-icon .name="${this.endIcon||"chevron-down"}"></ngc-icon>`}assignPosition(){const t=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!t||(this._cleanup=x(t,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!t)return;const{x:e,y:i,placement:a}=await b(t,this.listboxRef.value,{placement:"bottom",middleware:[y()]});let r=a==="bottom"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${e}px`,top:`${i+r}px`,width:`${t.clientWidth}px`})}))}handleInput(t){let e=t.target;this._searchValue=e.value,this._expanded=!0}handleInputKeydown(t){if((t.key===o.DOWN||t.key===o.UP)&&t.preventDefault(),t.key===o.SPACE){t.stopPropagation();return}}};s.styles=[...
|
|
91
|
+
</ngc-input-label>`}toggleListbox(t,e){var i;e||(this._expanded=!this._expanded),setTimeout(()=>{var a;this.assignPosition(),this.listRef.value&&(t==o.DOWN||!this.value)?this._activeDescendant=this.listRef.value.falseFocusFirstItem():this.value&&this.listRef.value&&(this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value)),this._expanded&&((a=this.controlRef.value)==null||a.setAttribute("aria-activedescendant",this.replacedActiveDescendant))}),this._expanded||(this._activeDescendant=void 0,(i=this.controlRef.value)==null||i.removeAttribute("aria-activedescendant"))}get endIconMarkup(){return d`<ngc-icon .name="${this.endIcon||"chevron-down"}"></ngc-icon>`}assignPosition(){const t=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!t||(this._cleanup=x(t,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!t)return;const{x:e,y:i,placement:a}=await b(t,this.listboxRef.value,{placement:"bottom",middleware:[y()]});let r=a==="bottom"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${e}px`,top:`${i+r}px`,width:`${t.clientWidth}px`})}))}handleInput(t){let e=t.target;this._searchValue=e.value,this._expanded=!0}handleInputKeydown(t){if((t.key===o.DOWN||t.key===o.UP)&&t.preventDefault(),t.key===o.SPACE){t.stopPropagation();return}}};s.styles=[...P(s,s,"styles"),v(D)];l([p({type:Array})],s.prototype,"options",2);l([p({type:Boolean})],s.prototype,"autocomplete",2);l([p({type:String,attribute:"data-type"})],s.prototype,"dataType",2);l([p({type:String,attribute:"country-code"})],s.prototype,"countryCode",2);l([f()],s.prototype,"_activeDescendant",2);l([f()],s.prototype,"_expanded",2);l([f()],s.prototype,"_searchValue",2);s=l([m("ngc-input-dropdown")],s);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as h}from"../../../../assets/index-chunk3.js";import{n as u}from"../../../../assets/index-chunk.js";import{r as l}from"../../../../assets/index-chunk4.js";import{N as m}from"../input-text/input-text.gator.js";import"../../../../assets/index-chunk2.js";import"../input-label/input-label.gator.js";import"../../../../assets/index-chunk5.js";import"../../../../assets/index-chunk6.js";import"../../../../utils/mixins/attribute-deletion.js";import"../help-text/help-text.gator.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/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-left.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/dashboard.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/percent.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/shield-lock.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/settings.js";import"../../../icon/gator/templates/warning.js";import"../../../../assets/index-chunk8.js";import"../../../../assets/index-chunk9.js";import"../../base/input-base.gator.js";import"../../base/input-base.js";import"../../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../../assets/index-chunk7.js";var c=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,_=Reflect.get,
|
|
1
|
+
import{t as h}from"../../../../assets/index-chunk3.js";import{n as u}from"../../../../assets/index-chunk.js";import{r as l}from"../../../../assets/index-chunk4.js";import{N as m}from"../input-text/input-text.gator.js";import"../../../../assets/index-chunk2.js";import"../input-label/input-label.gator.js";import"../../../../assets/index-chunk5.js";import"../../../../assets/index-chunk6.js";import"../../../../utils/mixins/attribute-deletion.js";import"../help-text/help-text.gator.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/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-left.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/dashboard.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/percent.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/shield-lock.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/settings.js";import"../../../icon/gator/templates/warning.js";import"../../../../assets/index-chunk8.js";import"../../../../assets/index-chunk9.js";import"../../base/input-base.gator.js";import"../../base/input-base.js";import"../../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../../assets/index-chunk7.js";var c=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,_=Reflect.get,p=(t,e,r,s)=>{for(var i=s>1?void 0:s?d(e,r):e,o=t.length-1,n;o>=0;o--)(n=t[o])&&(i=(s?n(e,r,i):n(i))||i);return s&&i&&c(e,r,i),i},v=(t,e,r)=>_(f(t),r,e);let a=class extends m{constructor(){super(...arguments),this.maskPreset=null,this.maskPattern="",this.acceptedCharType="numeric",this.value="",this._value="",this._inputFocused=!1,this._cursorPosition=null}updated(t){super.updated(t),t.has("value")&&(this._value=this.formatValue(this.value)),t.has("errorText")&&!this.errorText&&this.validateChars(this.value),t.get("_cursorPosition")&&this.inputRef.value&&this.inputRef.value.setSelectionRange(this._cursorPosition,this._cursorPosition),t.has("maskPreset")&&(this._placeholder=this.placeholder?this.placeholder:this._maskPattern.split("").map((e,r)=>e==="#"?((r+1)%10).toString():e).join(""),this._maxLength=this._maskPattern.length,this._value=this.formatValue(this.value))}handleInputEvent(t){t.preventDefault(),t.stopPropagation();const e=t.target,r=e.selectionStart??0,s=this.formatValue(e.value),i=this._value.length<e.value.length,o=!!this.errorText,n=new CustomEvent("input",{bubbles:!0,composed:!0,detail:{formatted:s,raw:o?s:s.replaceAll("-","")}});i&&s[r-1]==="-"?this._cursorPosition=r+1:this._cursorPosition=r,this._value=s,this.dispatchEvent(n)}handleClick(t){const e=t.target;this._cursorPosition=e.selectionStart??0}handleInputFocusIn(){super.handleInputFocusIn(),this._inputFocused=!0,this._value=this.formatValue(this.value)}handleInputFocusOut(){super.handleInputFocusOut(),this._inputFocused=!1,this._value=this.formatValue(this._value)}get _maskPattern(){switch(this.maskPreset){case"ssn":return"XXX-XX-####";case"ein":return"XX-XXX####";default:return this.maskPattern}}validateChars(t){const e={numeric:{regex:/^[0-9]*$/,errText:"numbers"},alpha:{regex:/^[a-zA-Z]*$/,errText:"letters"},alphanumeric:{regex:/^[a-zA-Z0-9]*$/,errText:"letters, numbers,"}};return e[this.acceptedCharType].regex.test(t.replaceAll("-",""))?(this._errorText=this.errorText,!0):(this.errorText||(this._errorText=`Invalid input. Use only ${e[this.acceptedCharType].errText} and dashes in this field.`),!1)}formatValue(t){if(!this.validateChars(t))return t;const e=t.replaceAll(/[^a-zA-Z0-9]/g,"").substring(0,this._maskPattern.length);let r="",s=0;for(let i=0;i<this._maskPattern.length&&s!==e.length;++i){const o=e[s],n=this._maskPattern[i];switch(n){case"X":{this._inputFocused?r+=o:r+="X",s++;break}case"#":{r+=o,s++;break}default:r+=n}}return r}};a.styles=[...v(a,a,"styles")];p([u({attribute:"mask-preset"})],a.prototype,"maskPreset",2);p([u({attribute:"mask-pattern"})],a.prototype,"maskPattern",2);p([u({attribute:"accepted-char-type"})],a.prototype,"acceptedCharType",2);p([l()],a.prototype,"_inputFocused",2);p([l()],a.prototype,"_cursorPosition",2);a=p([h("ngc-input-masked")],a);
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import{T as
|
|
1
|
+
import{T as u,E as T,x as p}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/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-left.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/dashboard.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/percent.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/shield-lock.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/settings.js";import"../../../icon/gator/templates/warning.js";import{t as x}from"../../../../assets/index-chunk3.js";import{n as h}from"../../../../assets/index-chunk.js";import{r as l}from"../../../../assets/index-chunk4.js";import{f as $,m as b,e as v,n as f}from"../../../../assets/index-chunk8.js";import{N as y}from"../../base/input-base.gator.js";import{o as c}from"../../../../assets/index-chunk7.js";import{e as E,i as _,t as n}from"../../../../assets/index-chunk9.js";import"../../../../assets/index-chunk5.js";import"../../../../assets/index-chunk6.js";import"../../../../utils/mixins/attribute-deletion.js";import"../../../icon/icon-registry.js";import"../../base/input-base.js";import"../../../../utils/components/testable-lit-element/testable-lit-element.js";/**
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2020 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/const
|
|
5
|
+
*/const g=E(class extends _{constructor(t){if(super(t),t.type!==n.PROPERTY&&t.type!==n.ATTRIBUTE&&t.type!==n.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!$(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===u||e===T)return e;const i=t.element,o=t.name;if(t.type===n.PROPERTY){if(e===i[o])return u}else if(t.type===n.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(o))return u}else if(t.type===n.ATTRIBUTE&&i.getAttribute(o)===e+"")return u;return b(t),e}});var I=Object.defineProperty,R=Object.getOwnPropertyDescriptor,s=(t,e,i,o)=>{for(var a=o>1?void 0:o?R(e,i):e,d=t.length-1,m;d>=0;d--)(m=t[d])&&(a=(o?m(e,i,a):m(a))||a);return o&&a&&I(e,i,a),a};let r=class extends y{constructor(){super(...arguments),this.inputRef=v(),this.controlRef=v(),this.for=""}render(){return p`
|
|
6
6
|
<div class="gator-form-element">
|
|
7
7
|
${this.label?this.labelMarkup:null}
|
|
8
|
-
<div ${
|
|
8
|
+
<div ${f(this.controlRef)} class="gator-form-element-control ${this.errorClass} ${this.disabledClass}">
|
|
9
9
|
<div class="gator-input-container">
|
|
10
10
|
${this.shouldHaveStartMarkup?p`
|
|
11
11
|
<div class="gator-input-start">
|
|
12
12
|
${this.startIconMarkup}
|
|
13
13
|
</div>`:null}
|
|
14
14
|
<input
|
|
15
|
-
${
|
|
15
|
+
${f(this.inputRef)}
|
|
16
16
|
type="${this.type}"
|
|
17
17
|
.id="${this.id}"
|
|
18
18
|
data-testid=${c(this.dataTestid)}-input
|
|
19
|
-
.placeholder="${
|
|
19
|
+
.placeholder="${g(this._placeholder)}"
|
|
20
20
|
.required="${this.required}"
|
|
21
21
|
.disabled="${this.disabled}"
|
|
22
22
|
class="gator-input"
|
|
23
23
|
aria-invalid="${this.isAriaInvalid}"
|
|
24
24
|
aria-required="${this.required}"
|
|
25
25
|
aria-description="${c(this.ariaDescription)}"
|
|
26
|
-
.value="${
|
|
26
|
+
.value="${g(this._value)}"
|
|
27
27
|
maxlength="${c(this._maxLength)}"
|
|
28
28
|
.min="${this.min}"
|
|
29
29
|
.max="${this.max}"
|
|
@@ -45,8 +45,12 @@ import{T as l,E as $,x as p}from"../../../../assets/index-chunk2.js";import"../i
|
|
|
45
45
|
|
|
46
46
|
${this.bottomText}
|
|
47
47
|
</div>
|
|
48
|
-
`}get displayedErrorText(){return this.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
`}updated(t){t.has("errorText")&&(this._errorText=this.errorText)}get displayedErrorText(){return this._errorText||this._nativeInputError}get isAriaInvalid(){return this.displayedErrorText?"true":"false"}get errorClass(){return this.displayedErrorText?"gator-has-error":""}get disabledClass(){return this.disabled?"gator-disabled":""}get passwordVisibilityMarkup(){return this.endIconMarkup||this.type!=="password"?null:p`<ngc-icon name="eye-crossed" @click="${this.togglePasswordVisibility}"></ngc-icon>`}connectedCallback(){super.connectedCallback(),this._value=this.value,this._maxLength=this.maxLength,this._placeholder=this.placeholder,this._errorText=this.errorText}handleNativeInputValidation(t){this.inputRef.value&&(this._nativeInputError=this.inputRef.value.validationMessage),t.preventDefault()}handleInputEvent(t){t.preventDefault(),t.stopPropagation();const e=t.target,i=new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:e.value}});this._value=e.value,this.dispatchEvent(i)}handleChange(t){t.preventDefault(),t.stopPropagation();const e=t.target,i=new CustomEvent("change",{composed:!0,bubbles:!0,detail:{value:e.value}});this._value=e.value,this.dispatchEvent(i)}togglePasswordVisibility(){const t=this.inputRef.value;t&&(t.type=t.type==="password"?"text":"password")}handleInputFocusOut(){var t;super.handleInputFocusOut(),(t=this.inputRef.value)!=null&&t.checkValidity()&&(this._nativeInputError="")}get errorTextMarkup(){return this.displayedErrorText?p`
|
|
49
|
+
<ngc-help-text
|
|
50
|
+
icon
|
|
51
|
+
error
|
|
52
|
+
data-testid=${this.errorMessageDataTestid}
|
|
53
|
+
>
|
|
54
|
+
${this.displayedErrorText}
|
|
55
|
+
</ngc-help-text>
|
|
56
|
+
`:null}};r.shadowRootOptions={...y.shadowRootOptions,delegatesFocus:!0};s([h()],r.prototype,"for",2);s([h({type:Number})],r.prototype,"min",2);s([h({type:Number})],r.prototype,"max",2);s([h({type:Number})],r.prototype,"step",2);s([l()],r.prototype,"_nativeInputError",2);s([l()],r.prototype,"_value",2);s([l()],r.prototype,"_maxLength",2);s([l()],r.prototype,"_placeholder",2);s([l()],r.prototype,"_errorText",2);r=s([x("ngc-input-text")],r);export{r as N};
|
|
@@ -29,7 +29,9 @@ export declare class NgcInputText extends NgcInputBase {
|
|
|
29
29
|
protected _value: string | number | undefined | null;
|
|
30
30
|
protected _maxLength: number | undefined;
|
|
31
31
|
protected _placeholder: string | undefined;
|
|
32
|
+
protected _errorText: string | undefined;
|
|
32
33
|
render(): import('lit').TemplateResult<1>;
|
|
34
|
+
updated(changedProperties: Map<string, string>): void;
|
|
33
35
|
get displayedErrorText(): string | undefined;
|
|
34
36
|
get isAriaInvalid(): "true" | "false";
|
|
35
37
|
get errorClass(): "" | "gator-has-error";
|
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": "2.0
|
|
4
|
+
"version": "2.1.0-preview.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -1716,7 +1716,7 @@
|
|
|
1716
1716
|
"name": "accepted-char-type",
|
|
1717
1717
|
"value": {
|
|
1718
1718
|
"type": "'numeric' | 'alpha' | 'alphanumeric'",
|
|
1719
|
-
"default": "'
|
|
1719
|
+
"default": "'numeric'"
|
|
1720
1720
|
}
|
|
1721
1721
|
},
|
|
1722
1722
|
{ "name": "for", "value": { "type": "string", "default": "''" } },
|