@kyndryl-design-system/shidoka-applications 1.3.3 → 1.3.4
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/textInput/textInput.d.ts.map +1 -1
- package/components/reusable/textInput/textInput.js +5 -1
- package/components/reusable/textInput/textInput.js.map +1 -1
- package/components/reusable/textInput/textInput.scss.js +4 -0
- package/components/reusable/textInput/textInput.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textInput.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;;;GAQG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,+BAAiB;IAEvC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,2DAA2D;IAE3D,IAAI,SAAU;IAEd,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,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,iCAAiC;IAEjC,OAAO,OAAQ;IAEf,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,+BAA+B;IAE/B,SAAS,UAAS;IAElB,+BAA+B;IAE/B,SAAS,UAAS;IAElB;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;
|
|
1
|
+
{"version":3,"file":"textInput.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;;;GAQG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,+BAAiB;IAEvC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,2DAA2D;IAE3D,IAAI,SAAU;IAEd,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,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,iCAAiC;IAEjC,OAAO,OAAQ;IAEf,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,+BAA+B;IAE/B,SAAS,UAAS;IAElB,+BAA+B;IAE/B,SAAS,UAAS;IAElB;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAuEf,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,UAAU;IAcT,OAAO,CAAC,YAAY,EAAE,GAAG;IAoDzB,YAAY;IAIrB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,eAAe;IAId,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;CAStC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,SAAS,CAAC;KAC7B;CACF"}
|
|
@@ -33,7 +33,11 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
33
33
|
|
|
34
34
|
${this.isInvalid?e` <kd-icon class="error-icon" .icon=${m}></kd-icon> `:null}
|
|
35
35
|
${""!==this.value?e`
|
|
36
|
-
<button
|
|
36
|
+
<button
|
|
37
|
+
?disabled=${this.disabled}
|
|
38
|
+
class="clear"
|
|
39
|
+
@click=${()=>this._handleClear()}
|
|
40
|
+
>
|
|
37
41
|
<kd-icon .icon=${p}></kd-icon>
|
|
38
42
|
</button>
|
|
39
43
|
`:null}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textInput.js","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TextInputScss from './textInput.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text input.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} pattern - RegEx pattern to validate.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n * @slot icon - Slot for contextual icon.\n */\n@customElement('kyn-text-input')\nexport class TextInput extends LitElement {\n static override styles = TextInputScss;\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 type, limited to options that are \"text like\". */\n @property({ type: String })\n type = 'text';\n\n /** Input 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 /** 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 /** RegEx pattern to validate. */\n @property({ type: String })\n pattern = null;\n\n /** Maximum number of characters. */\n @property({ type: Number })\n maxLength = null;\n\n /** Minimum number of characters. */\n @property({ type: Number })\n minLength = null;\n\n /** Place icon on the right. */\n @property({ type: Boolean })\n iconRight = false;\n\n /** Visually hide the label. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /**\n * Queries the <input> DOM element.\n * @ignore\n */\n @query('input')\n inputEl!: HTMLInputElement;\n\n /**\n * Evaluates if an icon is slotted.\n * @ignore\n */\n @state()\n iconSlotted = false;\n\n /**\n * Queries any slotted icons.\n * @ignore\n */\n @queryAssignedElements({ slot: 'icon' })\n iconSlot!: Array<HTMLElement>;\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=\"text-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 'icon--left': this.iconSlotted && !this.iconRight,\n 'icon--right': this.iconSlotted && this.iconRight,\n })}\"\n >\n <span class=\"context-icon\">\n <slot name=\"icon\"></slot>\n </span>\n\n <input\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n type=${this.type}\n id=${this.name}\n name=${this.name}\n value=${this.value}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n pattern=${ifDefined(this.pattern)}\n minlength=${ifDefined(this.minLength)}\n maxlength=${ifDefined(this.maxLength)}\n @input=${(e: any) => this._handleInput(e)}\n />\n\n ${this.isInvalid\n ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n : null}\n ${this.value !== ''\n ? html`\n <button class=\"clear\" @click=${() => this._handleClear()}>\n <kd-icon .icon=${clearIcon}></kd-icon>\n </button>\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._emitValue(e);\n }\n\n private _handleClear() {\n this.value = '';\n this.inputEl.value = '';\n\n this._emitValue();\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 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.get('value') !== undefined && changedProps.has('value')) {\n this.inputEl.value = this.value;\n // set form data value\n // this.internals.setFormValue(this.value);\n\n // set validity\n if (this.required && (!this.value || this.value === '')) {\n // validate required\n this.internals.setValidity(\n { valueMissing: true },\n 'This field is required.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n } else if (this.minLength && this.value.length < this.minLength) {\n // validate min\n this.internals.setValidity({ tooShort: true }, 'Too few characters.');\n this.internalValidationMsg = this.internals.validationMessage;\n } else if (this.maxLength && this.value.length > this.maxLength) {\n // validate max\n this.internals.setValidity({ tooLong: true }, 'Too many characters.');\n this.internalValidationMsg = this.internals.validationMessage;\n } else if (\n this.pattern &&\n this.pattern != '' &&\n !new RegExp(this.pattern).test(this.value)\n ) {\n // validate pattern\n this.internals.setValidity(\n { patternMismatch: true },\n 'Does not match expected format.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n } else {\n // clear validation\n this.internals.setValidity({});\n this.internalValidationMsg = '';\n }\n }\n }\n\n override firstUpdated() {\n this.determineIfSlotted();\n }\n\n private determineIfSlotted() {\n this.iconSlotted = this.iconSlot.length ? true : false;\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}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-text-input': TextInput;\n }\n}\n"],"names":["TextInput","LitElement","constructor","this","internals","attachInternals","type","size","caption","value","placeholder","name","required","disabled","invalidText","pattern","maxLength","minLength","iconRight","hideLabel","iconSlotted","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","e","_handleInput","errorIcon","_handleClear","clearIcon","target","_emitValue","inputEl","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","updated","changedProps","has","undefined","get","length","setValidity","tooShort","validationMessage","tooLong","RegExp","test","patternMismatch","valueMissing","firstUpdated","determineIfSlotted","iconSlot","_handleFormdata","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextInputScss","formAssociated","__decorate","state","prototype","property","String","Boolean","Number","query","queryAssignedElements","slot","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"textInput.js","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TextInputScss from './textInput.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text input.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} pattern - RegEx pattern to validate.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n * @slot icon - Slot for contextual icon.\n */\n@customElement('kyn-text-input')\nexport class TextInput extends LitElement {\n static override styles = TextInputScss;\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 type, limited to options that are \"text like\". */\n @property({ type: String })\n type = 'text';\n\n /** Input 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 /** 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 /** RegEx pattern to validate. */\n @property({ type: String })\n pattern = null;\n\n /** Maximum number of characters. */\n @property({ type: Number })\n maxLength = null;\n\n /** Minimum number of characters. */\n @property({ type: Number })\n minLength = null;\n\n /** Place icon on the right. */\n @property({ type: Boolean })\n iconRight = false;\n\n /** Visually hide the label. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /**\n * Queries the <input> DOM element.\n * @ignore\n */\n @query('input')\n inputEl!: HTMLInputElement;\n\n /**\n * Evaluates if an icon is slotted.\n * @ignore\n */\n @state()\n iconSlotted = false;\n\n /**\n * Queries any slotted icons.\n * @ignore\n */\n @queryAssignedElements({ slot: 'icon' })\n iconSlot!: Array<HTMLElement>;\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=\"text-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 'icon--left': this.iconSlotted && !this.iconRight,\n 'icon--right': this.iconSlotted && this.iconRight,\n })}\"\n >\n <span class=\"context-icon\">\n <slot name=\"icon\"></slot>\n </span>\n\n <input\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n })}\"\n type=${this.type}\n id=${this.name}\n name=${this.name}\n value=${this.value}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n pattern=${ifDefined(this.pattern)}\n minlength=${ifDefined(this.minLength)}\n maxlength=${ifDefined(this.maxLength)}\n @input=${(e: any) => this._handleInput(e)}\n />\n\n ${this.isInvalid\n ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n : null}\n ${this.value !== ''\n ? html`\n <button\n ?disabled=${this.disabled}\n class=\"clear\"\n @click=${() => this._handleClear()}\n >\n <kd-icon .icon=${clearIcon}></kd-icon>\n </button>\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._emitValue(e);\n }\n\n private _handleClear() {\n this.value = '';\n this.inputEl.value = '';\n\n this._emitValue();\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 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.get('value') !== undefined && changedProps.has('value')) {\n this.inputEl.value = this.value;\n // set form data value\n // this.internals.setFormValue(this.value);\n\n // set validity\n if (this.required && (!this.value || this.value === '')) {\n // validate required\n this.internals.setValidity(\n { valueMissing: true },\n 'This field is required.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n } else if (this.minLength && this.value.length < this.minLength) {\n // validate min\n this.internals.setValidity({ tooShort: true }, 'Too few characters.');\n this.internalValidationMsg = this.internals.validationMessage;\n } else if (this.maxLength && this.value.length > this.maxLength) {\n // validate max\n this.internals.setValidity({ tooLong: true }, 'Too many characters.');\n this.internalValidationMsg = this.internals.validationMessage;\n } else if (\n this.pattern &&\n this.pattern != '' &&\n !new RegExp(this.pattern).test(this.value)\n ) {\n // validate pattern\n this.internals.setValidity(\n { patternMismatch: true },\n 'Does not match expected format.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n } else {\n // clear validation\n this.internals.setValidity({});\n this.internalValidationMsg = '';\n }\n }\n }\n\n override firstUpdated() {\n this.determineIfSlotted();\n }\n\n private determineIfSlotted() {\n this.iconSlotted = this.iconSlot.length ? true : false;\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}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-text-input': TextInput;\n }\n}\n"],"names":["TextInput","LitElement","constructor","this","internals","attachInternals","type","size","caption","value","placeholder","name","required","disabled","invalidText","pattern","maxLength","minLength","iconRight","hideLabel","iconSlotted","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","e","_handleInput","errorIcon","_handleClear","clearIcon","target","_emitValue","inputEl","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","updated","changedProps","has","undefined","get","length","setValidity","tooShort","validationMessage","tooLong","RegExp","test","patternMismatch","valueMissing","firstUpdated","determineIfSlotted","iconSlot","_handleFormdata","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextInputScss","formAssociated","__decorate","state","prototype","property","String","Boolean","Number","query","queryAssignedElements","slot","customElement"],"mappings":"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"}
|
|
@@ -252,6 +252,10 @@ input[type=search]::-webkit-search-results-decoration {
|
|
|
252
252
|
background: var(--kd-color-background-inverse);
|
|
253
253
|
display: block;
|
|
254
254
|
}
|
|
255
|
+
.clear[disabled] {
|
|
256
|
+
color: var(--kd-color-text-disabled);
|
|
257
|
+
cursor: not-allowed;
|
|
258
|
+
}
|
|
255
259
|
.clear kd-icon {
|
|
256
260
|
display: block;
|
|
257
261
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textInput.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"textInput.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|