@kyndryl-design-system/shidoka-applications 1.7.0 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/reusable/dropdown/dropdown.scss.js +2 -0
- package/components/reusable/dropdown/dropdown.scss.js.map +1 -1
- package/components/reusable/textArea/textArea.d.ts +2 -0
- package/components/reusable/textArea/textArea.d.ts.map +1 -1
- package/components/reusable/textArea/textArea.js +5 -4
- package/components/reusable/textArea/textArea.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dropdown.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -43,6 +43,8 @@ export declare class TextArea extends LitElement {
|
|
|
43
43
|
maxLength: number;
|
|
44
44
|
/** Minimum number of characters. */
|
|
45
45
|
minLength: number;
|
|
46
|
+
/** textarea rows attribute. The number of visible text lines. */
|
|
47
|
+
rows: number;
|
|
46
48
|
/**
|
|
47
49
|
* Internal validation message.
|
|
48
50
|
* @ignore
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;;GAMG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,mBAAmB;IAEnB,KAAK,SAAM;IAEX,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,oCAAoC;IAEpC,SAAS,EAAG,MAAM,CAAC;IAEnB,oCAAoC;IAEpC,SAAS,EAAG,MAAM,CAAC;IAEnB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,UAAU,EAAG,mBAAmB,CAAC;IAExB,MAAM;
|
|
1
|
+
{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;;GAMG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,mBAAmB;IAEnB,KAAK,SAAM;IAEX,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,oCAAoC;IAEpC,SAAS,EAAG,MAAM,CAAC;IAEnB,oCAAoC;IAEpC,SAAS,EAAG,MAAM,CAAC;IAEnB,iEAAiE;IAEjE,IAAI,EAAG,MAAM,CAAC;IAEd;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,UAAU,EAAG,mBAAmB,CAAC;IAExB,MAAM;IAgDf,OAAO,CAAC,WAAW;IAeV,OAAO,CAAC,YAAY,EAAE,GAAG;IA2BlC,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;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 a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query 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 a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as o}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 r from"./textArea.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d from'./../../../external/@carbon/icons/es/warning--filled/24.js';let h=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.caption="",this.value="",this.placeholder="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
|
|
2
2
|
<div class="text-area" ?disabled=${this.disabled}>
|
|
3
3
|
<label class="label-text" for=${this.name}>
|
|
4
4
|
${this.required?e`<span class="required">*</span>`:null}
|
|
@@ -13,8 +13,9 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
13
13
|
?required=${this.required}
|
|
14
14
|
?disabled=${this.disabled}
|
|
15
15
|
?invalid=${this.isInvalid}
|
|
16
|
-
minlength=${
|
|
17
|
-
maxlength=${
|
|
16
|
+
minlength=${l(this.minLength)}
|
|
17
|
+
maxlength=${l(this.maxLength)}
|
|
18
|
+
rows=${this.rows}
|
|
18
19
|
@input=${t=>this.handleInput(t)}
|
|
19
20
|
>
|
|
20
21
|
${this.value}</textarea
|
|
@@ -33,5 +34,5 @@ ${this.value}</textarea
|
|
|
33
34
|
</div>
|
|
34
35
|
`:null}
|
|
35
36
|
</div>
|
|
36
|
-
`}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("value")&&this._validate(!1,!1),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}_validate(t,e){const i=""!==this.invalidText?{...this.textareaEl.validity,customError:!0}:this.textareaEl.validity,a=""!==this.invalidText?this.invalidText:this.textareaEl.validationMessage;this.internals.setValidity(i,a,this.textareaEl),t&&(this.internalValidationMsg=this.textareaEl.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}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=r,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([s({type:String})],h.prototype,"caption",void 0),t([s({type:String})],h.prototype,"value",void 0),t([s({type:String})],h.prototype,"placeholder",void 0),t([s({type:String})],h.prototype,"name",void 0),t([s({type:Boolean})],h.prototype,"required",void 0),t([s({type:Boolean})],h.prototype,"disabled",void 0),t([s({type:String})],h.prototype,"invalidText",void 0),t([s({type:Number})],h.prototype,"maxLength",void 0),t([s({type:Number})],h.prototype,"minLength",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),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("value")&&this._validate(!1,!1),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}_validate(t,e){const i=""!==this.invalidText?{...this.textareaEl.validity,customError:!0}:this.textareaEl.validity,a=""!==this.invalidText?this.invalidText:this.textareaEl.validationMessage;this.internals.setValidity(i,a,this.textareaEl),t&&(this.internalValidationMsg=this.textareaEl.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}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=r,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([s({type:String})],h.prototype,"caption",void 0),t([s({type:String})],h.prototype,"value",void 0),t([s({type:String})],h.prototype,"placeholder",void 0),t([s({type:String})],h.prototype,"name",void 0),t([s({type:Boolean})],h.prototype,"required",void 0),t([s({type:Boolean})],h.prototype,"disabled",void 0),t([s({type:String})],h.prototype,"invalidText",void 0),t([s({type:Number})],h.prototype,"maxLength",void 0),t([s({type:Number})],h.prototype,"minLength",void 0),t([s({type:Number})],h.prototype,"rows",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([o("textarea")],h.prototype,"textareaEl",void 0),h=t([a("kyn-text-area")],h);export{h as TextArea};
|
|
37
38
|
//# sourceMappingURL=textArea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textArea.js","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport TextAreaScss from './textArea.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text area.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-text-area')\nexport class TextArea extends LitElement {\n static override styles = TextAreaScss;\n\n /** @ignore */\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 /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Input value. */\n @property({ type: String })\n value = '';\n\n /** Input placeholder. */\n @property({ type: String })\n placeholder = '';\n\n /** Input name. */\n @property({ type: String })\n name = '';\n\n /** Makes the input required. */\n @property({ type: Boolean })\n required = false;\n\n /** Input disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Input invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /** Maximum number of characters. */\n @property({ type: Number })\n maxLength!: number;\n\n /** Minimum number of characters. */\n @property({ type: Number })\n minLength!: number;\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 <textarea> DOM element.\n * @ignore\n */\n @query('textarea')\n textareaEl!: HTMLTextAreaElement;\n\n override render() {\n return html`\n <div class=\"text-area\" ?disabled=${this.disabled}>\n <label class=\"label-text\" for=${this.name}>\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot></slot>\n </label>\n\n <div class=\"input-wrapper\">\n <textarea\n id=${this.name}\n name=${this.name}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n minlength=${ifDefined(this.minLength)}\n maxlength=${ifDefined(this.maxLength)}\n @input=${(e: any) => this.handleInput(e)}\n >\n${this.value}</textarea\n >\n\n ${this.isInvalid\n ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n : null}\n ${this.maxLength\n ? html`\n <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n `\n : null}\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 </div>\n `;\n }\n\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: any) {\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.has('value')) {\n // set form data value\n // this.internals.setFormValue(this.value);\n\n this._validate(false, false);\n }\n\n if (\n changedProps.has('invalidText') &&\n changedProps.get('invalidText') !== undefined\n ) {\n this._validate(false, false);\n }\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n // get validity state from textareaEl, combine customError flag if invalidText is provided\n const Validity =\n this.invalidText !== ''\n ? { ...this.textareaEl.validity, customError: true }\n : this.textareaEl.validity;\n // set validationMessage to invalidText if present, otherwise use textareaEl validationMessage\n const ValidationMessage =\n this.invalidText !== ''\n ? this.invalidText\n : this.textareaEl.validationMessage;\n\n // set validity on custom element, anchor to textareaEl\n this.internals.setValidity(Validity, ValidationMessage, this.textareaEl);\n\n // set internal validation message if value was changed by user input\n if (interacted) {\n this.internalValidationMsg = this.textareaEl.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._validate(true, false);\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 this.addEventListener('invalid', () => {\n this._handleInvalid();\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-text-area': TextArea;\n }\n}\n"],"names":["TextArea","LitElement","constructor","this","internals","attachInternals","caption","value","placeholder","name","required","disabled","invalidText","internalValidationMsg","isInvalid","render","html","ifDefined","minLength","maxLength","e","handleInput","errorIcon","length","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","textareaEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextAreaScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Number","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"textArea.js","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport TextAreaScss from './textArea.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text area.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-text-area')\nexport class TextArea extends LitElement {\n static override styles = TextAreaScss;\n\n /** @ignore */\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 /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Input value. */\n @property({ type: String })\n value = '';\n\n /** Input placeholder. */\n @property({ type: String })\n placeholder = '';\n\n /** Input name. */\n @property({ type: String })\n name = '';\n\n /** Makes the input required. */\n @property({ type: Boolean })\n required = false;\n\n /** Input disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Input invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /** Maximum number of characters. */\n @property({ type: Number })\n maxLength!: number;\n\n /** Minimum number of characters. */\n @property({ type: Number })\n minLength!: number;\n\n /** textarea rows attribute. The number of visible text lines. */\n @property({ type: Number })\n rows!: number;\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 <textarea> DOM element.\n * @ignore\n */\n @query('textarea')\n textareaEl!: HTMLTextAreaElement;\n\n override render() {\n return html`\n <div class=\"text-area\" ?disabled=${this.disabled}>\n <label class=\"label-text\" for=${this.name}>\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot></slot>\n </label>\n\n <div class=\"input-wrapper\">\n <textarea\n id=${this.name}\n name=${this.name}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n minlength=${ifDefined(this.minLength)}\n maxlength=${ifDefined(this.maxLength)}\n rows=${this.rows}\n @input=${(e: any) => this.handleInput(e)}\n >\n${this.value}</textarea\n >\n\n ${this.isInvalid\n ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n : null}\n ${this.maxLength\n ? html`\n <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n `\n : null}\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 </div>\n `;\n }\n\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: any) {\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.has('value')) {\n // set form data value\n // this.internals.setFormValue(this.value);\n\n this._validate(false, false);\n }\n\n if (\n changedProps.has('invalidText') &&\n changedProps.get('invalidText') !== undefined\n ) {\n this._validate(false, false);\n }\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n // get validity state from textareaEl, combine customError flag if invalidText is provided\n const Validity =\n this.invalidText !== ''\n ? { ...this.textareaEl.validity, customError: true }\n : this.textareaEl.validity;\n // set validationMessage to invalidText if present, otherwise use textareaEl validationMessage\n const ValidationMessage =\n this.invalidText !== ''\n ? this.invalidText\n : this.textareaEl.validationMessage;\n\n // set validity on custom element, anchor to textareaEl\n this.internals.setValidity(Validity, ValidationMessage, this.textareaEl);\n\n // set internal validation message if value was changed by user input\n if (interacted) {\n this.internalValidationMsg = this.textareaEl.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._validate(true, false);\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 this.addEventListener('invalid', () => {\n this._handleInvalid();\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-text-area': TextArea;\n }\n}\n"],"names":["TextArea","LitElement","constructor","this","internals","attachInternals","caption","value","placeholder","name","required","disabled","invalidText","internalValidationMsg","isInvalid","render","html","ifDefined","minLength","maxLength","rows","e","handleInput","errorIcon","length","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","textareaEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextAreaScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Number","query","customElement"],"mappings":"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"}
|