@kyndryl-design-system/shidoka-applications 1.31.2 → 1.31.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numberInput.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/numberInput/numberInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;GAIG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,+BAAU;IAEhC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,mBAAmB;IAEnB,KAAK,SAAK;IAEV,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,OAAO,SAAM;IAEb,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,GAAG,EAAG,MAAM,CAAC;IAEb,qBAAqB;IAErB,GAAG,EAAG,MAAM,CAAC;IAEb,kBAAkB;IAElB,IAAI,SAAK;IAET,+BAA+B;IAE/B,SAAS,UAAS;IAElB,iCAAiC;IAEjC,WAAW;;;MAGT;IAEF;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAyEf,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,eAAe;
|
|
1
|
+
{"version":3,"file":"numberInput.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/numberInput/numberInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;GAIG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,+BAAU;IAEhC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,mBAAmB;IAEnB,KAAK,SAAK;IAEV,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,OAAO,SAAM;IAEb,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,GAAG,EAAG,MAAM,CAAC;IAEb,qBAAqB;IAErB,GAAG,EAAG,MAAM,CAAC;IAEb,kBAAkB;IAElB,IAAI,SAAK;IAET,+BAA+B;IAE/B,SAAS,UAAS;IAElB,iCAAiC;IAEjC,WAAW;;;MAGT;IAEF;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAyEf,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IA0BR,OAAO,CAAC,YAAY,EAAE,GAAG;IA4BlC,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,kBAAkB,EAAE,WAAW,CAAC;KACjC;CACF"}
|
|
@@ -58,5 +58,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
58
58
|
</div>
|
|
59
59
|
`:null}
|
|
60
60
|
</div>
|
|
61
|
-
`}_sizeMap(t){let i="medium";switch(t){case"lg":i="large";break;case"sm":i="small"}return i}_handleSubtract(){this.inputEl.stepDown(),this.value=Number(this.inputEl.value),this._emitValue()}_handleAdd(){this.inputEl.stepUp(),this.value=Number(this.inputEl.value),this._emitValue()}_handleInput(t){this.value=Number(t.target.value),this._validate(!0,!1),this._emitValue(t)}_emitValue(t){const i={value:this.value};t&&(i.origEvent=t);const e=new CustomEvent("on-input",{detail:i});this.dispatchEvent(e)}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.inputEl.validationMessage),i&&this.internals.reportValidity()}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&(this.inputEl.value=this.value.toString(),this._validate(!1,!1)),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}_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()}};m.styles=r,m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m.formAssociated=!0,t([n()],m.prototype,"internals",void 0),t([a({type:String})],m.prototype,"size",void 0),t([a({type:Number})],m.prototype,"value",void 0),t([a({type:String})],m.prototype,"placeholder",void 0),t([a({type:String})],m.prototype,"name",void 0),t([a({type:Boolean})],m.prototype,"required",void 0),t([a({type:Boolean})],m.prototype,"disabled",void 0),t([a({type:String})],m.prototype,"caption",void 0),t([a({type:String})],m.prototype,"invalidText",void 0),t([a({type:Number})],m.prototype,"max",void 0),t([a({type:Number})],m.prototype,"min",void 0),t([a({type:Number})],m.prototype,"step",void 0),t([a({type:Boolean})],m.prototype,"hideLabel",void 0),t([a({type:Object})],m.prototype,"textStrings",void 0),t([o("input")],m.prototype,"inputEl",void 0),t([n()],m.prototype,"internalValidationMsg",void 0),t([n()],m.prototype,"isInvalid",void 0),m=t([s("kyn-number-input")],m);export{m as NumberInput};
|
|
61
|
+
`}_sizeMap(t){let i="medium";switch(t){case"lg":i="large";break;case"sm":i="small"}return i}_handleSubtract(){this.inputEl.stepDown(),this.value=Number(this.inputEl.value),this._validate(!0,!1),this._emitValue()}_handleAdd(){this.inputEl.stepUp(),this.value=Number(this.inputEl.value),this._validate(!0,!1),this._emitValue()}_handleInput(t){this.value=Number(t.target.value),this._validate(!0,!1),this._emitValue(t)}_emitValue(t){const i={value:this.value};t&&(i.origEvent=t);const e=new CustomEvent("on-input",{detail:i});this.dispatchEvent(e)}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.inputEl.validationMessage),i&&this.internals.reportValidity()}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&(this.inputEl.value=this.value.toString(),this._validate(!1,!1)),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}_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()}};m.styles=r,m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m.formAssociated=!0,t([n()],m.prototype,"internals",void 0),t([a({type:String})],m.prototype,"size",void 0),t([a({type:Number})],m.prototype,"value",void 0),t([a({type:String})],m.prototype,"placeholder",void 0),t([a({type:String})],m.prototype,"name",void 0),t([a({type:Boolean})],m.prototype,"required",void 0),t([a({type:Boolean})],m.prototype,"disabled",void 0),t([a({type:String})],m.prototype,"caption",void 0),t([a({type:String})],m.prototype,"invalidText",void 0),t([a({type:Number})],m.prototype,"max",void 0),t([a({type:Number})],m.prototype,"min",void 0),t([a({type:Number})],m.prototype,"step",void 0),t([a({type:Boolean})],m.prototype,"hideLabel",void 0),t([a({type:Object})],m.prototype,"textStrings",void 0),t([o("input")],m.prototype,"inputEl",void 0),t([n()],m.prototype,"internalValidationMsg",void 0),t([n()],m.prototype,"isInvalid",void 0),m=t([s("kyn-number-input")],m);export{m as NumberInput};
|
|
62
62
|
//# sourceMappingURL=numberInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numberInput.js","sources":["../../../../src/components/reusable/numberInput/numberInput.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 { classMap } from 'lit/directives/class-map.js';\nimport Styles from './numberInput.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport addIcon from '@carbon/icons/es/add/20';\nimport subtractIcon from '@carbon/icons/es/subtract/20';\n\n/**\n * Number input.\n * @fires on-input - Captures the input event and emits the value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-number-input')\nexport class NumberInput extends LitElement {\n static override styles = Styles;\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 /** Input size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Input value. */\n @property({ type: Number })\n value = 0;\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 /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Input invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /** Maximum value. */\n @property({ type: Number })\n max!: number;\n\n /** Minimum value. */\n @property({ type: Number })\n min!: number;\n\n /** Step value. */\n @property({ type: Number })\n step = 1;\n\n /** Visually hide the label. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /** Customizable text strings. */\n @property({ type: Object })\n textStrings = {\n subtract: 'Subtract',\n add: 'Add',\n };\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 <div class=\"number-input\" ?disabled=${this.disabled}>\n <label\n class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n for=${this.name}\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 <kd-button\n kind=\"secondary\"\n size=${this._sizeMap(this.size)}\n ?disabled=${this.disabled || this.value === this.min}\n description=${this.textStrings.subtract}\n @on-click=${this._handleSubtract}\n >\n <kd-icon slot=\"icon\" .icon=${subtractIcon}></kd-icon>\n </kd-button>\n\n <input\n autofocus\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n type=\"number\"\n id=${this.name}\n name=${this.name}\n value=${this.value.toString()}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n aria-invalid=${this.isInvalid}\n aria-describedby=${this.isInvalid ? 'error' : ''}\n step=${ifDefined(this.step)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n @input=${(e: any) => this._handleInput(e)}\n />\n\n <kd-button\n kind=\"secondary\"\n size=${this._sizeMap(this.size)}\n ?disabled=${this.disabled || this.value === this.max}\n description=${this.textStrings.add}\n @on-click=${this._handleAdd}\n >\n <kd-icon slot=\"icon\" .icon=${addIcon}></kd-icon>\n </kd-button>\n </div>\n\n ${this.caption !== ''\n ? html` <div class=\"caption\">${this.caption}</div> `\n : null}\n ${this.isInvalid\n ? html`\n <div id=\"error\" class=\"error\">\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\n </div>\n `;\n }\n\n private _sizeMap(size: string) {\n let btnSize = 'medium';\n\n switch (size) {\n case 'lg':\n btnSize = 'large';\n break;\n case 'sm':\n btnSize = 'small';\n break;\n }\n\n return btnSize;\n }\n\n private _handleSubtract() {\n this.inputEl.stepDown();\n this.value = Number(this.inputEl.value);\n\n this._emitValue();\n }\n\n private _handleAdd() {\n this.inputEl.stepUp();\n this.value = Number(this.inputEl.value);\n\n this._emitValue();\n }\n\n private _handleInput(e: any) {\n this.value = Number(e.target.value);\n\n this._validate(true, false);\n this._emitValue(e);\n }\n\n private _emitValue(e?: any) {\n const Detail: any = {\n value: this.value,\n };\n if (e) {\n Detail.origEvent = e;\n }\n\n const event = new CustomEvent('on-input', {\n detail: Detail,\n });\n this.dispatchEvent(event);\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.inputEl.validationMessage;\n }\n\n // focus the form field to show validity\n if (report) {\n this.internals.reportValidity();\n }\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 this.inputEl.value = this.value.toString();\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 _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 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-number-input': NumberInput;\n }\n}\n"],"names":["NumberInput","LitElement","constructor","this","internals","attachInternals","size","value","placeholder","name","required","disabled","caption","invalidText","step","hideLabel","textStrings","subtract","add","internalValidationMsg","isInvalid","render","html","classMap","_sizeMap","min","_handleSubtract","subtractIcon","toString","ifDefined","max","e","_handleInput","_handleAdd","addIcon","btnSize","inputEl","stepDown","Number","_emitValue","stepUp","target","_validate","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","updated","changedProps","has","undefined","get","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","Styles","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Object","query","customElement"],"mappings":"wrCAiBO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAoBLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,KAIPH,KAAKI,MAAG,EAIRJ,KAAWK,YAAG,GAIdL,KAAIM,KAAG,GAIPN,KAAQO,UAAG,EAIXP,KAAQQ,UAAG,EAIXR,KAAOS,QAAG,GAIVT,KAAWU,YAAG,GAYdV,KAAIW,KAAG,EAIPX,KAASY,WAAG,EAIZZ,KAAAa,YAAc,CACZC,SAAU,WACVC,IAAK,OAePf,KAAqBgB,sBAAG,GAOxBhB,KAASiB,WAAG,CAsNb,CApNU,MAAAC,GACP,OAAOC,CAAI;4CAC6BnB,KAAKQ;;8BAEnBR,KAAKY,UAAY,UAAY;gBAC3CZ,KAAKM;;YAETN,KAAKO,SAAWY,CAAI,kCAAoC;;;;;mBAKjDC,EAAS,CAChB,iBAAiB;;;;mBAKVpB,KAAKqB,SAASrB,KAAKG;wBACdH,KAAKQ,UAAYR,KAAKI,QAAUJ,KAAKsB;0BACnCtB,KAAKa,YAAYC;wBACnBd,KAAKuB;;yCAEYC;;;;;qBAKpBJ,EAAS,CAChB,WAA0B,OAAdpB,KAAKG,KACjB,WAA0B,OAAdH,KAAKG;;iBAGdH,KAAKM;mBACHN,KAAKM;oBACJN,KAAKI,MAAMqB;0BACLzB,KAAKK;wBACPL,KAAKO;wBACLP,KAAKQ;uBACNR,KAAKiB;2BACDjB,KAAKiB;+BACDjB,KAAKiB,UAAY,QAAU;mBACvCS,EAAU1B,KAAKW;kBAChBe,EAAU1B,KAAKsB;kBACfI,EAAU1B,KAAK2B;qBACXC,GAAW5B,KAAK6B,aAAaD;;;;;mBAKhC5B,KAAKqB,SAASrB,KAAKG;wBACdH,KAAKQ,UAAYR,KAAKI,QAAUJ,KAAK2B;0BACnC3B,KAAKa,YAAYE;wBACnBf,KAAK8B;;yCAEYC;;;;UAId,KAAjB/B,KAAKS,QACHU,CAAI,yBAAyBnB,KAAKS,iBAClC;UACFT,KAAKiB,UACHE,CAAI;;kBAEEnB,KAAKU,aAAeV,KAAKgB;;cAG/B;;KAGT,CAEO,QAAAK,CAASlB,GACf,IAAI6B,EAAU,SAEd,OAAQ7B,GACN,IAAK,KACH6B,EAAU,QACV,MACF,IAAK,KACHA,EAAU,QAId,OAAOA,CACR,CAEO,eAAAT,GACNvB,KAAKiC,QAAQC,WACblC,KAAKI,MAAQ+B,OAAOnC,KAAKiC,QAAQ7B,OAEjCJ,KAAKoC,YACN,CAEO,UAAAN,GACN9B,KAAKiC,QAAQI,SACbrC,KAAKI,MAAQ+B,OAAOnC,KAAKiC,QAAQ7B,OAEjCJ,KAAKoC,YACN,CAEO,YAAAP,CAAaD,GACnB5B,KAAKI,MAAQ+B,OAAOP,EAAEU,OAAOlC,OAE7BJ,KAAKuC,WAAU,GAAM,GACrBvC,KAAKoC,WAAWR,EACjB,CAEO,UAAAQ,CAAWR,GACjB,MAAMY,EAAc,CAClBpC,MAAOJ,KAAKI,OAEVwB,IACFY,EAAOC,UAAYb,GAGrB,MAAMc,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQJ,IAEVxC,KAAK6C,cAAcH,EACpB,CAEO,SAAAH,CAAUO,EAAqBC,GAErC,MAAMC,EACiB,KAArBhD,KAAKU,YACD,IAAKV,KAAKiC,QAAQgB,SAAUC,aAAa,GACzClD,KAAKiC,QAAQgB,SAEbE,EACiB,KAArBnD,KAAKU,YACDV,KAAKU,YACLV,KAAKiC,QAAQmB,kBAGnBpD,KAAKC,UAAUoD,YAAYL,EAAUG,EAAmBnD,KAAKiC,SAGzDa,IACF9C,KAAKgB,sBAAwBhB,KAAKiC,QAAQmB,mBAIxCL,GACF/C,KAAKC,UAAUqD,gBAElB,CAEQ,OAAAC,CAAQC,IAEbA,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAGjBzD,KAAKiB,UACkB,KAArBjB,KAAKU,aAAqD,KAA/BV,KAAKgB,uBAKhCwC,EAAaC,IAAI,WACnBzD,KAAKiC,QAAQ7B,MAAQJ,KAAKI,MAAMqB,WAIhCzB,KAAKuC,WAAU,GAAO,IAItBiB,EAAaC,IAAI,qBACmBC,IAApCF,EAAaG,IAAI,gBAEjB3D,KAAKuC,WAAU,GAAO,EAEzB,CAEO,eAAAqB,CAAgBhC,GACtBA,EAAEiC,SAASC,OAAO9D,KAAKM,KAAMN,KAAKI,MACnC,CAEO,cAAA2D,GACN/D,KAAKuC,WAAU,GAAM,EACtB,CAEQ,iBAAAyB,GACPC,MAAMD,oBAEFhE,KAAKC,UAAUiE,OACjBlE,KAAKC,UAAUiE,KAAKC,iBAAiB,YAAavC,GAChD5B,KAAK4D,gBAAgBhC,KAGvB5B,KAAKmE,iBAAiB,WAAW,KAC/BnE,KAAK+D,gBAAgB,IAG1B,CAEQ,oBAAAK,GACHpE,KAAKC,UAAUiE,OACjBlE,KAAKC,UAAUiE,KAAKG,oBAAoB,YAAazC,GACnD5B,KAAK4D,gBAAgBhC,KAGvB5B,KAAKqE,oBAAoB,WAAW,KAClCrE,KAAK+D,gBAAgB,KAIzBE,MAAMG,sBACP,GApTevE,EAAMyE,OAAGC,EAGT1E,EAAA2E,kBAAoB,IAC/B1E,EAAW0E,kBACdC,gBAAgB,GAOX5E,EAAc6E,gBAAG,EAOxBC,EAAA,CADCC,KACkC/E,EAAAgF,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACNnF,EAAAgF,UAAA,YAAA,GAIZF,EAAA,CADCG,EAAS,CAAEC,KAAM5C,UACRtC,EAAAgF,UAAA,aAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACDnF,EAAAgF,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACRnF,EAAAgF,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACDpF,EAAAgF,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACDpF,EAAAgF,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACLnF,EAAAgF,UAAA,eAAA,GAIbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACDnF,EAAAgF,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAM5C,UACLtC,EAAAgF,UAAA,WAAA,GAIbF,EAAA,CADCG,EAAS,CAAEC,KAAM5C,UACLtC,EAAAgF,UAAA,WAAA,GAIbF,EAAA,CADCG,EAAS,CAAEC,KAAM5C,UACTtC,EAAAgF,UAAA,YAAA,GAITF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACApF,EAAAgF,UAAA,iBAAA,GAIlBF,EAAA,CADCG,EAAS,CAAEC,KAAMG,UAIhBrF,EAAAgF,UAAA,mBAAA,GAOFF,EAAA,CADCQ,EAAM,UACoBtF,EAAAgF,UAAA,eAAA,GAO3BF,EAAA,CADCC,KAC0B/E,EAAAgF,UAAA,6BAAA,GAO3BF,EAAA,CADCC,KACiB/E,EAAAgF,UAAA,iBAAA,GAhGPhF,EAAW8E,EAAA,CADvBS,EAAc,qBACFvF"}
|
|
1
|
+
{"version":3,"file":"numberInput.js","sources":["../../../../src/components/reusable/numberInput/numberInput.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 { classMap } from 'lit/directives/class-map.js';\nimport Styles from './numberInput.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport addIcon from '@carbon/icons/es/add/20';\nimport subtractIcon from '@carbon/icons/es/subtract/20';\n\n/**\n * Number input.\n * @fires on-input - Captures the input event and emits the value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-number-input')\nexport class NumberInput extends LitElement {\n static override styles = Styles;\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 /** Input size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Input value. */\n @property({ type: Number })\n value = 0;\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 /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Input invalid text. */\n @property({ type: String })\n invalidText = '';\n\n /** Maximum value. */\n @property({ type: Number })\n max!: number;\n\n /** Minimum value. */\n @property({ type: Number })\n min!: number;\n\n /** Step value. */\n @property({ type: Number })\n step = 1;\n\n /** Visually hide the label. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /** Customizable text strings. */\n @property({ type: Object })\n textStrings = {\n subtract: 'Subtract',\n add: 'Add',\n };\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 <div class=\"number-input\" ?disabled=${this.disabled}>\n <label\n class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n for=${this.name}\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 <kd-button\n kind=\"secondary\"\n size=${this._sizeMap(this.size)}\n ?disabled=${this.disabled || this.value === this.min}\n description=${this.textStrings.subtract}\n @on-click=${this._handleSubtract}\n >\n <kd-icon slot=\"icon\" .icon=${subtractIcon}></kd-icon>\n </kd-button>\n\n <input\n autofocus\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n type=\"number\"\n id=${this.name}\n name=${this.name}\n value=${this.value.toString()}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n aria-invalid=${this.isInvalid}\n aria-describedby=${this.isInvalid ? 'error' : ''}\n step=${ifDefined(this.step)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n @input=${(e: any) => this._handleInput(e)}\n />\n\n <kd-button\n kind=\"secondary\"\n size=${this._sizeMap(this.size)}\n ?disabled=${this.disabled || this.value === this.max}\n description=${this.textStrings.add}\n @on-click=${this._handleAdd}\n >\n <kd-icon slot=\"icon\" .icon=${addIcon}></kd-icon>\n </kd-button>\n </div>\n\n ${this.caption !== ''\n ? html` <div class=\"caption\">${this.caption}</div> `\n : null}\n ${this.isInvalid\n ? html`\n <div id=\"error\" class=\"error\">\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\n </div>\n `;\n }\n\n private _sizeMap(size: string) {\n let btnSize = 'medium';\n\n switch (size) {\n case 'lg':\n btnSize = 'large';\n break;\n case 'sm':\n btnSize = 'small';\n break;\n }\n\n return btnSize;\n }\n\n private _handleSubtract() {\n this.inputEl.stepDown();\n this.value = Number(this.inputEl.value);\n\n this._validate(true, false);\n this._emitValue();\n }\n\n private _handleAdd() {\n this.inputEl.stepUp();\n this.value = Number(this.inputEl.value);\n\n this._validate(true, false);\n this._emitValue();\n }\n\n private _handleInput(e: any) {\n this.value = Number(e.target.value);\n\n this._validate(true, false);\n this._emitValue(e);\n }\n\n private _emitValue(e?: any) {\n const Detail: any = {\n value: this.value,\n };\n if (e) {\n Detail.origEvent = e;\n }\n\n const event = new CustomEvent('on-input', {\n detail: Detail,\n });\n this.dispatchEvent(event);\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.inputEl.validationMessage;\n }\n\n // focus the form field to show validity\n if (report) {\n this.internals.reportValidity();\n }\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 this.inputEl.value = this.value.toString();\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 _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 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-number-input': NumberInput;\n }\n}\n"],"names":["NumberInput","LitElement","constructor","this","internals","attachInternals","size","value","placeholder","name","required","disabled","caption","invalidText","step","hideLabel","textStrings","subtract","add","internalValidationMsg","isInvalid","render","html","classMap","_sizeMap","min","_handleSubtract","subtractIcon","toString","ifDefined","max","e","_handleInput","_handleAdd","addIcon","btnSize","inputEl","stepDown","Number","_validate","_emitValue","stepUp","target","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","updated","changedProps","has","undefined","get","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","Styles","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Object","query","customElement"],"mappings":"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"}
|