@ncino/web-components 10.2.0 → 10.2.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{property as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as D}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{createRef as u,ref as p}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{msg as g}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as
|
|
1
|
+
import{property as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as D}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{createRef as u,ref as p}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{msg as g}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as _}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/internal/localized-decorator.js";import"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{ifDefined as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{autoUpdate as v,computePosition as y}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import I from"../../../../packages/web-components/src/components/input/gator/input-date/input-date.gator.scss.js";import{NgcInputText as T}from"../input-text/input-text.gator.js";import{NgcErrorEvent as b,NgcErrorReason as k}from"../../../../utils/error-utils.js";import"../../../icon-button/gator/icon-button.gator.js";import"../../../date-picker/base/gator/datepicker.gator.js";import{unsafeCSS as E}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var S=Object.defineProperty,x=Object.getOwnPropertyDescriptor,V=Object.getPrototypeOf,R=Reflect.get,l=(t,e,a,i)=>{for(var r=i>1?void 0:i?x(e,a):e,n=t.length-1,o;n>=0;n--)(o=t[n])&&(r=(i?o(e,a,r):o(r))||r);return i&&r&&S(e,a,r),r},$=(t,e,a)=>R(V(t),a,e),N=(t=>(t.INVALID_FORMAT="invalid-format",t.LESS_THAN_MIN_DATE="less-than-min-date",t.GREATER_THAN_MAX_DATE="greater-than-max-date",t.OUTSIDE_RANGE="outside-range",t.INVALID_START_DATE="invalid-start-date",t.INVALID_END_DATE="invalid-end-date",t))(N||{});let s=class extends T{constructor(){super(...arguments),this.locale=navigator.language,this.sundayStart=!1,this.range=!1,this.startDateLabel="Start Date",this.endDateLabel="End Date",this.maskInput=!1,this.autoAddDateSeparators=!1,this._value="",this.datepickerRef=u(),this.datepickerTriggerRef=u(),this.startInputRef=u(),this.endInputRef=u(),this.groupRef=u(),this.dateValue=null,this._dateSeparator="/",this._messageInvalidFormat="Invalid date. Please provide a valid date with format {0}.",this._messageLessThanMinDate="Date must be after {0}.",this._messageGreaterThanMaxDate="Date must be before {0}.",this._messageOutsideRange="Date must be between {0} and {1}.",this._messageInvalidStartDate="{0} must come before {1}: {2}.",this._messageInvalidEndDate="{0} must come after {1}: {2}.",this._dateTimeOptions={year:"numeric",month:"2-digit",day:"2-digit"},this._datePickerVisible=!1,this._startDate=null,this._endDate=null,this._maskPattern="",this._dateString=""}connectedCallback(){super.connectedCallback(),this.endIcon="calendar"}updated(t){if(super.updated(t),t.has("locale")){(this.locale===void 0||this.locale==="")&&(this.locale=navigator.language),this.setLocaleDateFormat();const a=this.coerceValuePropToDate(this.value)??(this.dateValue instanceof Date&&!isNaN(this.dateValue.getTime())?this.dateValue:null);this._value=a?a.toLocaleDateString(this.locale,this._dateTimeOptions):""}if(t.has("value")&&this.syncInternalStateFromDate(this.coerceValuePropToDate(this.value)),t.has("dateValue"))if(this.dateValue&&this.dateValue instanceof Date&&!isNaN(this.dateValue.getTime())){const e=this.dateValue.toLocaleDateString(this.locale,this._dateTimeOptions);this._dateString=e,this.maskInput&&this.maskDate(e)}else this.dateValue===null&&(this._dateString="",this._maskPattern="");if(t.has("startDate")&&(this.startDate&&this.startDate instanceof Date&&!isNaN(this.startDate.getTime())?(this._startDate=this.startDate,this._startDateInputValue=this.startDate.toLocaleDateString(this.locale,this._dateTimeOptions)):(this._startDate=null,this._startDateInputValue="")),t.has("endDate")&&(this.endDate&&this.endDate instanceof Date&&!isNaN(this.endDate.getTime())?(this._endDate=this.endDate,this._endDateInputValue=this.endDate.toLocaleDateString(this.locale,this._dateTimeOptions)):(this._endDate=null,this._endDateInputValue="")),t.has("maskInput")&&this.value&&this.value instanceof Date&&!isNaN(this.value.getTime())){const e=this.value.toLocaleDateString(this.locale,this._dateTimeOptions);this._dateString=e,this.maskInput?(this.maskDate(e),this._value=this._maskPattern):this._value=e}if(t.has("autoAddDateSeparators")&&this.autoAddDateSeparators){const e=this.coerceValuePropToDate(this.value);this._value=e?e.toLocaleDateString(this.locale,this._dateTimeOptions):""}}render(){return D` ${this.range?this.rangeMarkup:super.render()} ${this.datepickerMarkup} `}get endIconMarkup(){return this.calendarIconMarkup}get calendarIconMarkup(){return D`
|
|
2
2
|
<ngc-icon-button
|
|
3
3
|
slot="end-slot"
|
|
4
4
|
${p(this.datepickerTriggerRef)}
|
|
@@ -61,4 +61,4 @@ import{property as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2
|
|
|
61
61
|
</div>
|
|
62
62
|
${this.bottomText}
|
|
63
63
|
</div>
|
|
64
|
-
`}setStartDate(t,e,a){this.errorText||(a?this.startInputRef.value.errorText=a:this.startInputRef.value.errorText=""),this._startDate=t,this._startDateInputValue=e}setEndDate(t,e,a){this.errorText||(a?this.endInputRef.value.errorText=a:this.endInputRef.value.errorText=""),this._endDate=t,this._endDateInputValue=e}get datepickerStartDate(){if(this._startDate instanceof Date&&!isNaN(this._startDate.getTime()))return this._startDate}get datepickerEndDate(){if(this._endDate instanceof Date&&!isNaN(this._endDate.getTime()))return this._endDate}handleRangeInputEvent(t,e){t.preventDefault(),t.stopPropagation();const a=t.detail.value;this.validateDate(e,a),this.dispatchEvent(new CustomEvent("input",this.rangeEventData))}handleRangeChangeEvent(t,e){t.preventDefault(),t.stopPropagation();const a=t.detail.value;this.validateDate(e,a),this.dispatchEvent(new CustomEvent("change",this.rangeEventData))}get rangeEventData(){return{bubbles:!0,composed:!0,detail:{startDate:this._startDate,endDate:this._endDate,value:this.dateRangeTextValue}}}get dateRangeTextValue(){const t=this._startDate instanceof Date?this._startDate.toLocaleDateString(this.locale,this._dateTimeOptions):"",e=this._endDate instanceof Date?this._endDate.toLocaleDateString(this.locale,this._dateTimeOptions):"";return`${t} - ${e}`}handleDatepickerRangeChange(t){!t.detail.startDate&&!t.detail.endDate&&this.closeDatepicker(),t.detail.startDate!==this._startDate&&(this._startDate=t.detail.startDate,this._startDateInputValue=t.detail.startDate?new Intl.DateTimeFormat(this.locale,this._dateTimeOptions).format(t.detail.startDate):""),t.detail.endDate!==this.endDate&&(this._endDate=t.detail.endDate,this._endDateInputValue=t.detail.endDate?new Intl.DateTimeFormat(this.locale,this._dateTimeOptions).format(t.detail.endDate):""),this.errorText||(this.endInputRef.value.errorText="",this.startInputRef.value.errorText=""),this.dispatchEvent(new CustomEvent("change",this.rangeEventData))}validateDate(t,e){let a=this.getDateValueFromLocalizedDateString(e),i=null;typeof a=="number"&&isNaN(a)&&(i=this.handleError("invalid-format")),a&&typeof a=="object"&&(this.minDate&&a<this.minDate&&(i=this.handleError("less-than-min-date")),this.maxDate&&a>this.maxDate&&(i=this.handleError("greater-than-max-date")),this.minDate&&this.maxDate&&(a<this.minDate||a>this.maxDate)&&(i=this.handleError("outside-range")),this.range&&(this._startDate&&a<this._startDate&&(i=this.handleError("invalid-end-date")),this._endDate&&a>this._endDate&&(i=this.handleError("invalid-start-date")))),t(a,i)}setLocaleDateFormat(){const t=new Intl.DateTimeFormat(this.locale).formatToParts(new Date("12/31/1999")),e=t.find(o=>o.type==="literal")?.value,a={day:"dd",month:"mm",year:"yyyy"},i={day:"([1-9]|0[1-9]|[12][0-9]|3[01])",month:"([1-9]|0[1-9]|1[0-2])",year:"\\d{4}"},
|
|
64
|
+
`}setStartDate(t,e,a){this.errorText||(a?this.startInputRef.value.errorText=a:this.startInputRef.value.errorText=""),this._startDate=t,this._startDateInputValue=e}setEndDate(t,e,a){this.errorText||(a?this.endInputRef.value.errorText=a:this.endInputRef.value.errorText=""),this._endDate=t,this._endDateInputValue=e}get datepickerStartDate(){if(this._startDate instanceof Date&&!isNaN(this._startDate.getTime()))return this._startDate}get datepickerEndDate(){if(this._endDate instanceof Date&&!isNaN(this._endDate.getTime()))return this._endDate}handleRangeInputEvent(t,e){t.preventDefault(),t.stopPropagation();const a=t.detail.value;this.validateDate(e,a),this.dispatchEvent(new CustomEvent("input",this.rangeEventData))}handleRangeChangeEvent(t,e){t.preventDefault(),t.stopPropagation();const a=t.detail.value;this.validateDate(e,a),this.dispatchEvent(new CustomEvent("change",this.rangeEventData))}get rangeEventData(){return{bubbles:!0,composed:!0,detail:{startDate:this._startDate,endDate:this._endDate,value:this.dateRangeTextValue}}}get dateRangeTextValue(){const t=this._startDate instanceof Date?this._startDate.toLocaleDateString(this.locale,this._dateTimeOptions):"",e=this._endDate instanceof Date?this._endDate.toLocaleDateString(this.locale,this._dateTimeOptions):"";return`${t} - ${e}`}handleDatepickerRangeChange(t){!t.detail.startDate&&!t.detail.endDate&&this.closeDatepicker(),t.detail.startDate!==this._startDate&&(this._startDate=t.detail.startDate,this._startDateInputValue=t.detail.startDate?new Intl.DateTimeFormat(this.locale,this._dateTimeOptions).format(t.detail.startDate):""),t.detail.endDate!==this.endDate&&(this._endDate=t.detail.endDate,this._endDateInputValue=t.detail.endDate?new Intl.DateTimeFormat(this.locale,this._dateTimeOptions).format(t.detail.endDate):""),this.errorText||(this.endInputRef.value.errorText="",this.startInputRef.value.errorText=""),this.dispatchEvent(new CustomEvent("change",this.rangeEventData))}syncInternalStateFromDate(t){if(t&&!isNaN(t.getTime())){this.dateValue=t;const e=t.toLocaleDateString(this.locale,this._dateTimeOptions);this._dateString=e,this.maskInput&&this.maskDate(e),this.maskInput?this._value=this._maskPattern:this._value=e}else this._dateString="",this._maskPattern="",this.dateValue=null,this._value=""}coerceValuePropToDate(t){if(t==null)return null;if(t instanceof Date)return isNaN(t.getTime())?null:t;if(typeof t=="string"){const e=t.trim();if(e==="")return null;const a=this.tryParseIsoDateOnly(e);if(a)return a;const i=this.getDateValueFromLocalizedDateString(e);return i instanceof Date&&!isNaN(i.getTime())?i:null}if(typeof t=="number"&&Number.isFinite(t)){const e=new Date(t);return isNaN(e.getTime())?null:e}return null}tryParseIsoDateOnly(t){const e=/^(\d{4})-(\d{2})-(\d{2})(?:[Tt]|$)/.exec(t);if(!e)return null;const a=Number(e[1]),i=Number(e[2])-1,r=Number(e[3]),n=new Date(a,i,r);return n.getFullYear()!==a||n.getMonth()!==i||n.getDate()!==r?null:n}validateDate(t,e){let a=this.getDateValueFromLocalizedDateString(e),i=null;typeof a=="number"&&isNaN(a)&&(i=this.handleError("invalid-format")),a&&typeof a=="object"&&(this.minDate&&a<this.minDate&&(i=this.handleError("less-than-min-date")),this.maxDate&&a>this.maxDate&&(i=this.handleError("greater-than-max-date")),this.minDate&&this.maxDate&&(a<this.minDate||a>this.maxDate)&&(i=this.handleError("outside-range")),this.range&&(this._startDate&&a<this._startDate&&(i=this.handleError("invalid-end-date")),this._endDate&&a>this._endDate&&(i=this.handleError("invalid-start-date")))),t(a,i)}setLocaleDateFormat(){const t=new Intl.DateTimeFormat(this.locale).formatToParts(new Date("12/31/1999")),e=t.find(o=>o.type==="literal")?.value,a={day:"dd",month:"mm",year:"yyyy"},i={day:"([1-9]|0[1-9]|[12][0-9]|3[01])",month:"([1-9]|0[1-9]|1[0-2])",year:"\\d{4}"},r=new Map,n=new Map;t.forEach((o,c)=>{a[o.type]&&(r.set(c,a[o.type]),n.set(c,i[o.type]))}),this._dateSeparator=e||"/",this._localizedDateRegex=new RegExp(`^${Array.from(n.values()).join(this._dateSeparator)}$`),this.localizedExpectedDateFormat=Array.from(r.values()).join(this._dateSeparator),this._placeholder=this.localizedExpectedDateFormat}getDatePartsFromLocalizedDateString(t){const e=t.split(this._dateSeparator),a=this.localizedExpectedDateFormat?.split(this._dateSeparator)||[],i=a.findIndex(o=>o.toLowerCase().includes("y")),r=a.findIndex(o=>o.toLowerCase().includes("m")),n=a.findIndex(o=>o.toLowerCase().includes("d"));return{year:parseInt(e[i]),month:parseInt(e[r])-1,day:parseInt(e[n])}}getDateValueFromLocalizedDateString(t){if(!t||t==="")return null;if(!this._localizedDateRegex?.test(t))return NaN;const{year:a,month:i,day:r}=this.getDatePartsFromLocalizedDateString(t),n=new Date(a,i,r);return isNaN(n.getTime())?NaN:n}maskDate(t){const{year:e}=this.getDatePartsFromLocalizedDateString(t);this.localizedExpectedDateFormat&&(this._maskPattern=this.localizedExpectedDateFormat?.toLowerCase().replace("yyyy",e.toString()).replace("mm","XX").replace("dd","XX"))}autoFormatDate(t){if(!this.autoAddDateSeparators||!this.localizedExpectedDateFormat)return;const e=t.value.replace(/[^\d]/g,"").split(""),a=this.localizedExpectedDateFormat.split(this._dateSeparator).map(n=>n.length);let i=[];a.forEach(n=>{i.push(e.slice(0,n).reduce((o,c)=>o+c,"")),e.splice(0,n)}),i=i.filter(n=>n!=="");let r=i.join(this._dateSeparator);i.length<a.length&&i[i.length-1].length==a[a.length-1]&&(r+=this._dateSeparator),t.value!==r&&(t.value=r)}toggleVisibility(){this._datePickerVisible=!this._datePickerVisible,this._datePickerVisible&&(this.assignPosition(),this.datepickerRef.value?.shiftFocusToCalendarGrid())}assignPosition(){const t=this.range?this.endInputRef.value?.controlRef.value:this.controlRef.value;!this.datepickerRef||!this.datepickerRef.value||!t||(this._cleanup=v(t,this.datepickerRef.value,async()=>{if(!this.datepickerRef||!this.datepickerRef.value||!t)return;const{x:e,y:a,placement:i}=await y(t,this.datepickerRef.value,{placement:"bottom-end"});let r=i.includes("bottom")?4:-4;Object.assign(this.datepickerRef.value.style,{left:`${e}px`,top:`${a+r}px`})}))}handleError(t){switch(this.dispatchEvent(new b({errorReason:k.VALIDATION,component:{errorReason:t}})),t){case"invalid-format":return this._messageInvalidFormat.replace("{0}",this.localizedExpectedDateFormat);case"less-than-min-date":return this._messageLessThanMinDate.replace("{0}",this.minDate?.toLocaleDateString(this.locale,this._dateTimeOptions)||"");case"greater-than-max-date":return this._messageGreaterThanMaxDate.replace("{0}",this.maxDate?.toLocaleDateString(this.locale,this._dateTimeOptions)||"");case"outside-range":return this._messageOutsideRange.replace("{0}",this.minDate?.toLocaleDateString(this.locale,this._dateTimeOptions)||"").replace("{1}",this.maxDate?.toLocaleDateString(this.locale,this._dateTimeOptions)||"");case"invalid-start-date":return this._messageInvalidStartDate.replace("{0}",this.startDateLabel||"").replace("{1}",this.endDateLabel||"").replace("{2}",this._endDateInputValue||"");case"invalid-end-date":return this._messageInvalidEndDate.replace("{0}",this.endDateLabel||"").replace("{1}",this.startDateLabel||"").replace("{2}",this._startDateInputValue||"");default:return null}}};s.styles=[...$(s,s,"styles"),E(I)];l([h({type:Date})],s.prototype,"value",2);l([h({type:String,attribute:"locale"})],s.prototype,"locale",2);l([h({type:Date,attribute:"min-date"})],s.prototype,"minDate",2);l([h({type:Date,attribute:"max-date"})],s.prototype,"maxDate",2);l([h({type:Boolean,attribute:"sunday-start"})],s.prototype,"sundayStart",2);l([h({type:Boolean,attribute:"range"})],s.prototype,"range",2);l([h({type:Date,attribute:"start-date"})],s.prototype,"startDate",2);l([h({type:Date,attribute:"end-date"})],s.prototype,"endDate",2);l([h({type:String,attribute:"start-date-label"})],s.prototype,"startDateLabel",2);l([h({type:String,attribute:"end-date-label"})],s.prototype,"endDateLabel",2);l([h({type:Boolean,attribute:"mask-input"})],s.prototype,"maskInput",2);l([h({type:Boolean,attribute:"auto-add-date-separators"})],s.prototype,"autoAddDateSeparators",2);l([d()],s.prototype,"dateValue",2);l([d()],s.prototype,"_datePickerVisible",2);l([d()],s.prototype,"_startDate",2);l([d()],s.prototype,"_endDate",2);l([d()],s.prototype,"_startDateInputValue",2);l([d()],s.prototype,"_endDateInputValue",2);l([d()],s.prototype,"_maskPattern",2);l([d()],s.prototype,"_dateString",2);s=l([f("ngc-input-date"),_()],s);export{N as DateValidationError,s as NgcInputDate};
|
|
@@ -14,9 +14,9 @@ export declare enum DateValidationError {
|
|
|
14
14
|
export declare class NgcInputDate extends NgcInputText {
|
|
15
15
|
static styles: import('lit').CSSResult[];
|
|
16
16
|
/**
|
|
17
|
-
* @property {Date} value - The value of the input.
|
|
17
|
+
* @property {Date | string} value - The value of the input. Prefer a Date; localized or ISO date strings (e.g. from framework bindings) are coerced when possible.
|
|
18
18
|
*/
|
|
19
|
-
value: Date | undefined;
|
|
19
|
+
value: Date | string | undefined;
|
|
20
20
|
/**
|
|
21
21
|
* @property {string} locale - Locale to use for date formatting and internationalization of the datepicker. Defaults to the browser's locale.
|
|
22
22
|
*/
|
|
@@ -112,6 +112,13 @@ export declare class NgcInputDate extends NgcInputText {
|
|
|
112
112
|
};
|
|
113
113
|
get dateRangeTextValue(): string;
|
|
114
114
|
handleDatepickerRangeChange(e: CustomEvent): void;
|
|
115
|
+
/** Maps `dateValue` / mask / visible text from a calendar date, or clears when null. */
|
|
116
|
+
private syncInternalStateFromDate;
|
|
117
|
+
/**
|
|
118
|
+
* Coerces framework-bound `value` (e.g. Vue `detail.value` string) into a Date for display/state.
|
|
119
|
+
*/
|
|
120
|
+
private coerceValuePropToDate;
|
|
121
|
+
private tryParseIsoDateOnly;
|
|
115
122
|
private validateDate;
|
|
116
123
|
/**
|
|
117
124
|
* Sets the locale-specific date format for the input date component.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "10.2.
|
|
4
|
+
"version": "10.2.1",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.0",
|
|
102
102
|
"yaml-eslint-parser": "^2.0.0",
|
|
103
|
-
"@ncino/styles": "10.2.
|
|
103
|
+
"@ncino/styles": "10.2.1"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
106
|
"@ncino/styles": ">=8.0.0-preview.0"
|
package/web-types.json
CHANGED