@ncino/web-components 2.0.0 → 2.0.1-preview.1
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/base/input-base.gator.js +4 -3
- package/dist/components/input/gator/input-masked/input-masked.gator.js +1 -1
- package/dist/components/input/gator/input-text/input-text.gator.js +13 -11
- package/dist/types/components/input/gator/input-masked/input-masked.gator.d.ts +0 -1
- package/dist/types/components/input/gator/input-text/input-text.gator.d.ts +1 -0
- package/package.json +1 -1
- package/web-types.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as o,x as t}from"../../../assets/index-chunk2.js";import"../gator/input-label/input-label.gator.js";import"../gator/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{s as
|
|
1
|
+
import{a as o,x as t}from"../../../assets/index-chunk2.js";import"../gator/input-label/input-label.gator.js";import"../gator/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{s as n}from"../../../assets/index-chunk6.js";import{p as a}from"../../../assets/index-chunk5.js";import{I as p}from"./input-base.js";import{e as s}from"../../../assets/index-chunk8.js";import"../../../assets/index-chunk3.js";import"../../../assets/index-chunk.js";import"../../../utils/mixins/attribute-deletion.js";import"../../icon/icon-registry.js";import"../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../assets/index-chunk9.js";const l='input,textarea{border:none}input:focus,textarea:focus{outline:none}.gator-form-element-control:focus-within{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,.gator-faux-input{display:flex;width:100%;height:100%;font-size:var(--ngc-input-font-size, 1.0625rem);font-family:var(--text-family-sans-serif, "Open Sans", sans-serif)}.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:not(.gator-disabled){border:1px solid var(--ngc-input-border-color-hovered, #1F1F1F);outline:none}.gator-has-error{border-color:var(--ngc-input-error-border)!important}.gator-disabled{background:var(--color-surface-secondary, #F7F7F7);border:none;cursor:not-allowed}.gator-disabled input,.gator-disabled textarea{background-color:transparent;cursor:not-allowed}.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}.gator-cursor-pointer{cursor:pointer}',c=":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}",e=class e extends p{constructor(){super(...arguments),this.controlRef=s()}get shouldHaveStartMarkup(){return this.startIcon}get shouldHaveEndMarkup(){return this.endIcon||this.type==="password"}get startIconMarkup(){return this.startIcon?t`<ngc-icon .name="${this.startIcon}"></ngc-icon>`:null}get endIconMarkup(){return this.endIcon?t`
|
|
2
2
|
<ngc-icon .name="${this.endIcon}"></ngc-icon>`:null}get labelMarkup(){return t`
|
|
3
3
|
<ngc-input-label
|
|
4
4
|
.for="${this.id}"
|
|
@@ -12,6 +12,7 @@ import{a as o,x as t}from"../../../assets/index-chunk2.js";import"../gator/input
|
|
|
12
12
|
${this.helpTextMarkup}
|
|
13
13
|
${this.errorTextMarkup}
|
|
14
14
|
`}get errorTextMarkup(){return this.errorText?t`
|
|
15
|
-
<ngc-help-text icon="warning" error
|
|
15
|
+
<ngc-help-text icon="warning" error
|
|
16
|
+
data-testid=${this.errorMessageDataTestid}>
|
|
16
17
|
${this.errorText}
|
|
17
|
-
</ngc-help-text>`:null}handleClick(r){}handleInputFocusIn(){var r;(r=this.controlRef.value)==null||r.classList.add("gator-input-has-focus")}handleInputFocusOut(){var r;(r=this.controlRef.value)==null||r.classList.remove("gator-input-has-focus")}};e.styles=[o(l),o(
|
|
18
|
+
</ngc-help-text>`:null}handleClick(r){}handleInputFocusIn(){var r;(r=this.controlRef.value)==null||r.classList.add("gator-input-has-focus")}handleInputFocusOut(){var r;(r=this.controlRef.value)==null||r.classList.remove("gator-input-has-focus")}};e.styles=[o(l),o(n),o(a),o(c)];let i=e;export{i as N,c as g,l as i};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as h}from"../../../../assets/index-chunk3.js";import{n as
|
|
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,n=(t,e,s,i)=>{for(var r=i>1?void 0:i?d(e,s):e,o=t.length-1,p;o>=0;o--)(p=t[o])&&(r=(i?p(e,s,r):p(r))||r);return i&&r&&c(e,s,r),r},v=(t,e,s)=>_(f(t),s,e);let a=class extends m{constructor(){super(...arguments),this.maskPreset=null,this.maskPattern="",this.acceptedCharType="alphanumeric",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.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,s)=>e==="#"?((s+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,s=e.selectionStart??0,i=this.formatValue(e.value),r=this._value.length<e.value.length,o=!!this.errorText,p=new CustomEvent("input",{bubbles:!0,composed:!0,detail:{formatted:i,raw:o?i:i.replaceAll("-","")}});r&&i[s-1]==="-"?this._cursorPosition=s+1:this._cursorPosition=s,this._value=i,this.dispatchEvent(p)}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){switch(this.acceptedCharType){case"numeric":return/^[0-9]*$/.test(t.replaceAll("-",""));case"alpha":return/^[a-zA-Z]*$/.test(t.replaceAll("-",""));case"alphanumeric":default:return/^[a-zA-Z0-9]*$/.test(t.replaceAll("-",""))}}formatValue(t){if(!this.validateChars(t)){let r="";switch(this.acceptedCharType){case"alpha":{r="letters";break}case"numeric":{r="numbers";break}default:r="letters, numbers,"}return this.errorText=`Invalid ${this.label??"input"}. Use only ${r} and dashes in this field.`,t}this.errorText="";const e=t.replaceAll(/[^a-zA-Z0-9]/g,"").substring(0,this._maskPattern.length);let s="",i=0;for(let r=0;r<this._maskPattern.length&&i!==e.length;++r){const o=e[i],p=this._maskPattern[r];switch(p){case"X":{this._inputFocused?s+=o:s+="X",i++;break}case"#":{s+=o,i++;break}default:s+=p}}return s}};a.styles=[...v(a,a,"styles")];n([u({attribute:"mask-preset"})],a.prototype,"maskPreset",2);n([u({attribute:"mask-pattern"})],a.prototype,"maskPattern",2);n([u({attribute:"accepted-char-type"})],a.prototype,"acceptedCharType",2);n([l()],a.prototype,"_inputFocused",2);n([l()],a.prototype,"_cursorPosition",2);a=n([h("ngc-input-masked")],a);
|
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import{T as l,E as
|
|
1
|
+
import{T as l,E as $,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 b}from"../../../../assets/index-chunk3.js";import{n as u}from"../../../../assets/index-chunk.js";import{r as d}from"../../../../assets/index-chunk4.js";import{f as E,m as T,e as v,n as g}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 x,i as I,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 f=x(class extends I{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(!E(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===l||e===$)return e;const i=t.element,o=t.name;if(t.type===n.PROPERTY){if(e===i[o])return l}else if(t.type===n.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(o))return l}else if(t.type===n.ATTRIBUTE&&i.getAttribute(o)===e+"")return l;return T(t),e}});var _=Object.defineProperty,R=Object.getOwnPropertyDescriptor,s=(t,e,i,o)=>{for(var a=o>1?void 0:o?R(e,i):e,h=t.length-1,m;h>=0;h--)(m=t[h])&&(a=(o?m(e,i,a):m(a))||a);return o&&a&&_(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 ${g(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
|
+
${g(this.inputRef)}
|
|
16
16
|
type="${this.type}"
|
|
17
17
|
.id="${this.id}"
|
|
18
|
-
|
|
18
|
+
data-testid=${c(this.dataTestid)}-input
|
|
19
|
+
.placeholder="${f(this._placeholder)}"
|
|
19
20
|
.required="${this.required}"
|
|
20
21
|
.disabled="${this.disabled}"
|
|
21
22
|
class="gator-input"
|
|
22
23
|
aria-invalid="${this.isAriaInvalid}"
|
|
23
24
|
aria-required="${this.required}"
|
|
24
|
-
aria-description="${
|
|
25
|
-
.value="${
|
|
26
|
-
maxlength="${
|
|
25
|
+
aria-description="${c(this.ariaDescription)}"
|
|
26
|
+
.value="${f(this._value)}"
|
|
27
|
+
maxlength="${c(this._maxLength)}"
|
|
27
28
|
.min="${this.min}"
|
|
28
29
|
.max="${this.max}"
|
|
29
30
|
.step="${this.step}"
|
|
@@ -44,7 +45,8 @@ import{T as l,E as y,x as p}from"../../../../assets/index-chunk2.js";import"../i
|
|
|
44
45
|
|
|
45
46
|
${this.bottomText}
|
|
46
47
|
</div>
|
|
47
|
-
`}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}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`
|
|
48
|
-
<ngc-help-text icon="warning" error
|
|
48
|
+
`}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}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 icon="warning" error
|
|
50
|
+
data-testid=${this.errorMessageDataTestid}>
|
|
49
51
|
${this.displayedErrorText}
|
|
50
|
-
</ngc-help-text>`:null}};r.shadowRootOptions={...
|
|
52
|
+
</ngc-help-text>`:null}};r.shadowRootOptions={...y.shadowRootOptions,delegatesFocus:!0};s([u()],r.prototype,"for",2);s([u({type:Number})],r.prototype,"min",2);s([u({type:Number})],r.prototype,"max",2);s([u({type:Number})],r.prototype,"step",2);s([d()],r.prototype,"_nativeInputError",2);s([d()],r.prototype,"_value",2);s([d()],r.prototype,"_maxLength",2);s([d()],r.prototype,"_placeholder",2);r=s([b("ngc-input-text")],r);export{r as N};
|
|
@@ -22,7 +22,6 @@ export declare class NgcInputMasked extends NgcInputText {
|
|
|
22
22
|
_value: string;
|
|
23
23
|
private _inputFocused;
|
|
24
24
|
private _cursorPosition;
|
|
25
|
-
connectedCallback(): void;
|
|
26
25
|
updated(changedProperties: Map<string, string>): void;
|
|
27
26
|
handleInputEvent(e: Event): void;
|
|
28
27
|
handleClick(e: Event): void;
|
|
@@ -28,6 +28,7 @@ export declare class NgcInputText extends NgcInputBase {
|
|
|
28
28
|
_nativeInputError: string | undefined;
|
|
29
29
|
protected _value: string | number | undefined | null;
|
|
30
30
|
protected _maxLength: number | undefined;
|
|
31
|
+
protected _placeholder: string | undefined;
|
|
31
32
|
render(): import('lit').TemplateResult<1>;
|
|
32
33
|
get displayedErrorText(): string | undefined;
|
|
33
34
|
get isAriaInvalid(): "true" | "false";
|
package/package.json
CHANGED
package/web-types.json
CHANGED