@kyndryl-design-system/shidoka-applications 1.3.8 → 1.3.9
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/components/reusable/checkbox/checkboxGroup.d.ts +1 -0
- package/components/reusable/checkbox/checkboxGroup.d.ts.map +1 -1
- package/components/reusable/checkbox/checkboxGroup.js +3 -3
- package/components/reusable/checkbox/checkboxGroup.js.map +1 -1
- package/components/reusable/datePicker/datepicker.d.ts +2 -2
- package/components/reusable/datePicker/datepicker.d.ts.map +1 -1
- package/components/reusable/datePicker/datepicker.js +8 -8
- package/components/reusable/datePicker/datepicker.js.map +1 -1
- package/components/reusable/datePicker/defs.js +1 -1
- package/components/reusable/datePicker/defs.js.map +1 -1
- package/components/reusable/daterangepicker/daterangepicker.d.ts +13 -8
- package/components/reusable/daterangepicker/daterangepicker.d.ts.map +1 -1
- package/components/reusable/daterangepicker/daterangepicker.js +15 -14
- package/components/reusable/daterangepicker/daterangepicker.js.map +1 -1
- package/components/reusable/dropdown/dropdown.d.ts +2 -1
- package/components/reusable/dropdown/dropdown.d.ts.map +1 -1
- package/components/reusable/dropdown/dropdown.js +24 -24
- package/components/reusable/dropdown/dropdown.js.map +1 -1
- package/components/reusable/radioButton/radioButtonGroup.d.ts +2 -0
- package/components/reusable/radioButton/radioButtonGroup.d.ts.map +1 -1
- package/components/reusable/radioButton/radioButtonGroup.js +4 -4
- package/components/reusable/radioButton/radioButtonGroup.js.map +1 -1
- package/components/reusable/table/data-table.d.ts +1 -1
- package/components/reusable/table/data-table.js.map +1 -1
- package/components/reusable/table/data-table.stories.d.ts.map +1 -1
- package/components/reusable/textArea/textArea.d.ts +9 -2
- package/components/reusable/textArea/textArea.d.ts.map +1 -1
- package/components/reusable/textArea/textArea.js +5 -5
- package/components/reusable/textArea/textArea.js.map +1 -1
- package/components/reusable/textInput/textInput.d.ts +5 -3
- package/components/reusable/textInput/textInput.d.ts.map +1 -1
- package/components/reusable/textInput/textInput.js +12 -12
- package/components/reusable/textInput/textInput.js.map +1 -1
- package/components/reusable/timepicker/timepicker.d.ts +2 -13
- package/components/reusable/timepicker/timepicker.d.ts.map +1 -1
- package/components/reusable/timepicker/timepicker.js +11 -11
- package/components/reusable/timepicker/timepicker.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEvB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,gEAAgE;IAEhE,eAAe,UAAS;IAExB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;MAIT;IAEF,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAoEN,OAAO,CAAC,YAAY,EAAE,GAAG;
|
|
1
|
+
{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEvB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,gEAAgE;IAEhE,eAAe,UAAS;IAExB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;MAIT;IAEF,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAoEN,OAAO,CAAC,YAAY,EAAE,GAAG;IAgElC,OAAO,CAAC,SAAS;IA6BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAoCrB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAmBjB,oBAAoB;CAiB9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as a}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as o}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import n from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/warning--filled/16.js';let r=class extends i{constructor(){super(...arguments),this.name="",this.value=[],this.required=!1,this.disabled=!1,this.horizontal=!1,this.selectAll=!1,this.hideLegend=!1,this.filterable=!1,this.searchTerm="",this.limitCheckboxes=!1,this.limitRevealed=!1,this.textStrings={selectAll:"Select all",showMore:"Show more",showLess:"Show less"},this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
|
|
2
2
|
<fieldset ?disabled=${this.disabled}>
|
|
3
3
|
${this.filterable?t`
|
|
4
4
|
<kyn-text-input
|
|
@@ -46,10 +46,10 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
46
46
|
|
|
47
47
|
${this.isInvalid?t`
|
|
48
48
|
<div class="error">
|
|
49
|
-
<kd-icon .icon="${
|
|
49
|
+
<kd-icon .icon="${h}"></kd-icon>
|
|
50
50
|
${this.invalidText||this.internalValidationMsg}
|
|
51
51
|
</div>
|
|
52
52
|
`:null}
|
|
53
53
|
</fieldset>
|
|
54
|
-
`}updated(e){e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")&&this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)})),e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(){this.required
|
|
54
|
+
`}updated(e){e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")&&(this._validate(!1,!1),this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}))),e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),e.has("invalidText")&&void 0!==e.get("invalidText")&&this._validate(!1,!0),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},s=""!==this.invalidText?this.invalidText:this.required&&!this.value.length?"A selection is required.":"";this.internals.setValidity(i,s,this.checkboxes[0]),e&&(this.internalValidationMsg=this.internals.validationMessage),t&&this.internals.reportValidity()}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[];else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(!0,!1),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.checkboxes.forEach((e=>{const i=e.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let s="";for(let e=0;e<i.length;e++)s+=i[e].textContent.trim();this.limitCheckboxes&&!this.limitRevealed?s.toLowerCase().includes(this.searchTerm)&&t<4?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().includes(this.searchTerm)?e.style.display="block":e.style.display="none"}))}_toggleRevealed(e){this.limitRevealed=e,this.searchTerm="",this.checkboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed?e.style.display="block":e.style.display=t<4?"block":"none"}))}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&(this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&(this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};r.styles=n,r.formAssociated=!0,e([l({type:String})],r.prototype,"name",void 0),e([l({type:Array})],r.prototype,"value",void 0),e([l({type:Boolean})],r.prototype,"required",void 0),e([l({type:Boolean})],r.prototype,"disabled",void 0),e([l({type:Boolean})],r.prototype,"horizontal",void 0),e([l({type:Boolean})],r.prototype,"selectAll",void 0),e([l({type:Boolean})],r.prototype,"hideLegend",void 0),e([l({type:Boolean})],r.prototype,"filterable",void 0),e([a()],r.prototype,"searchTerm",void 0),e([l({type:Boolean})],r.prototype,"limitCheckboxes",void 0),e([a()],r.prototype,"limitRevealed",void 0),e([l({type:Object})],r.prototype,"textStrings",void 0),e([l({type:String})],r.prototype,"invalidText",void 0),e([o()],r.prototype,"checkboxes",void 0),e([a()],r.prototype,"internals",void 0),e([a()],r.prototype,"internalValidationMsg",void 0),e([a()],r.prototype,"isInvalid",void 0),r=e([s("kyn-checkbox-group")],r);export{r as CheckboxGroup};
|
|
55
55
|
//# sourceMappingURL=checkboxGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n static override styles = CheckboxGroupScss;\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /** Checkbox input name attribute. */\n @property({ type: String })\n name = '';\n\n /** Checkbox group selected values. */\n @property({ type: Array })\n value: Array<any> = [];\n\n /** Makes a single selection required. */\n @property({ type: Boolean })\n required = false;\n\n /** Checkbox group disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Checkbox group horizontal style. */\n @property({ type: Boolean })\n horizontal = false;\n\n /** Adds a \"Select All\" checkbox to the top of the group. */\n @property({ type: Boolean })\n selectAll = false;\n\n /** Hide the group legend/label visually. */\n @property({ type: Boolean })\n hideLegend = false;\n\n /** Adds a search input to enable filtering of checkboxes. */\n @property({ type: Boolean })\n filterable = false;\n\n /** Filter text input value.\n * @internal\n */\n @state()\n searchTerm = '';\n\n /** Limits visible checkboxes (4) behind a \"Show all\" button. */\n @property({ type: Boolean })\n limitCheckboxes = false;\n\n /** Checkbox limit visibility.\n * @internal\n */\n @state()\n limitRevealed = false;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = {\n selectAll: 'Select all',\n showMore: 'Show more',\n showLess: 'Show less',\n };\n\n /** Checkbox group invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /**\n * Queries for slotted checkboxes.\n * @ignore\n */\n @queryAssignedElements()\n checkboxes!: Array<any>;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /**\n * Internal validation message.\n * @ignore\n */\n @state()\n internalValidationMsg = '';\n\n /**\n * isInvalid when internalValidationMsg or invalidText is non-empty.\n * @ignore\n */\n @state()\n isInvalid = false;\n\n override render() {\n return html`\n <fieldset ?disabled=${this.disabled}>\n ${this.filterable\n ? html`\n <kyn-text-input\n class=\"search\"\n type=\"search\"\n size=\"sm\"\n placeholder=\"Search\"\n hideLabel\n value=${this.searchTerm}\n @on-input=${(e: Event) => this._handleFilter(e)}\n ></kyn-text-input>\n `\n : null}\n\n <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot name=\"label\"></slot>\n </legend>\n\n ${this.selectAll\n ? html`\n <kyn-checkbox\n class=\"select-all\"\n value=\"selectAll\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.invalidText !== '' ||\n this.internalValidationMsg !== ''}\n >\n ${this.textStrings.selectAll}\n </kyn-checkbox>\n `\n : null}\n\n <slot></slot>\n\n ${this.limitCheckboxes\n ? html`\n <button\n class=\"reveal-toggle\"\n @click=${() => this._toggleRevealed(!this.limitRevealed)}\n >\n ${this.limitRevealed\n ? this.textStrings.showLess\n : html`\n ${this.textStrings.showMore} (${this.checkboxes.length})\n `}\n </button>\n `\n : null}\n </div>\n\n ${this.isInvalid\n ? html`\n <div class=\"error\">\n <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\n </fieldset>\n `;\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('name')) {\n // set name for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.name = this.name;\n });\n }\n\n if (changedProps.has('value')) {\n // set checked state for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.checked = this.value.includes(checkbox.value);\n });\n\n // set form data value\n // const entries = new FormData();\n // this.value.forEach((value) => {\n // entries.append(this.name, value);\n // });\n // this.internals.setFormValue(entries);\n }\n\n if (changedProps.has('required')) {\n // set required for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.required = this.required;\n });\n }\n\n if (changedProps.has('disabled')) {\n // set disabled for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.disabled = this.disabled;\n });\n }\n\n if (\n changedProps.has('invalidText') ||\n changedProps.has('internalValidationMsg')\n ) {\n this.isInvalid =\n this.invalidText !== '' || this.internalValidationMsg !== ''\n ? true\n : false;\n // set invalid state for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.invalid = this.isInvalid;\n });\n }\n\n if (changedProps.has('limitCheckboxes')) {\n this._toggleRevealed(false);\n }\n }\n\n private _validate() {\n if (this.required) {\n if (!this.value.length) {\n this.internals.setValidity(\n { valueMissing: true },\n 'A selection is required.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n } else {\n this.internals.setValidity({});\n this.internalValidationMsg = '';\n }\n }\n }\n\n private _handleCheckboxChange(e: any) {\n const value = e.detail.value;\n\n if (value === 'selectAll') {\n if (e.detail.checked) {\n this.value = this.checkboxes\n .filter((checkbox) => !checkbox.disabled)\n .map((checkbox) => {\n return checkbox.value;\n });\n } else {\n this.value = [];\n }\n } else {\n const newValues = [...this.value];\n if (newValues.includes(value)) {\n const index = newValues.indexOf(value);\n newValues.splice(index, 1);\n } else {\n newValues.push(value);\n }\n this.value = newValues;\n }\n\n this._validate();\n\n this._emitChangeEvent();\n }\n\n private _emitChangeEvent() {\n const event = new CustomEvent('on-checkbox-group-change', {\n detail: { value: this.value },\n });\n this.dispatchEvent(event);\n }\n\n private _handleFormdata(e: any) {\n this.value.forEach((value) => {\n e.formData.append(this.name, value);\n });\n }\n\n private _handleFilter(e: any) {\n let visibleCount = 0;\n\n this.searchTerm = e.detail.value.toLowerCase();\n\n this.checkboxes.forEach((checkboxEl) => {\n // get checkbox label text\n const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n flatten: true,\n });\n let checkboxText = '';\n for (let i = 0; i < nodes.length; i++) {\n checkboxText += nodes[i].textContent.trim();\n }\n\n // hide checkbox if no match to search term\n if (this.limitCheckboxes && !this.limitRevealed) {\n if (\n checkboxText.toLowerCase().includes(this.searchTerm) &&\n visibleCount < 4\n ) {\n checkboxEl.style.display = 'block';\n visibleCount++;\n } else {\n checkboxEl.style.display = 'none';\n }\n } else {\n if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n checkboxEl.style.display = 'block';\n } else {\n checkboxEl.style.display = 'none';\n }\n }\n });\n }\n\n private _toggleRevealed(revealed: boolean) {\n const Limit = 4;\n\n this.limitRevealed = revealed;\n\n this.searchTerm = '';\n\n this.checkboxes.forEach((checkboxEl, index) => {\n if (!this.limitCheckboxes || this.limitRevealed) {\n checkboxEl.style.display = 'block';\n } else {\n if (index < Limit) {\n checkboxEl.style.display = 'block';\n } else {\n checkboxEl.style.display = 'none';\n }\n }\n });\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // capture child checkboxes change event\n this.addEventListener('on-checkbox-change', (e: any) =>\n this._handleCheckboxChange(e)\n );\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n }\n\n override disconnectedCallback() {\n this.removeEventListener('on-checkbox-change', (e: any) =>\n this._handleCheckboxChange(e)\n );\n\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-checkbox-group': CheckboxGroup;\n }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","checked","includes","invalid","_validate","setValidity","valueMissing","validationMessage","_handleCheckboxChange","detail","filter","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n static override styles = CheckboxGroupScss;\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /** Checkbox input name attribute. */\n @property({ type: String })\n name = '';\n\n /** Checkbox group selected values. */\n @property({ type: Array })\n value: Array<any> = [];\n\n /** Makes a single selection required. */\n @property({ type: Boolean })\n required = false;\n\n /** Checkbox group disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Checkbox group horizontal style. */\n @property({ type: Boolean })\n horizontal = false;\n\n /** Adds a \"Select All\" checkbox to the top of the group. */\n @property({ type: Boolean })\n selectAll = false;\n\n /** Hide the group legend/label visually. */\n @property({ type: Boolean })\n hideLegend = false;\n\n /** Adds a search input to enable filtering of checkboxes. */\n @property({ type: Boolean })\n filterable = false;\n\n /** Filter text input value.\n * @internal\n */\n @state()\n searchTerm = '';\n\n /** Limits visible checkboxes (4) behind a \"Show all\" button. */\n @property({ type: Boolean })\n limitCheckboxes = false;\n\n /** Checkbox limit visibility.\n * @internal\n */\n @state()\n limitRevealed = false;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = {\n selectAll: 'Select all',\n showMore: 'Show more',\n showLess: 'Show less',\n };\n\n /** Checkbox group invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /**\n * Queries for slotted checkboxes.\n * @ignore\n */\n @queryAssignedElements()\n checkboxes!: Array<any>;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /**\n * Internal validation message.\n * @ignore\n */\n @state()\n internalValidationMsg = '';\n\n /**\n * isInvalid when internalValidationMsg or invalidText is non-empty.\n * @ignore\n */\n @state()\n isInvalid = false;\n\n override render() {\n return html`\n <fieldset ?disabled=${this.disabled}>\n ${this.filterable\n ? html`\n <kyn-text-input\n class=\"search\"\n type=\"search\"\n size=\"sm\"\n placeholder=\"Search\"\n hideLabel\n value=${this.searchTerm}\n @on-input=${(e: Event) => this._handleFilter(e)}\n ></kyn-text-input>\n `\n : null}\n\n <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot name=\"label\"></slot>\n </legend>\n\n ${this.selectAll\n ? html`\n <kyn-checkbox\n class=\"select-all\"\n value=\"selectAll\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.invalidText !== '' ||\n this.internalValidationMsg !== ''}\n >\n ${this.textStrings.selectAll}\n </kyn-checkbox>\n `\n : null}\n\n <slot></slot>\n\n ${this.limitCheckboxes\n ? html`\n <button\n class=\"reveal-toggle\"\n @click=${() => this._toggleRevealed(!this.limitRevealed)}\n >\n ${this.limitRevealed\n ? this.textStrings.showLess\n : html`\n ${this.textStrings.showMore} (${this.checkboxes.length})\n `}\n </button>\n `\n : null}\n </div>\n\n ${this.isInvalid\n ? html`\n <div class=\"error\">\n <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\n </fieldset>\n `;\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('name')) {\n // set name for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.name = this.name;\n });\n }\n\n if (changedProps.has('value')) {\n this._validate(false, false);\n\n // set checked state for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.checked = this.value.includes(checkbox.value);\n });\n\n // set form data value\n // const entries = new FormData();\n // this.value.forEach((value) => {\n // entries.append(this.name, value);\n // });\n // this.internals.setFormValue(entries);\n }\n\n if (changedProps.has('required')) {\n // set required for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.required = this.required;\n });\n }\n\n if (changedProps.has('disabled')) {\n // set disabled for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.disabled = this.disabled;\n });\n }\n\n if (\n changedProps.has('invalidText') &&\n changedProps.get('invalidText') !== undefined\n ) {\n this._validate(false, true);\n }\n\n if (\n changedProps.has('invalidText') ||\n changedProps.has('internalValidationMsg')\n ) {\n this.isInvalid =\n this.invalidText !== '' || this.internalValidationMsg !== ''\n ? true\n : false;\n // set invalid state for each checkbox\n this.checkboxes.forEach((checkbox: any) => {\n checkbox.invalid = this.isInvalid;\n });\n }\n\n if (changedProps.has('limitCheckboxes')) {\n this._toggleRevealed(false);\n }\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n // set validity flags\n const Validity = {\n customError: this.invalidText !== '',\n valueMissing: this.required && !this.value.length,\n };\n\n // set validationMessage\n const ValidationMessage =\n this.invalidText !== ''\n ? this.invalidText\n : this.required && !this.value.length\n ? 'A selection is required.'\n : '';\n\n // set validity on custom element, anchor to first checkbox\n this.internals.setValidity(Validity, ValidationMessage, this.checkboxes[0]);\n\n // set internal validation message if value was changed by user input\n if (interacted) {\n this.internalValidationMsg = this.internals.validationMessage;\n }\n\n // focus the first checkbox to show validity\n if (report) {\n this.internals.reportValidity();\n }\n }\n\n private _handleCheckboxChange(e: any) {\n const value = e.detail.value;\n\n if (value === 'selectAll') {\n if (e.detail.checked) {\n this.value = this.checkboxes\n .filter((checkbox) => !checkbox.disabled)\n .map((checkbox) => {\n return checkbox.value;\n });\n } else {\n this.value = [];\n }\n } else {\n const newValues = [...this.value];\n if (newValues.includes(value)) {\n const index = newValues.indexOf(value);\n newValues.splice(index, 1);\n } else {\n newValues.push(value);\n }\n this.value = newValues;\n }\n\n this._validate(true, false);\n\n this._emitChangeEvent();\n }\n\n private _emitChangeEvent() {\n const event = new CustomEvent('on-checkbox-group-change', {\n detail: { value: this.value },\n });\n this.dispatchEvent(event);\n }\n\n private _handleFormdata(e: any) {\n this.value.forEach((value) => {\n e.formData.append(this.name, value);\n });\n }\n\n private _handleFilter(e: any) {\n let visibleCount = 0;\n\n this.searchTerm = e.detail.value.toLowerCase();\n\n this.checkboxes.forEach((checkboxEl) => {\n // get checkbox label text\n const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n flatten: true,\n });\n let checkboxText = '';\n for (let i = 0; i < nodes.length; i++) {\n checkboxText += nodes[i].textContent.trim();\n }\n\n // hide checkbox if no match to search term\n if (this.limitCheckboxes && !this.limitRevealed) {\n if (\n checkboxText.toLowerCase().includes(this.searchTerm) &&\n visibleCount < 4\n ) {\n checkboxEl.style.display = 'block';\n visibleCount++;\n } else {\n checkboxEl.style.display = 'none';\n }\n } else {\n if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n checkboxEl.style.display = 'block';\n } else {\n checkboxEl.style.display = 'none';\n }\n }\n });\n }\n\n private _toggleRevealed(revealed: boolean) {\n const Limit = 4;\n\n this.limitRevealed = revealed;\n\n this.searchTerm = '';\n\n this.checkboxes.forEach((checkboxEl, index) => {\n if (!this.limitCheckboxes || this.limitRevealed) {\n checkboxEl.style.display = 'block';\n } else {\n if (index < Limit) {\n checkboxEl.style.display = 'block';\n } else {\n checkboxEl.style.display = 'none';\n }\n }\n });\n }\n\n private _handleInvalid() {\n this.internalValidationMsg = this.internals.validationMessage;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // capture child checkboxes change event\n this.addEventListener('on-checkbox-change', (e: any) =>\n this._handleCheckboxChange(e)\n );\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n\n this.addEventListener('invalid', () => {\n this._handleInvalid();\n });\n }\n }\n\n override disconnectedCallback() {\n this.removeEventListener('on-checkbox-change', (e: any) =>\n this._handleCheckboxChange(e)\n );\n\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n\n this.removeEventListener('invalid', () => {\n this._handleInvalid();\n });\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-checkbox-group': CheckboxGroup;\n }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","_validate","checked","includes","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","ValidationMessage","setValidity","validationMessage","reportValidity","_handleCheckboxChange","detail","filter","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","customElement"],"mappings":"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"}
|
|
@@ -72,9 +72,9 @@ export declare class DatePicker extends LitElement {
|
|
|
72
72
|
render(): import("lit-html").TemplateResult<1>;
|
|
73
73
|
private handleInput;
|
|
74
74
|
updated(changedProps: PropertyValues): void;
|
|
75
|
-
private
|
|
76
|
-
private validateMaxDate;
|
|
75
|
+
private _validate;
|
|
77
76
|
private _handleFormdata;
|
|
77
|
+
private _handleInvalid;
|
|
78
78
|
connectedCallback(): void;
|
|
79
79
|
disconnectedCallback(): void;
|
|
80
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,
|
|
1
|
+
{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,iEAAiE;IAEjE,KAAK,SAAM;IAEX,uBAAuB;IAEvB,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;0DAEsD;IAEtD,IAAI,EAAG,MAAM,CAAC;IAEd,0CAA0C;IAE1C,cAAc,EAAE,iBAAiB,CAA4B;IAE7D;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsDf,OAAO,CAAC,WAAW;IAeV,OAAO,CAAC,YAAY,EAAE,cAAc;IA4B7C,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as
|
|
1
|
+
import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as o}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import{DATE_PICKER_TYPES as r}from"./defs.js";import p from"./datepicker.scss.js";let h=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.caption="",this.value="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.datePickerType=r.SINGLE,this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
|
|
2
2
|
<label
|
|
3
3
|
class="datepicker-label-text"
|
|
4
4
|
for=${this.name}
|
|
@@ -9,21 +9,21 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
9
9
|
</label>
|
|
10
10
|
|
|
11
11
|
<div
|
|
12
|
-
class="${
|
|
12
|
+
class="${d({"input-wrapper":!0})}"
|
|
13
13
|
>
|
|
14
14
|
<input
|
|
15
|
-
class="${
|
|
15
|
+
class="${d({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
|
|
16
16
|
datePickerType=${this.datePickerType}
|
|
17
|
-
type=${this.datePickerType===
|
|
17
|
+
type=${this.datePickerType===r.WITHITIME?"datetime-local":"date"}
|
|
18
18
|
id=${this.name?this.name:"datepicker-1"}
|
|
19
19
|
name=${this.name}
|
|
20
20
|
value=${this.value}
|
|
21
21
|
?required=${this.required}
|
|
22
22
|
?disabled=${this.disabled}
|
|
23
23
|
?invalid=${this.isInvalid}
|
|
24
|
-
min=${
|
|
25
|
-
max=${
|
|
26
|
-
step=${
|
|
24
|
+
min=${o(this.minDate)}
|
|
25
|
+
max=${o(this.maxDate)}
|
|
26
|
+
step=${o(this.step)}
|
|
27
27
|
@input=${t=>this.handleInput(t)}
|
|
28
28
|
/>
|
|
29
29
|
</div>
|
|
@@ -34,5 +34,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
34
34
|
</div>
|
|
35
35
|
`:null}
|
|
36
36
|
${""===this.warnText||this.isInvalid?null:e`<div class="warn">${this.warnText}</div>`}
|
|
37
|
-
`}handleInput(t){this.value=t.target.value;const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){
|
|
37
|
+
`}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&this._validate(!1,!1)}_validate(t,e){const i=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(i,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=p,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"value",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([a({type:String})],h.prototype,"datePickerType",void 0),t([l("input")],h.prototype,"inputEl",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),h=t([s("kyn-date-picker")],h);export{h as DatePicker};
|
|
38
38
|
//# sourceMappingURL=datepicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.js","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n DATE_PICKER_TYPES,\n regexDateFormat,\n regexDateTimeFormat,\n regexDateTimeFormatSec,\n} from './defs';\nimport DatePickerScss from './datepicker.scss';\n\n/**\n * Datepicker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no maximum date value\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-date-picker')\nexport class DatePicker extends LitElement {\n static override styles = DatePickerScss;\n\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */\n @property({ type: String })\n value = '';\n\n /** Datepicker name. */\n @property({ type: String })\n name = '';\n\n /** Makes the date required. */\n @property({ type: Boolean })\n required = false;\n\n /** Date disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Date invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /** Date warning text */\n @property({ type: String })\n warnText = '';\n\n /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.\n * If the value isn't a possible date string in the format, then the element has no maximum date value\n */\n @property({ type: String })\n maxDate = '';\n\n /** Minimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format,\n * If the value isn't a possible date string in the format, then the element has no minimum date value.\n */\n @property({ type: String })\n minDate = '';\n\n /** Specifies the granularity that the value must adhere to, or the special value any,\n * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n * The default value of step is 1, indicating 1 day.*/\n @property({ type: String })\n step = '';\n\n /** Date picker types. Default 'single' */\n @property({ type: String })\n datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n /**\n * Queries the <input> DOM element.\n * @ignore\n */\n @query('input')\n inputEl!: HTMLInputElement;\n\n /**\n * Internal validation message.\n * @ignore\n */\n @state()\n internalValidationMsg = '';\n\n /**\n * isInvalid when internalValidationMsg or invalidText is non-empty.\n * @ignore\n */\n @state()\n isInvalid = false;\n\n override render() {\n return html`\n <label\n class=\"datepicker-label-text\"\n for=${this.name}\n ?disabled=${this.disabled}\n >\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot></slot>\n </label>\n\n <div\n class=\"${classMap({\n 'input-wrapper': true,\n })}\"\n >\n <input\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n datePickerType=${this.datePickerType}\n type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n ? 'datetime-local'\n : 'date'}\n id=${this.name ? this.name : 'datepicker-1'}\n name=${this.name}\n value=${this.value}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n min=${ifDefined(this.minDate)}\n max=${ifDefined(this.maxDate)}\n step=${ifDefined(this.step)}\n @input=${(e: any) => this.handleInput(e)}\n />\n </div>\n ${this.caption !== ''\n ? html` <div class=\"caption\">${this.caption}</div> `\n : null}\n ${this.isInvalid\n ? html`\n <div class=\"error\">\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\n ${this.warnText !== '' && !this.isInvalid\n ? html`<div class=\"warn\">${this.warnText}</div>`\n : null}\n `;\n }\n\n // calls when start date or value change\n private handleInput(e: any) {\n this.value = e.target.value;\n // emit selected value\n const event = new CustomEvent('on-input', {\n detail: {\n value: e.target.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: PropertyValues) {\n if (\n changedProps.has('invalidText') ||\n changedProps.has('internalValidationMsg')\n ) {\n //check if any (internal / external )error msg. present then isInvalid is true\n this.isInvalid =\n this.invalidText !== '' || this.internalValidationMsg !== ''\n ? true\n : false;\n }\n\n if (changedProps.get('value') !== undefined && changedProps.has('value')) {\n this.inputEl.value = this.value;\n // set form data value\n // this.internals.setFormValue(this.value);\n this.internals.setValidity({});\n this.internalValidationMsg = '';\n\n // set validity\n if (this.required && (!this.value || this.value === '')) {\n this.internals.setValidity(\n { valueMissing: true },\n 'This field is required.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n return;\n }\n // validate min\n if (this.value !== '' && this.minDate !== '') {\n this.validateMinDate();\n }\n // validate max\n if (this.value !== '' && this.maxDate !== '') {\n this.validateMaxDate();\n }\n }\n }\n\n private validateMinDate(): void {\n if (\n regexDateFormat.test(this.minDate) ||\n regexDateTimeFormat.test(this.minDate) ||\n regexDateTimeFormatSec.test(this.minDate)\n ) {\n if (this.value < this.minDate) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n 'Please enter date as min date or later.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n } else {\n this.internals.setValidity(\n { patternMismatch: true },\n 'Please enter valid min date.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n }\n\n private validateMaxDate(): void {\n if (\n regexDateFormat.test(this.maxDate) ||\n regexDateTimeFormat.test(this.maxDate) ||\n regexDateTimeFormatSec.test(this.maxDate)\n ) {\n if (this.value > this.maxDate) {\n this.internals.setValidity(\n { rangeOverflow: true },\n 'Please enter date as max date or earlier.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n } else {\n this.internals.setValidity(\n { patternMismatch: true },\n 'Please enter valid max date.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n }\n\n private _handleFormdata(e: any) {\n e.formData.append(this.name, this.value);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n }\n\n override disconnectedCallback(): void {\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n\n super.disconnectedCallback();\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-date-picker': DatePicker;\n }\n}\n"],"names":["DatePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","maxDate","minDate","step","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","e","handleInput","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","regexDateFormat","test","regexDateTimeFormat","regexDateTimeFormatSec","rangeUnderflow","patternMismatch","rangeOverflow","_handleFormdata","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DatePickerScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"datepicker.js","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { DATE_PICKER_TYPES } from './defs';\nimport DatePickerScss from './datepicker.scss';\n\n/**\n * Datepicker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no maximum date value\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-date-picker')\nexport class DatePicker extends LitElement {\n static override styles = DatePickerScss;\n\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */\n @property({ type: String })\n value = '';\n\n /** Datepicker name. */\n @property({ type: String })\n name = '';\n\n /** Makes the date required. */\n @property({ type: Boolean })\n required = false;\n\n /** Date disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Date invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /** Date warning text */\n @property({ type: String })\n warnText = '';\n\n /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.\n * If the value isn't a possible date string in the format, then the element has no maximum date value\n */\n @property({ type: String })\n maxDate!: string;\n\n /** Minimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format,\n * If the value isn't a possible date string in the format, then the element has no minimum date value.\n */\n @property({ type: String })\n minDate!: string;\n\n /** Specifies the granularity that the value must adhere to, or the special value any,\n * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n * The default value of step is 1, indicating 1 day.*/\n @property({ type: String })\n step!: string;\n\n /** Date picker types. Default 'single' */\n @property({ type: String })\n datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n /**\n * Queries the <input> DOM element.\n * @ignore\n */\n @query('input')\n inputEl!: HTMLInputElement;\n\n /**\n * Internal validation message.\n * @ignore\n */\n @state()\n internalValidationMsg = '';\n\n /**\n * isInvalid when internalValidationMsg or invalidText is non-empty.\n * @ignore\n */\n @state()\n isInvalid = false;\n\n override render() {\n return html`\n <label\n class=\"datepicker-label-text\"\n for=${this.name}\n ?disabled=${this.disabled}\n >\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot></slot>\n </label>\n\n <div\n class=\"${classMap({\n 'input-wrapper': true,\n })}\"\n >\n <input\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n datePickerType=${this.datePickerType}\n type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n ? 'datetime-local'\n : 'date'}\n id=${this.name ? this.name : 'datepicker-1'}\n name=${this.name}\n value=${this.value}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n min=${ifDefined(this.minDate)}\n max=${ifDefined(this.maxDate)}\n step=${ifDefined(this.step)}\n @input=${(e: any) => this.handleInput(e)}\n />\n </div>\n ${this.caption !== ''\n ? html` <div class=\"caption\">${this.caption}</div> `\n : null}\n ${this.isInvalid\n ? html`\n <div class=\"error\">\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\n ${this.warnText !== '' && !this.isInvalid\n ? html`<div class=\"warn\">${this.warnText}</div>`\n : null}\n `;\n }\n\n // calls when start date or value change\n private handleInput(e: any) {\n this.value = e.target.value;\n\n this._validate(true, false);\n\n // emit selected value\n const event = new CustomEvent('on-input', {\n detail: {\n value: e.target.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: PropertyValues) {\n if (\n changedProps.has('invalidText') ||\n changedProps.has('internalValidationMsg')\n ) {\n //check if any (internal / external )error msg. present then isInvalid is true\n this.isInvalid =\n this.invalidText !== '' || this.internalValidationMsg !== ''\n ? true\n : false;\n }\n\n if (\n changedProps.has('invalidText') &&\n changedProps.get('invalidText') !== undefined\n ) {\n this._validate(false, true);\n }\n\n if (changedProps.has('value')) {\n // this.inputEl.value = this.value;\n // set form data value\n // this.internals.setFormValue(this.value);\n\n this._validate(false, false);\n }\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n // get validity state from inputEl, combine customError flag if invalidText is provided\n const Validity =\n this.invalidText !== ''\n ? { ...this.inputEl.validity, customError: true }\n : this.inputEl.validity;\n // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n const ValidationMessage =\n this.invalidText !== ''\n ? this.invalidText\n : this.inputEl.validationMessage;\n\n // set validity on custom element, anchor to inputEl\n this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n // set internal validation message if value was changed by user input\n if (interacted) {\n this.internalValidationMsg = this.internals.validationMessage;\n }\n\n // focus the form field to show validity\n if (report) {\n this.internals.reportValidity();\n }\n }\n\n private _handleFormdata(e: any) {\n e.formData.append(this.name, this.value);\n }\n\n private _handleInvalid() {\n this.internalValidationMsg = this.internals.validationMessage;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n\n this.addEventListener('invalid', () => {\n this._handleInvalid();\n });\n }\n }\n\n override disconnectedCallback(): void {\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n\n this.removeEventListener('invalid', () => {\n this._handleInvalid();\n });\n }\n\n super.disconnectedCallback();\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-date-picker': DatePicker;\n }\n}\n"],"names":["DatePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","minDate","maxDate","step","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","inputEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DatePickerScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"09BAgBO,IAAMA,EAAN,cAAyBC,EAAzBC,kCAmBLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,KAIPH,KAAOI,QAAG,GAIVJ,KAAKK,MAAG,GAIRL,KAAIM,KAAG,GAIPN,KAAQO,UAAG,EAIXP,KAAQQ,UAAG,EAIXR,KAAWS,YAAG,GAIdT,KAAQU,SAAG,GAsBXV,KAAAW,eAAoCC,EAAkBC,OActDb,KAAqBc,sBAAG,GAOxBd,KAASe,WAAG,CAgKb,CA9JUC,SACP,OAAOC,CAAI;;;cAGDjB,KAAKM;oBACCN,KAAKQ;;UAEfR,KAAKO,SAAWU,CAAI,kCAAoC;;;;;iBAKjDC,EAAS,CAChB,iBAAiB;;;mBAIRA,EAAS,CAChB,WAA0B,OAAdlB,KAAKG,KACjB,WAA0B,OAAdH,KAAKG;2BAEFH,KAAKW;iBACfX,KAAKW,iBAAmBC,EAAkBO,UAC7C,iBACA;eACCnB,KAAKM,KAAON,KAAKM,KAAO;iBACtBN,KAAKM;kBACJN,KAAKK;sBACDL,KAAKO;sBACLP,KAAKQ;qBACNR,KAAKe;gBACVK,EAAUpB,KAAKqB;gBACfD,EAAUpB,KAAKsB;iBACdF,EAAUpB,KAAKuB;mBACZC,GAAWxB,KAAKyB,YAAYD;;;QAGvB,KAAjBxB,KAAKI,QACHa,CAAI,yBAAyBjB,KAAKI,iBAClC;QACFJ,KAAKe,UACHE,CAAI;;gBAEEjB,KAAKS,aAAeT,KAAKc;;YAG/B;QACgB,KAAlBd,KAAKU,UAAoBV,KAAKe,UAE5B,KADAE,CAAI,qBAAqBjB,KAAKU;KAGrC,CAGOe,YAAYD,GAClBxB,KAAKK,MAAQmB,EAAEE,OAAOrB,MAEtBL,KAAK2B,WAAU,GAAM,GAGrB,MAAMC,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNzB,MAAOmB,EAAEE,OAAOrB,MAChB0B,UAAWP,KAGfxB,KAAKgC,cAAcJ,EACpB,CAEQK,QAAQC,IAEbA,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAGjBnC,KAAKe,UACkB,KAArBf,KAAKS,aAAqD,KAA/BT,KAAKc,uBAMlCoB,EAAaC,IAAI,qBACmBC,IAApCF,EAAaG,IAAI,gBAEjBrC,KAAK2B,WAAU,GAAO,GAGpBO,EAAaC,IAAI,UAKnBnC,KAAK2B,WAAU,GAAO,EAEzB,CAEOA,UAAUW,EAAqBC,GAErC,MAAMC,EACiB,KAArBxC,KAAKS,YACD,IAAKT,KAAKyC,QAAQC,SAAUC,aAAa,GACzC3C,KAAKyC,QAAQC,SAEbE,EACiB,KAArB5C,KAAKS,YACDT,KAAKS,YACLT,KAAKyC,QAAQI,kBAGnB7C,KAAKC,UAAU6C,YAAYN,EAAUI,EAAmB5C,KAAKyC,SAGzDH,IACFtC,KAAKc,sBAAwBd,KAAKC,UAAU4C,mBAI1CN,GACFvC,KAAKC,UAAU8C,gBAElB,CAEOC,gBAAgBxB,GACtBA,EAAEyB,SAASC,OAAOlD,KAAKM,KAAMN,KAAKK,MACnC,CAEO8C,iBACNnD,KAAKc,sBAAwBd,KAAKC,UAAU4C,iBAC7C,CAEQO,oBACPC,MAAMD,oBAEFpD,KAAKC,UAAUqD,OACjBtD,KAAKC,UAAUqD,KAAKC,iBAAiB,YAAa/B,GAChDxB,KAAKgD,gBAAgBxB,KAGvBxB,KAAKuD,iBAAiB,WAAW,KAC/BvD,KAAKmD,gBAAgB,IAG1B,CAEQK,uBACHxD,KAAKC,UAAUqD,OACjBtD,KAAKC,UAAUqD,KAAKG,oBAAoB,YAAajC,GACnDxB,KAAKgD,gBAAgBxB,KAGvBxB,KAAKyD,oBAAoB,WAAW,KAClCzD,KAAKmD,gBAAgB,KAIzBE,MAAMG,sBACP,GA5Pe3D,EAAM6D,OAAGC,EAET9D,EAAA+D,kBAAoB,IAC/B9D,EAAW8D,kBACdC,gBAAgB,GAOXhE,EAAciE,gBAAG,EAOxBC,EAAA,CADCC,KACkCnE,EAAAoE,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACNvE,EAAAoE,UAAA,YAAA,GAIZF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACLvE,EAAAoE,UAAA,eAAA,GAIbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACPvE,EAAAoE,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACRvE,EAAAoE,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACDxE,EAAAoE,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACDxE,EAAAoE,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACDvE,EAAAoE,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACJvE,EAAAoE,UAAA,gBAAA,GAMdF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACDvE,EAAAoE,UAAA,eAAA,GAMjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACDvE,EAAAoE,UAAA,eAAA,GAMjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACJvE,EAAAoE,UAAA,YAAA,GAIdF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UAC2CvE,EAAAoE,UAAA,sBAAA,GAO7DF,EAAA,CADCO,EAAM,UACoBzE,EAAAoE,UAAA,eAAA,GAO3BF,EAAA,CADCC,KAC0BnE,EAAAoE,UAAA,6BAAA,GAO3BF,EAAA,CADCC,KACiBnE,EAAAoE,UAAA,iBAAA,GA9FPpE,EAAUkE,EAAA,CADtBQ,EAAc,oBACF1E"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var e;!function(e){e.SINGLE="single",e.WITHITIME="date-time"}(e||(e={}));export{e as DATE_PICKER_TYPES};
|
|
2
2
|
//# sourceMappingURL=defs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/datePicker/defs.ts"],"sourcesContent":["\nexport enum DATE_PICKER_TYPES {\n SINGLE = 'single',\n WITHITIME = 'date-time',\n}\nexport const regexDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\nexport const regexDateTimeFormat = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}$/;\nexport const regexDateTimeFormatSec = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$/;"],"names":["DATE_PICKER_TYPES"
|
|
1
|
+
{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/datePicker/defs.ts"],"sourcesContent":["\nexport enum DATE_PICKER_TYPES {\n SINGLE = 'single',\n WITHITIME = 'date-time',\n}\nexport const regexDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\nexport const regexDateTimeFormat = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}$/;\nexport const regexDateTimeFormatSec = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$/;"],"names":["DATE_PICKER_TYPES"],"mappings":"IACYA,GAAZ,SAAYA,GACRA,EAAA,OAAA,SACAA,EAAA,UAAA,WACH,CAHD,CAAYA,IAAAA,EAGX,CAAA"}
|
|
@@ -18,10 +18,6 @@ export declare class DateRangePicker extends LitElement {
|
|
|
18
18
|
mode: ShadowRootMode;
|
|
19
19
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
20
20
|
};
|
|
21
|
-
/** Regex format for minDate / maxDate
|
|
22
|
-
* @ignore
|
|
23
|
-
*/
|
|
24
|
-
regexDateFormat: RegExp;
|
|
25
21
|
/**
|
|
26
22
|
* Attached internals for form association.
|
|
27
23
|
* @ignore
|
|
@@ -67,15 +63,24 @@ export declare class DateRangePicker extends LitElement {
|
|
|
67
63
|
* @ignore
|
|
68
64
|
*/
|
|
69
65
|
isInvalid: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Queries the Start Date <input> DOM element.
|
|
68
|
+
* @ignore
|
|
69
|
+
*/
|
|
70
|
+
inputElStart: HTMLInputElement;
|
|
71
|
+
/**
|
|
72
|
+
* Queries the End Date <input> DOM element.
|
|
73
|
+
* @ignore
|
|
74
|
+
*/
|
|
75
|
+
inputElEnd: HTMLInputElement;
|
|
70
76
|
render(): import("lit-html").TemplateResult<1>;
|
|
71
77
|
updated(changedProps: PropertyValues): void;
|
|
72
78
|
private handleStartDate;
|
|
73
79
|
private handleEndDate;
|
|
74
|
-
private
|
|
75
|
-
private
|
|
76
|
-
private validateMaxDate;
|
|
77
|
-
private validateStartEndDate;
|
|
80
|
+
private _validate;
|
|
81
|
+
private _emitValue;
|
|
78
82
|
private _handleFormdata;
|
|
83
|
+
private _handleInvalid;
|
|
79
84
|
connectedCallback(): void;
|
|
80
85
|
disconnectedCallback(): void;
|
|
81
86
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"daterangepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAOvD;;;;;;GAMG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAuB;IAC7C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB;;;;MAG/B;IAEF
|
|
1
|
+
{"version":3,"file":"daterangepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAOvD;;;;;;GAMG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAuB;IAC7C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,kDAAkD;IAElD,SAAS,SAAM;IAEf,gDAAgD;IAEhD,OAAO,SAAM;IAEb,iFAAiF;IAEjF,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;0DAEsD;IAEtD,IAAI,EAAG,MAAM,CAAC;IAEd;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,YAAY,EAAG,gBAAgB,CAAC;IAEhC;;;OAGG;IAEH,UAAU,EAAG,gBAAgB,CAAC;IAErB,MAAM;IAwEN,OAAO,CAAC,YAAY,EAAE,cAAc;IAwB7C,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,SAAS;IAuDjB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,eAAe,CAAC;KAC1C;CACF"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as
|
|
1
|
+
import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as i}from'./../../../external/lit-html/lit-html.js';import{LitElement as e}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as d}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as l}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import o from"./daterangepicker.scss.js";let h=class extends e{constructor(){super(...arguments),this.internals=this.attachInternals(),this.caption="",this.size="md",this.startDate="",this.endDate="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.internalValidationMsg="",this.isInvalid=!1}render(){var t,e,s,a;return i`
|
|
2
2
|
<label
|
|
3
3
|
class="datepicker-label-text"
|
|
4
4
|
for=${this.name}
|
|
5
5
|
?disabled=${this.disabled}
|
|
6
6
|
>
|
|
7
|
-
${this.required?
|
|
7
|
+
${this.required?i`<span class="required">*</span>`:null}
|
|
8
8
|
<slot></slot>
|
|
9
9
|
</label>
|
|
10
10
|
|
|
11
11
|
<div class="wrapper">
|
|
12
12
|
<div class="input-wrapper">
|
|
13
13
|
<input
|
|
14
|
-
class="${r({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
|
|
14
|
+
class="${r({"date-start":!0,"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
|
|
15
15
|
type="date"
|
|
16
16
|
id="${this.name}-start"
|
|
17
17
|
name="${this.name}-start"
|
|
@@ -19,9 +19,9 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
19
19
|
?required=${this.required}
|
|
20
20
|
?disabled=${this.disabled}
|
|
21
21
|
?invalid=${this.isInvalid}
|
|
22
|
-
min=${
|
|
23
|
-
max=${
|
|
24
|
-
step=${
|
|
22
|
+
min=${l(this.minDate)}
|
|
23
|
+
max=${l(null!==(e=null!==(t=this.endDate)&&void 0!==t?t:this.maxDate)&&void 0!==e?e:"")}
|
|
24
|
+
step=${l(this.step)}
|
|
25
25
|
@input=${t=>this.handleStartDate(t)}
|
|
26
26
|
/>
|
|
27
27
|
</div>
|
|
@@ -29,27 +29,28 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
29
29
|
<span class="range-span">—</span>
|
|
30
30
|
<div class="input-wrapper">
|
|
31
31
|
<input
|
|
32
|
-
class="${r({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
|
|
32
|
+
class="${r({"date-end":!0,"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
|
|
33
33
|
type="date"
|
|
34
34
|
id="${this.name}-end"
|
|
35
35
|
name="${this.name}-end"
|
|
36
36
|
value=${this.endDate}
|
|
37
|
+
?required=${this.required}
|
|
37
38
|
?disabled=${this.disabled}
|
|
38
39
|
?invalid=${this.isInvalid}
|
|
39
|
-
min=${
|
|
40
|
-
max=${
|
|
41
|
-
step=${
|
|
40
|
+
min=${l(null!==(a=null!==(s=this.startDate)&&void 0!==s?s:this.minDate)&&void 0!==a?a:"")}
|
|
41
|
+
max=${l(this.maxDate)}
|
|
42
|
+
step=${l(this.step)}
|
|
42
43
|
@input=${t=>this.handleEndDate(t)}
|
|
43
44
|
/>
|
|
44
45
|
</div>
|
|
45
46
|
</div>
|
|
46
47
|
|
|
47
|
-
${""!==this.caption?
|
|
48
|
-
${this.isInvalid?
|
|
48
|
+
${""!==this.caption?i` <div class="caption">${this.caption}</div> `:null}
|
|
49
|
+
${this.isInvalid?i`
|
|
49
50
|
<div class="error">
|
|
50
51
|
${this.invalidText||this.internalValidationMsg}
|
|
51
52
|
</div>
|
|
52
53
|
`:null}
|
|
53
|
-
${""===this.warnText||this.isInvalid?null:
|
|
54
|
-
`}updated(t){
|
|
54
|
+
${""===this.warnText||this.isInvalid?null:i`<div class="warn">${this.warnText}</div>`}
|
|
55
|
+
`}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),(t.has("startDate")||t.has("endDate"))&&this._validate(!1,!1)}handleStartDate(t){this.startDate=t.target.value,this._validate(!0,!1),this._emitValue(t)}handleEndDate(t){this.endDate=t.target.value,this._validate(!0,!1),this._emitValue(t)}_validate(t,i){const e=this.inputElStart.checkValidity(),s=this.inputElEnd.checkValidity();if(e&&s)this.internals.setValidity({});else if(e){if(!s){const t=""!==this.invalidText?{...this.inputElEnd.validity,customError:!0}:this.inputElEnd.validity,i=""!==this.invalidText?this.invalidText:this.inputElEnd.validationMessage;this.internals.setValidity(t,i,this.inputElEnd)}}else{const t=""!==this.invalidText?{...this.inputElStart.validity,customError:!0}:this.inputElStart.validity,i=""!==this.invalidText?this.invalidText:this.inputElStart.validationMessage;this.internals.setValidity(t,i,this.inputElStart)}t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}_emitValue(t){const i=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate,origEvent:t}});this.dispatchEvent(i)}_handleFormdata(t){const i=""!==this.startDate&&""!==this.endDate?`${this.startDate}:${this.endDate}`:"";t.formData.append(this.name,i)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=o,h.formAssociated=!0,h.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"startDate",void 0),t([a({type:String})],h.prototype,"endDate",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([d("input.date-start")],h.prototype,"inputElStart",void 0),t([d("input.date-end")],h.prototype,"inputElEnd",void 0),h=t([s("kyn-date-range-picker")],h);export{h as DateRangePicker};
|
|
55
56
|
//# sourceMappingURL=daterangepicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport DateRangePickerScss from './daterangepicker.scss';\n\n/**\n * Date-Range picker\n * @fires on-input - Captures the input event and emits the selected values and original event details. (Only if startDate <= endDate)\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no maximum date value.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends LitElement {\n static override styles = DateRangePickerScss;\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Regex format for minDate / maxDate\n * @ignore\n */\n @state()\n regexDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Datepicker Start date in YYYY-MM-DD format. */\n @property({ type: String })\n startDate = '';\n\n /** Datepicker End date in YYYY-MM-DD format. */\n @property({ type: String })\n endDate = '';\n\n /** Datepicker name. Required prop. as there could many fields into single form*/\n @property({ type: String })\n name = '';\n\n /** Makes the date required. */\n @property({ type: Boolean })\n required = false;\n\n /** Date disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Date invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /** Date warning text */\n @property({ type: String })\n warnText = '';\n\n /** Maximum date in YYYY-MM-DD format.\n * If the value isn't a possible date string in the format, then the element has no maximum date value\n */\n @property({ type: String })\n maxDate = '';\n\n /** Minimum date in YYYY-MM-DD format,\n * If the value isn't a possible date string in the format, then the element has no minimum date value.\n */\n @property({ type: String })\n minDate = '';\n\n /** Specifies the granularity that the value must adhere to, or the special value any,\n * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n * The default value of step is 1, indicating 1 day.*/\n @property({ type: String })\n step = '';\n\n /**\n * Internal validation message.\n * @ignore\n */\n @state()\n internalValidationMsg = '';\n\n /**\n * isInvalid when internalValidationMsg or invalidText is non-empty.\n * @ignore\n */\n @state()\n isInvalid = false;\n\n override render() {\n return html`\n <label\n class=\"datepicker-label-text\"\n for=${this.name}\n ?disabled=${this.disabled}\n >\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot></slot>\n </label>\n\n <div class=\"wrapper\">\n <div class=\"input-wrapper\">\n <input\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n type=\"date\"\n id=\"${this.name}-start\"\n name=\"${this.name}-start\"\n value=${this.startDate}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n min=${ifDefined(this.minDate)}\n max=${ifDefined(this.endDate ?? this.maxDate ?? '')}\n step=${ifDefined(this.step)}\n @input=${(e: any) => this.handleStartDate(e)}\n />\n </div>\n\n <span class=\"range-span\">—</span>\n <div class=\"input-wrapper\">\n <input\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n type=\"date\"\n id=\"${this.name}-end\"\n name=\"${this.name}-end\"\n value=${this.endDate}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n min=${ifDefined(this.startDate ?? this.minDate ?? '')}\n max=${ifDefined(this.maxDate)}\n step=${ifDefined(this.step)}\n @input=${(e: any) => this.handleEndDate(e)}\n />\n </div>\n </div>\n\n ${this.caption !== ''\n ? html` <div class=\"caption\">${this.caption}</div> `\n : null}\n ${this.isInvalid\n ? html`\n <div class=\"error\">\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\n ${this.warnText !== '' && !this.isInvalid\n ? html`<div class=\"warn\">${this.warnText}</div>`\n : null}\n `;\n }\n\n override updated(changedProps: PropertyValues) {\n if (\n changedProps.has('invalidText') ||\n changedProps.has('internalValidationMsg')\n ) {\n this.isInvalid =\n this.invalidText !== '' || this.internalValidationMsg !== ''\n ? true\n : false;\n }\n\n if (\n changedProps.get('startDate') !== undefined &&\n changedProps.has('startDate')\n ) {\n this.internals.setValidity({});\n this.internalValidationMsg = '';\n // set validity\n if (this.required && (!this.startDate || this.startDate === '')) {\n this.internals.setValidity(\n { valueMissing: true },\n 'Both dates are required.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n return;\n }\n // validate min\n if (this.startDate !== '' && this.minDate !== '') {\n this.validateMinDate(this.startDate);\n }\n //validate max\n if (this.startDate !== '' && this.maxDate !== '') {\n this.validateMaxDate(this.startDate);\n }\n // validate start & end date\n if (this.startDate !== '' && this.endDate !== '') {\n this.validateStartEndDate();\n }\n }\n\n if (\n changedProps.get('endDate') !== undefined &&\n changedProps.has('endDate')\n ) {\n this.internals.setValidity({});\n this.internalValidationMsg = '';\n // set validity\n if (this.required && (!this.endDate || this.endDate === '')) {\n this.internals.setValidity(\n { valueMissing: true },\n 'Both dates are required.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n return;\n }\n // validate min\n if (this.endDate !== '' && this.minDate !== '') {\n this.validateMinDate(this.endDate);\n }\n //validate max\n if (this.endDate !== '' && this.maxDate !== '') {\n this.validateMaxDate(this.endDate);\n }\n // validate start & end date\n if (this.startDate !== '' && this.endDate !== '') {\n this.validateStartEndDate();\n }\n }\n }\n // on-change start date\n private handleStartDate(e: any) {\n this.startDate = e.target.value;\n if (this.startDate !== '') {\n this.validateAndDispatchEvent();\n }\n }\n // on-change end date\n private handleEndDate(e: any) {\n this.endDate = e.target.value;\n if (this.endDate !== '') {\n this.validateAndDispatchEvent();\n }\n }\n // Note: dispatch (on-input) event only if both dates are valid (i.e. startDate <= endDate)\n private validateAndDispatchEvent() {\n if (this.startDate <= this.endDate) {\n // emit selected start & end date value\n const event = new CustomEvent('on-input', {\n detail: {\n startDate: this.startDate,\n endDate: this.endDate,\n },\n });\n this.dispatchEvent(event);\n }\n }\n // validate minDate with start & end date\n private validateMinDate(date: String): void {\n if (this.regexDateFormat.test(this.minDate)) {\n if (date < this.minDate) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n 'Please enter date as min date or later.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n } else {\n this.internals.setValidity(\n { patternMismatch: true },\n 'Please enter valid min date.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n }\n // validate maxDate with start & end date\n private validateMaxDate(date: String): void {\n if (this.regexDateFormat.test(this.maxDate)) {\n if (date > this.maxDate) {\n this.internals.setValidity(\n { rangeOverflow: true },\n 'Please enter date as max date or earlier.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n } else {\n this.internals.setValidity(\n { patternMismatch: true },\n 'Please enter valid max date.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n }\n\n private validateStartEndDate(): void {\n // Save combine values to form data\n // const combineVals = `${this.startDate}:${this.endDate}`;\n // this.internals.setFormValue(combineVals);\n\n if (this.startDate > this.endDate) {\n this.internals.setValidity(\n { patternMismatch: true },\n 'State date must be before end date.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n }\n }\n\n private _handleFormdata(e: any) {\n const combineVals =\n this.startDate !== '' && this.endDate !== ''\n ? `${this.startDate}:${this.endDate}`\n : '';\n e.formData.append(this.name, combineVals);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n }\n\n override disconnectedCallback(): void {\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-date-range-picker': DateRangePicker;\n }\n}\n"],"names":["DateRangePicker","LitElement","constructor","this","regexDateFormat","internals","attachInternals","caption","size","startDate","endDate","name","required","disabled","invalidText","warnText","maxDate","minDate","step","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","_b","_a","e","handleStartDate","_d","_c","handleEndDate","updated","changedProps","has","undefined","get","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","validateStartEndDate","target","value","validateAndDispatchEvent","event","CustomEvent","detail","dispatchEvent","date","test","rangeUnderflow","patternMismatch","rangeOverflow","_handleFormdata","combineVals","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DateRangePickerScss","formAssociated","shadowRootOptions","delegatesFocus","__decorate","state","prototype","property","type","String","Boolean","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport DateRangePickerScss from './daterangepicker.scss';\n\n/**\n * Date-Range picker\n * @fires on-input - Captures the input event and emits the selected values and original event details. (Only if startDate <= endDate)\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no maximum date value.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends LitElement {\n static override styles = DateRangePickerScss;\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Datepicker Start date in YYYY-MM-DD format. */\n @property({ type: String })\n startDate = '';\n\n /** Datepicker End date in YYYY-MM-DD format. */\n @property({ type: String })\n endDate = '';\n\n /** Datepicker name. Required prop. as there could many fields into single form*/\n @property({ type: String })\n name = '';\n\n /** Makes the date required. */\n @property({ type: Boolean })\n required = false;\n\n /** Date disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Date invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /** Date warning text */\n @property({ type: String })\n warnText = '';\n\n /** Maximum date in YYYY-MM-DD format.\n * If the value isn't a possible date string in the format, then the element has no maximum date value\n */\n @property({ type: String })\n maxDate!: string;\n\n /** Minimum date in YYYY-MM-DD format,\n * If the value isn't a possible date string in the format, then the element has no minimum date value.\n */\n @property({ type: String })\n minDate!: string;\n\n /** Specifies the granularity that the value must adhere to, or the special value any,\n * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n * The default value of step is 1, indicating 1 day.*/\n @property({ type: String })\n step!: string;\n\n /**\n * Internal validation message.\n * @ignore\n */\n @state()\n internalValidationMsg = '';\n\n /**\n * isInvalid when internalValidationMsg or invalidText is non-empty.\n * @ignore\n */\n @state()\n isInvalid = false;\n\n /**\n * Queries the Start Date <input> DOM element.\n * @ignore\n */\n @query('input.date-start')\n inputElStart!: HTMLInputElement;\n\n /**\n * Queries the End Date <input> DOM element.\n * @ignore\n */\n @query('input.date-end')\n inputElEnd!: HTMLInputElement;\n\n override render() {\n return html`\n <label\n class=\"datepicker-label-text\"\n for=${this.name}\n ?disabled=${this.disabled}\n >\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot></slot>\n </label>\n\n <div class=\"wrapper\">\n <div class=\"input-wrapper\">\n <input\n class=\"${classMap({\n 'date-start': true,\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n type=\"date\"\n id=\"${this.name}-start\"\n name=\"${this.name}-start\"\n value=${this.startDate}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n min=${ifDefined(this.minDate)}\n max=${ifDefined(this.endDate ?? this.maxDate ?? '')}\n step=${ifDefined(this.step)}\n @input=${(e: any) => this.handleStartDate(e)}\n />\n </div>\n\n <span class=\"range-span\">—</span>\n <div class=\"input-wrapper\">\n <input\n class=\"${classMap({\n 'date-end': true,\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n type=\"date\"\n id=\"${this.name}-end\"\n name=\"${this.name}-end\"\n value=${this.endDate}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n min=${ifDefined(this.startDate ?? this.minDate ?? '')}\n max=${ifDefined(this.maxDate)}\n step=${ifDefined(this.step)}\n @input=${(e: any) => this.handleEndDate(e)}\n />\n </div>\n </div>\n\n ${this.caption !== ''\n ? html` <div class=\"caption\">${this.caption}</div> `\n : null}\n ${this.isInvalid\n ? html`\n <div class=\"error\">\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\n ${this.warnText !== '' && !this.isInvalid\n ? html`<div class=\"warn\">${this.warnText}</div>`\n : null}\n `;\n }\n\n override updated(changedProps: PropertyValues) {\n if (\n changedProps.has('invalidText') ||\n changedProps.has('internalValidationMsg')\n ) {\n this.isInvalid =\n this.invalidText !== '' || this.internalValidationMsg !== ''\n ? true\n : false;\n }\n\n if (\n changedProps.has('invalidText') &&\n changedProps.get('invalidText') !== undefined\n ) {\n this._validate(false, true);\n }\n\n if (changedProps.has('startDate') || changedProps.has('endDate')) {\n this._validate(false, false);\n }\n }\n\n // on-change start date\n private handleStartDate(e: any) {\n this.startDate = e.target.value;\n\n this._validate(true, false);\n this._emitValue(e);\n }\n\n // on-change end date\n private handleEndDate(e: any) {\n this.endDate = e.target.value;\n\n this._validate(true, false);\n this._emitValue(e);\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n const StartValid = this.inputElStart.checkValidity();\n const EndValid = this.inputElEnd.checkValidity();\n\n if (StartValid && EndValid) {\n // clear validation errors\n this.internals.setValidity({});\n } else if (!StartValid) {\n // validate start date\n\n // get validity state from inputEl, combine customError flag if invalidText is provided\n const Validity =\n this.invalidText !== ''\n ? { ...this.inputElStart.validity, customError: true }\n : this.inputElStart.validity;\n\n // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n const ValidationMessage =\n this.invalidText !== ''\n ? this.invalidText\n : this.inputElStart.validationMessage;\n\n this.internals.setValidity(\n Validity,\n ValidationMessage,\n this.inputElStart\n );\n } else if (!EndValid) {\n // validate end date\n\n // get validity state from inputEl, combine customError flag if invalidText is provided\n const Validity =\n this.invalidText !== ''\n ? { ...this.inputElEnd.validity, customError: true }\n : this.inputElEnd.validity;\n\n // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n const ValidationMessage =\n this.invalidText !== ''\n ? this.invalidText\n : this.inputElEnd.validationMessage;\n\n this.internals.setValidity(Validity, ValidationMessage, this.inputElEnd);\n }\n // set internal validation message if value was changed by user input\n if (interacted) {\n this.internalValidationMsg = this.internals.validationMessage;\n }\n\n // focus the form field to show validity\n if (report) {\n this.internals.reportValidity();\n }\n }\n\n private _emitValue(e: any) {\n const event = new CustomEvent('on-input', {\n detail: {\n startDate: this.startDate,\n endDate: this.endDate,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _handleFormdata(e: any) {\n const combineVals =\n this.startDate !== '' && this.endDate !== ''\n ? `${this.startDate}:${this.endDate}`\n : '';\n e.formData.append(this.name, combineVals);\n }\n\n private _handleInvalid() {\n this.internalValidationMsg = this.internals.validationMessage;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n\n this.addEventListener('invalid', () => {\n this._handleInvalid();\n });\n }\n }\n\n override disconnectedCallback(): void {\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n\n this.removeEventListener('invalid', () => {\n this._handleInvalid();\n });\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-date-range-picker': DateRangePicker;\n }\n}\n"],"names":["DateRangePicker","LitElement","constructor","this","internals","attachInternals","caption","size","startDate","endDate","name","required","disabled","invalidText","warnText","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","minDate","_b","_a","maxDate","step","e","handleStartDate","_d","_c","handleEndDate","updated","changedProps","has","undefined","get","_validate","target","value","_emitValue","interacted","report","StartValid","inputElStart","checkValidity","EndValid","inputElEnd","setValidity","Validity","validity","customError","ValidationMessage","validationMessage","reportValidity","event","CustomEvent","detail","origEvent","dispatchEvent","_handleFormdata","combineVals","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DateRangePickerScss","formAssociated","shadowRootOptions","delegatesFocus","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}
|
|
@@ -131,10 +131,11 @@ export declare class Dropdown extends LitElement {
|
|
|
131
131
|
private _handleClick;
|
|
132
132
|
private _handleBlur;
|
|
133
133
|
private _handleFormdata;
|
|
134
|
+
private _handleInvalid;
|
|
134
135
|
connectedCallback(): void;
|
|
135
136
|
disconnectedCallback(): void;
|
|
136
137
|
private updateValue;
|
|
137
|
-
private
|
|
138
|
+
private _validate;
|
|
138
139
|
private emitValue;
|
|
139
140
|
updated(changedProps: any): void;
|
|
140
141
|
private _updateChildren;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwLN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;
|
|
1
|
+
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwLN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAoBjB,oBAAoB;IAiB7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,SAAS;IAiCjB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAwFlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
|