@aquera/nile-elements 0.0.52 → 0.0.53
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/dist/index.iife.js +99 -47
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +1 -0
- package/dist/nile-textarea/index.cjs.js +1 -1
- package/dist/nile-textarea/index.esm.js +1 -1
- package/dist/nile-textarea/nile-textarea.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.css.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.css.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.css.esm.js +41 -8
- package/dist/nile-textarea/nile-textarea.esm.js +58 -40
- package/dist/src/nile-input/nile-input.css.js +1 -0
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-textarea/nile-textarea.css.js +41 -8
- package/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
- package/dist/src/nile-textarea/nile-textarea.d.ts +7 -2
- package/dist/src/nile-textarea/nile-textarea.js +107 -45
- package/dist/src/nile-textarea/nile-textarea.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-input/nile-input.css.ts +1 -0
- package/src/nile-textarea/nile-textarea.css.ts +41 -8
- package/src/nile-textarea/nile-textarea.ts +127 -62
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-textarea.cjs.js","sources":["../../../src/nile-textarea/nile-textarea.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-textarea.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { FormControlController } from '../internal/form';\nimport { HasSlotController } from '../internal/slot';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @tag nile-text-area\n\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event nile-blur - Emitted when the control loses focus.\n * @event nile-change - Emitted when an alteration to the control's value is committed by the user.\n * @event nile-focus - Emitted when the control gains focus.\n * @event nile-input - Emitted when the control receives input.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */\n\n@customElement('nile-textarea')\nexport class NileTextarea extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private resizeObserver: ResizeObserver;\n\n @query('.textarea__control') input: HTMLTextAreaElement;\n\n @state() private hasFocus = false;\n @property() title = ''; // make reactive to pass through\n\n /** The name of the textarea, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the textarea, submitted as a name/value pair with form data. */\n @property() value = '';\n\n /** The textarea's size. */\n @property({ reflect: true }) size = 'medium';\n\n /** Draws a filled textarea. */\n @property({ type: Boolean, reflect: true }) filled = false;\n\n /** The textarea's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** The input's error message. If you need to display HTML, use the `error-message` slot instead. */\n @property({ attribute: 'error-message' }) errorMessage = '';\n\n /** Placeholder text to show as a hint when the input is empty. */\n @property() placeholder = '';\n\n /** The number of rows to display by default. */\n @property({ type: Number }) rows = 4;\n\n /** Controls how the textarea can be resized. */\n @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n /** Disables the textarea. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes the textarea readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Makes the textarea a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Number }) minlength: number;\n\n @property({ type: Number }) maxlength: number;\n\n /** Sets the input to a warning state, changing its visual appearance. */\n @property({ type: Boolean }) warning = false;\n\n /** Sets the input to an error state, changing its visual appearance. */\n @property({ type: Boolean }) error = false;\n\n /** Sets the input to a success state, changing its visual appearance. */\n @property({ type: Boolean }) success = false;\n\n /** Sets the input to a destructive state, changing its visual appearance. */\n @property({ type: Boolean }) destructive = false;\n\n /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n /** Indicates whether the browser's autocorrect feature is on or off. */\n @property() autocorrect: string;\n\n /**\n * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n */\n @property() autocomplete: string;\n\n /** Indicates that the input should receive focus on page load. */\n @property({ type: Boolean }) autofocus: boolean;\n\n /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /** Enables spell checking on the textarea. */\n @property({\n type: Boolean,\n converter: {\n // Allow \"true|false\" attribute values but keep the property boolean\n fromAttribute: value => (!value || value === 'false' ? false : true),\n toAttribute: value => (value ? 'true' : 'false')\n }\n })\n spellcheck = true;\n\n /**\n * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n * keyboard on supportive devices.\n */\n @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue() defaultValue = '';\n\n @property({ type: Boolean, reflect: true }) fullHeight = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n this.updateComplete.then(() => {\n this.setTextareaHeight();\n this.resizeObserver.observe(this.input);\n });\n\n\n if(this.fullHeight){\n requestAnimationFrame(() => {\n let parentHeight = this.parentElement?.getBoundingClientRect().height;\n if (parentHeight) {\n parentHeight = parentHeight - 65;\n if (parentHeight<12) {\n parentHeight=12;\n }\n this.shadowRoot?.querySelector('textarea')?.style.setProperty('height', `${parentHeight}px`);\n }\n });\n }\n\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if(this.input) {\n this.resizeObserver.unobserve(this.input);\n }\n this.emit('nile-destroy');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('nile-blur', { value: this.value });\n }\n\n private handleChange() {\n this.value = this.input.value;\n this.setTextareaHeight();\n this.emit('nile-change', { value: this.value });\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('nile-focus', { value: this.value });\n }\n\n private handleInput() {\n this.value = this.input.value;\n this.emit('nile-input', { value: this.value });\n }\n\n private setTextareaHeight() {\n if (this.resize === 'auto') {\n this.input.style.height = 'auto';\n this.input.style.height = `${this.input.scrollHeight}px`;\n } else {\n (this.input.style.height as string | undefined) = undefined;\n }\n }\n\n @watch('rows', { waitUntilFirstUpdate: true })\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @watch('value', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n this.setTextareaHeight();\n }\n\n /** Sets focus on the textarea. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the textarea. */\n blur() {\n this.input.blur();\n }\n\n /** Selects all the text in the textarea. */\n select() {\n this.input.select();\n }\n\n /** Gets or sets the textarea's scroll position. */\n scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {\n if (position) {\n if (typeof position.top === 'number') this.input.scrollTop = position.top;\n if (typeof position.left === 'number') this.input.scrollLeft = position.left;\n return undefined;\n }\n\n return {\n top: this.input.scrollTop,\n left: this.input.scrollTop\n };\n }\n\n /** Sets the start and end positions of the text selection (0-based). */\n setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ) {\n this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /** Replaces a range of text with a new string. */\n setRangeText(\n replacement: string,\n start?: number,\n end?: number,\n selectMode?: 'select' | 'start' | 'end' | 'preserve'\n ) {\n // @ts-expect-error - start, end, and selectMode are optional\n this.input.setRangeText(replacement, start, end, selectMode);\n\n if (this.value !== this.input.value) {\n this.value = this.input.value;\n }\n\n if (this.value !== this.input.value) {\n this.value = this.input.value;\n this.setTextareaHeight();\n }\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': this.size === 'medium',\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div\n part=\"base\"\n class=${classMap({\n textarea: true,\n 'textarea--medium': this.size === 'medium',\n 'textarea--warning': this.warning,\n 'textarea--error': this.error,\n 'textarea--success': this.success,\n 'textarea--destructive': this.destructive,\n 'textarea--standard': !this.filled,\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': !this.value,\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto'\n })}\n >\n <textarea\n part=\"textarea\"\n id=\"input\"\n class=\"textarea__control\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${ifDefined(this.name)}\n .value=${live(this.value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n placeholder=${ifDefined(this.placeholder)}\n rows=${ifDefined(this.rows)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n autocapitalize=${ifDefined(this.autocapitalize)}\n autocorrect=${ifDefined(this.autocorrect)}\n ?autofocus=${this.autofocus}\n spellcheck=${ifDefined(this.spellcheck)}\n enterkeyhint=${ifDefined(this.enterkeyhint)}\n inputmode=${ifDefined(this.inputmode)}\n aria-describedby=\"help-text\"\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n\n \n ></textarea>\n </div>\n </div>\n\n ${\n hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``\n }\n\n ${\n hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``\n }\n </div>\n `;\n }\n}\n\nexport default NileTextarea;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-textarea': NileTextarea;\n }\n}\n"],"names":["NileTextarea","_u","_inherits","p","_super","_createSuper","constructor","this","hasSlotController","HasSlotController","hasFocus","title","name","value","size","filled","label","helpText","errorMessage","placeholder","rows","resize","disabled","readonly","form","required","warning","error","success","destructive","spellcheck","defaultValue","fullHeight","_this","_createClass","key","connectedCallback","super","resizeObserver","ResizeObserver","setTextareaHeight","updateComplete","then","observe","input","requestAnimationFrame","_this2$parentElement","_this2$shadowRoot","parentHeight","parentElement","getBoundingClientRect","height","shadowRoot","querySelector","style","setProperty","emit","disconnectedCallback","unobserve","handleBlur","handleChange","handleFocus","handleInput","scrollHeight","undefined","handleRowsChange","_handleValueChange","_asyncToGenerator","_regeneratorRuntime","mark","_callee","wrap","_callee$","_context2","prev","next","stop","handleValueChange","apply","arguments","focus","options","blur","select","scrollPosition","position","top","scrollTop","left","scrollLeft","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","render","hasLabelSlot","test","hasLabel","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","textarea","ifDefined","live","minlength","maxlength","autocapitalize","autocorrect","autofocus","enterkeyhint","inputmode","_templateObject2","_templateObject3","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","Number","converter","fromAttribute","toAttribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nile-textarea.cjs.js","sources":["../../../src/nile-textarea/nile-textarea.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-textarea.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { HasSlotController } from '../internal/slot';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @tag nile-text-area\n\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event nile-blur - Emitted when the control loses focus.\n * @event nile-change - Emitted when an alteration to the control's value is committed by the user.\n * @event nile-focus - Emitted when the control gains focus.\n * @event nile-input - Emitted when the control receives input.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */\n\n@customElement('nile-textarea')\nexport class NileTextarea extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private resizeObserver: ResizeObserver;\n\n @query('.textarea__control') input: HTMLTextAreaElement;\n\n @state() private hasFocus = false;\n @property() title = ''; // make reactive to pass through\n\n /** The name of the textarea, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the textarea, submitted as a name/value pair with form data. */\n @property() value = '';\n\n /** The textarea's size. */\n @property({ reflect: true }) size = 'medium';\n\n /** Draws a filled textarea. */\n @property({ type: Boolean, reflect: true }) filled = false;\n\n /** The textarea's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** The input's error message. If you need to display HTML, use the `error-message` slot instead. */\n @property({ attribute: 'error-message' }) errorMessage = '';\n\n /** Placeholder text to show as a hint when the input is empty. */\n @property() placeholder = '';\n\n /** The number of rows to display by default. */\n @property({ type: Number }) rows = 4;\n\n /** Controls how the textarea can be resized. */\n @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n /** Disables the textarea. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes the textarea readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Makes the textarea a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Number }) minlength: number;\n\n @property({ type: Number }) maxlength: number;\n\n /** Sets the input to a warning state, changing its visual appearance. */\n @property({ type: Boolean }) warning = false;\n\n /** Sets the input to an error state, changing its visual appearance. */\n @property({ type: Boolean }) error = false;\n\n /** Sets the input to a success state, changing its visual appearance. */\n @property({ type: Boolean }) success = false;\n\n /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n /** Indicates whether the browser's autocorrect feature is on or off. */\n @property() autocorrect: string;\n\n /**\n * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n */\n @property() autocomplete: string;\n\n /** Indicates that the input should receive focus on page load. */\n @property({ type: Boolean }) autofocus: boolean;\n\n /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /** Enables spell checking on the textarea. */\n @property({\n type: Boolean,\n converter: {\n // Allow \"true|false\" attribute values but keep the property boolean\n fromAttribute: value => (!value || value === 'false' ? false : true),\n toAttribute: value => (value ? 'true' : 'false')\n }\n })\n spellcheck = true;\n\n /**\n * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n * keyboard on supportive devices.\n */\n @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue() defaultValue = '';\n\n @property({ type: Boolean, reflect: true }) fullHeight = false;\n\n @property({type: Boolean}) checkNonPrintableChar: boolean = false;\n\n @state() hasPrintableCharacters: boolean = false;\n\n @state() markedValue: string;\n\n connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n this.updateComplete.then(() => {\n this.setTextareaHeight();\n this.resizeObserver.observe(this.input);\n });\n\n\n if(this.fullHeight){\n requestAnimationFrame(() => {\n let parentHeight = this.parentElement?.getBoundingClientRect().height;\n if (parentHeight) {\n parentHeight = parentHeight - 65;\n if (parentHeight<12) {\n parentHeight=12;\n }\n this.shadowRoot?.querySelector('textarea')?.style.setProperty('height', `${parentHeight}px`);\n }\n });\n }\n\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if(this.input) {\n this.resizeObserver.unobserve(this.input);\n }\n this.emit('nile-destroy');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('nile-blur', { value: this.value });\n }\n\n private handleChange() {\n this.value = this.input.value;\n this.setTextareaHeight();\n this.emit('nile-change', { value: this.value });\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('nile-focus', { value: this.value });\n }\n\n private handleInput() {\n this.value = this.input.value;\n this.emit('nile-input', { value: this.value });\n }\n\n private setTextareaHeight() {\n if (this.resize === 'auto') {\n this.input.style.height = 'auto';\n this.input.style.height = `${this.input.scrollHeight}px`;\n } else {\n (this.input.style.height as string | undefined) = undefined;\n }\n }\n\n @watch('rows', { waitUntilFirstUpdate: true })\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @watch('value', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n this.setTextareaHeight();\n\n if(this.checkNonPrintableChar){\n this.markNonPrintableCharacters();\n }\n }\n\n /** checks non printable characters in the value. */\n markNonPrintableCharacters() {\n let markedValue = '';\n this.hasPrintableCharacters = false;\n if (this.value) {\n for (let i = 0, n = this.value.length; i < n; i++) {\n const charCode = this.value.charCodeAt(i);\n\n if ((charCode > 255 && charCode !== 9109) || [129, 143, 144, 157, 160].includes(charCode)) {\n markedValue += `<span class=\"input__srtiked-text\">${this.value.charAt(i)}</span>`;\n this.hasPrintableCharacters = true;\n } else {\n markedValue += this.value.charAt(i);\n }\n }\n }\n\n this.markedValue = markedValue;\n this.emit('nile-value-marked', { value: this.markedValue, hasNonPrintableCharacters: this.hasPrintableCharacters });\n }\n\n\n /** Removes all non printable characters from the value. */\n removeAllNonPrintableCharacters() {\n let cleanedValue = '';\n\n if (this.value) {\n for (let i = 0, n = this.value.length; i < n; i++) {\n const charCode = this.value.charCodeAt(i);\n\n // Consider a character printable if it's not in the specified non-printable ranges\n if (!(charCode > 255 && charCode !== 9109) && ![129, 143, 144, 157, 160].includes(charCode)) {\n cleanedValue += this.value.charAt(i);\n }\n }\n }\n\n this.value = cleanedValue;\n this.emit('nile-npchar-removed', { value: this.value });\n\n }\n\n /** Sets focus on the textarea. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the textarea. */\n blur() {\n this.input.blur();\n }\n\n /** Selects all the text in the textarea. */\n select() {\n this.input.select();\n }\n\n /** Gets or sets the textarea's scroll position. */\n scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {\n if (position) {\n if (typeof position.top === 'number') this.input.scrollTop = position.top;\n if (typeof position.left === 'number') this.input.scrollLeft = position.left;\n return undefined;\n }\n\n return {\n top: this.input.scrollTop,\n left: this.input.scrollTop\n };\n }\n\n /** Sets the start and end positions of the text selection (0-based). */\n setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ) {\n this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /** Replaces a range of text with a new string. */\n setRangeText(\n replacement: string,\n start?: number,\n end?: number,\n selectMode?: 'select' | 'start' | 'end' | 'preserve'\n ) {\n // @ts-expect-error - start, end, and selectMode are optional\n this.input.setRangeText(replacement, start, end, selectMode);\n\n if (this.value !== this.input.value) {\n this.value = this.input.value;\n }\n\n if (this.value !== this.input.value) {\n this.value = this.input.value;\n this.setTextareaHeight();\n }\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': this.size === 'medium',\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <nile-popup\n ?active=${this.hasPrintableCharacters}\n placement=\"bottom-start\"\n distance=\"5\"\n strategy=\"fixed\"\n >\n <div part=\"form-control-input\" class=\"form-control-input\" slot=\"anchor\">\n <div\n part=\"base\"\n class=${classMap({\n textarea: true,\n 'textarea--medium': this.size === 'medium',\n 'textarea--warning': this.warning,\n 'textarea--error': this.error,\n 'textarea--success': this.success,\n 'textarea--standard': !this.filled,\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': !this.value,\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto',\n })}\n >\n <textarea\n part=\"textarea\"\n id=\"input\"\n class=\"textarea__control\"\n title=${\n this\n .title /* An empty title prevents browser validation tooltips from appearing on hover */\n }\n name=${ifDefined(this.name)}\n .value=${live(this.value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n placeholder=${ifDefined(this.placeholder)}\n rows=${ifDefined(this.rows)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n autocapitalize=${ifDefined(this.autocapitalize)}\n autocorrect=${ifDefined(this.autocorrect)}\n ?autofocus=${this.autofocus}\n spellcheck=${ifDefined(this.spellcheck)}\n enterkeyhint=${ifDefined(this.enterkeyhint)}\n inputmode=${ifDefined(this.inputmode)}\n aria-describedby=\"help-text\"\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n ></textarea>\n </div>\n </div>\n\n ${hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n <div class=\"input__non-printable\">\n Non-printable character detected.\n <nile-badge\n variant=\"error\"\n @click=${this.removeAllNonPrintableCharacters}\n class=\"input__remove-non-printable\"\n >\n Remove All\n </nile-badge>\n\n <div class=\"input__srtiked-text-container\">\n ${unsafeHTML(this.markedValue)}\n </div>\n </div>\n </nile-popup>\n </div>\n `;\n }\n}\n\nexport default NileTextarea;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-textarea': NileTextarea;\n }\n}\n"],"names":["NileTextarea","_p","_inherits","v","_super","_createSuper","this","hasSlotController","HasSlotController","hasFocus","title","name","value","size","filled","label","helpText","errorMessage","placeholder","rows","resize","disabled","readonly","form","required","warning","error","success","spellcheck","defaultValue","fullHeight","checkNonPrintableChar","hasPrintableCharacters","_this","_createClass","key","connectedCallback","super","resizeObserver","ResizeObserver","setTextareaHeight","updateComplete","then","observe","input","requestAnimationFrame","_this2$parentElement","_this2$shadowRoot","parentHeight","parentElement","getBoundingClientRect","height","shadowRoot","querySelector","style","setProperty","emit","disconnectedCallback","unobserve","handleBlur","handleChange","handleFocus","handleInput","scrollHeight","undefined","handleRowsChange","_handleValueChange","_asyncToGenerator","_regeneratorRuntime","mark","_callee","wrap","_callee$","_context2","prev","next","markNonPrintableCharacters","stop","handleValueChange","apply","arguments","markedValue","i","n","length","charCode","charCodeAt","includes","concat","charAt","hasNonPrintableCharacters","removeAllNonPrintableCharacters","cleanedValue","focus","options","blur","select","scrollPosition","position","top","scrollTop","left","scrollLeft","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","render","hasLabelSlot","test","hasLabel","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","textarea","ifDefined","live","minlength","maxlength","autocapitalize","autocorrect","autofocus","enterkeyhint","inputmode","_templateObject2","_templateObject3","unsafeHTML","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","Number","converter","fromAttribute","toAttribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n margin-bottom: 12px;\n color: var(--nile-textarea-label-color);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: var(--nile-textarea-label-font-weight)
|
|
1
|
+
System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n margin-bottom: 12px;\n color: var(--nile-textarea-label-color);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: var(--nile-textarea-label-font-weight);\n line-height: var(--nile-textarea-label-line-height);\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-font-size-base);\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n min-height: 12px;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-textarea-standard-border-color);\n box-shadow:var(--nile-textarea-standard-box-shadow);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-textarea-standard-hover-border-color);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-textarea-standard-focused-border-color);\n box-shadow:var(--nile-textarea-standard-focused-box-shadow);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(--nile-textarea-standard-disabled-border-color);\n background: var(--nile-textarea-standard-disabled-background-color);\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow:var(--nile-textarea-standard-disabled-box-shadow);\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(--nile-colors-neutral-500);\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(--nile-colors-neutral-500);\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px; /* 100% */\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(--nile-colors-dark-500);\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding:var(--nile-textarea-padding);\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n min-height: 12px;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n min-height: 12px;\n }\n\n .textarea--resize-auto .textarea__control {\n resize: none;\n overflow-y: hidden;\n min-height: 12px;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .textarea--standard.textarea--destructive {\n border-color: #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .textarea--standard.textarea--destructive.textarea--focused {\n border-color: #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-wrap: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-textarea.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-textarea.css.cjs.js","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * TextArea CSS\n */\nexport const styles = css`\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n margin-bottom: 12px;\n color: var(--nile-textarea-label-color);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: var(--nile-textarea-label-font-weight)
|
|
1
|
+
{"version":3,"file":"nile-textarea.css.cjs.js","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * TextArea CSS\n */\nexport const styles = css`\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n margin-bottom: 12px;\n color: var(--nile-textarea-label-color);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: var(--nile-textarea-label-font-weight);\n line-height: var(--nile-textarea-label-line-height);\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-font-size-base);\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n min-height: 12px;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-textarea-standard-border-color);\n box-shadow:var(--nile-textarea-standard-box-shadow);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-textarea-standard-hover-border-color);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-textarea-standard-focused-border-color);\n box-shadow:var(--nile-textarea-standard-focused-box-shadow);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(--nile-textarea-standard-disabled-border-color);\n background: var(--nile-textarea-standard-disabled-background-color);\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow:var(--nile-textarea-standard-disabled-box-shadow);\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(--nile-colors-neutral-500);\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(--nile-colors-neutral-500);\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px; /* 100% */\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(--nile-colors-dark-500);\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding:var(--nile-textarea-padding);\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n min-height: 12px;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n min-height: 12px;\n }\n\n .textarea--resize-auto .textarea__control {\n resize: none;\n overflow-y: hidden;\n min-height: 12px;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .textarea--standard.textarea--destructive {\n border-color: #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .textarea--standard.textarea--destructive.textarea--focused {\n border-color: #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-wrap: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -15,8 +15,8 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
15
15
|
font-family: var(--nile-font-family-serif);
|
|
16
16
|
font-size: 14px;
|
|
17
17
|
font-style: normal;
|
|
18
|
-
font-weight: var(--nile-textarea-label-font-weight);
|
|
19
|
-
line-height: var(--nile-textarea-label-line-height);
|
|
18
|
+
font-weight: var(--nile-textarea-label-font-weight);
|
|
19
|
+
line-height: var(--nile-textarea-label-line-height);
|
|
20
20
|
letter-spacing: 0.2px;
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -75,13 +75,13 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
75
75
|
/* Standard textareas */
|
|
76
76
|
.textarea--standard {
|
|
77
77
|
background-color: var(--nile-colors-white-base);
|
|
78
|
-
border: 1px solid var(--nile-textarea-standard-border-color);
|
|
79
|
-
box-shadow:var(--nile-textarea-standard-box-shadow);
|
|
78
|
+
border: 1px solid var(--nile-textarea-standard-border-color);
|
|
79
|
+
box-shadow:var(--nile-textarea-standard-box-shadow);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.textarea--standard:hover:not(.textarea--disabled) {
|
|
83
83
|
background-color: var(--nile-colors-white-base);
|
|
84
|
-
border-color: var(--nile-textarea-standard-hover-border-color);
|
|
84
|
+
border-color: var(--nile-textarea-standard-hover-border-color);
|
|
85
85
|
border-radius: var(--nile-radius-base-standard);
|
|
86
86
|
}
|
|
87
87
|
|
|
@@ -92,7 +92,7 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
92
92
|
|
|
93
93
|
.textarea--standard.textarea--focused:not(.textarea--disabled) {
|
|
94
94
|
background-color: var(--nile-colors-white-base);
|
|
95
|
-
border-color: var(--nile-textarea-standard-focused-border-color);
|
|
95
|
+
border-color: var(--nile-textarea-standard-focused-border-color);
|
|
96
96
|
box-shadow:var(--nile-textarea-standard-focused-box-shadow);
|
|
97
97
|
}
|
|
98
98
|
|
|
@@ -102,11 +102,11 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
.textarea--standard.textarea--disabled {
|
|
105
|
-
border-color: var(--nile-textarea-standard-disabled-border-color);
|
|
105
|
+
border-color: var(--nile-textarea-standard-disabled-border-color);
|
|
106
106
|
background: var(--nile-textarea-standard-disabled-background-color);
|
|
107
107
|
opacity: 0.5;
|
|
108
108
|
cursor: not-allowed;
|
|
109
|
-
box-shadow:var(--nile-textarea-standard-disabled-box-shadow);
|
|
109
|
+
box-shadow:var(--nile-textarea-standard-disabled-box-shadow);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
.textarea--standard.textarea--disabled .textarea__control {
|
|
@@ -193,4 +193,37 @@ import{i as e}from"../index-cd2f9c12.esm.js";const r=e`
|
|
|
193
193
|
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
|
|
194
194
|
0px 0px 0px 4px rgba(240, 68, 56, 0.24);
|
|
195
195
|
}
|
|
196
|
+
|
|
197
|
+
.input__non-printable {
|
|
198
|
+
border-radius: 4px;
|
|
199
|
+
max-width: 400px;
|
|
200
|
+
background-color: var(--nile-colors-white-base);
|
|
201
|
+
border: 1px solid var(--nile-colors-red-500);
|
|
202
|
+
color: var(--nile-colors-red-500);
|
|
203
|
+
padding: 10px;
|
|
204
|
+
font-size: 12px;
|
|
205
|
+
max-height: 300px;
|
|
206
|
+
overflow-y: scroll;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.input__remove-non-printable {
|
|
210
|
+
color: var(--nile-colors-red-500);
|
|
211
|
+
margin-left: 10px;
|
|
212
|
+
font-size: 14px;
|
|
213
|
+
color: var(--nile-colors-dark-900);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.input__srtiked-text-container {
|
|
217
|
+
margin-top: 4px;
|
|
218
|
+
color: var(--nile-colors-dark-900);
|
|
219
|
+
word-wrap: break-all;
|
|
220
|
+
line-height: 16px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.input__srtiked-text {
|
|
224
|
+
text-decoration: line-through;
|
|
225
|
+
text-decoration-color: var(--nile-colors-white-base);
|
|
226
|
+
color: var(--nile-colors-white-base);
|
|
227
|
+
background-color: var(--nile-colors-red-500);
|
|
228
|
+
}
|
|
196
229
|
`;export{r as s};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{x as e}from"../index-cd2f9c12.esm.js";import{query as i,state as s,customElement as
|
|
1
|
+
import{__decorate as t}from"tslib";import{x as e}from"../index-cd2f9c12.esm.js";import{query as i,state as s,customElement as a}from"lit/decorators.js";import{s as r}from"./nile-textarea.css.esm.js";import{classMap as o}from"lit/directives/class-map.js";import{d as l}from"../internal/default-value.esm.js";import{H as h}from"../internal/slot.esm.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{live as d}from"lit/directives/live.js";import{w as c}from"../internal/watch.esm.js";import{N as m}from"../internal/nile-element.esm.js";import{unsafeHTML as p}from"lit/directives/unsafe-html.js";import{n as u}from"../property-09139d3c.esm.js";import"lit";let v=class extends m{constructor(){super(...arguments),this.hasSlotController=new h(this,"help-text","label"),this.hasFocus=!1,this.title="",this.name="",this.value="",this.size="medium",this.filled=!1,this.label="",this.helpText="",this.errorMessage="",this.placeholder="",this.rows=4,this.resize="vertical",this.disabled=!1,this.readonly=!1,this.form="",this.required=!1,this.warning=!1,this.error=!1,this.success=!1,this.spellcheck=!0,this.defaultValue="",this.fullHeight=!1,this.checkNonPrintableChar=!1,this.hasPrintableCharacters=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight())),this.updateComplete.then((()=>{this.setTextareaHeight(),this.resizeObserver.observe(this.input)})),this.fullHeight&&requestAnimationFrame((()=>{let t=this.parentElement?.getBoundingClientRect().height;t&&(t-=65,t<12&&(t=12),this.shadowRoot?.querySelector("textarea")?.style.setProperty("height",`${t}px`))})),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.input&&this.resizeObserver.unobserve(this.input),this.emit("nile-destroy")}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value})}handleChange(){this.value=this.input.value,this.setTextareaHeight(),this.emit("nile-change",{value:this.value})}handleFocus(){this.hasFocus=!0,this.emit("nile-focus",{value:this.value})}handleInput(){this.value=this.input.value,this.emit("nile-input",{value:this.value})}setTextareaHeight(){"auto"===this.resize?(this.input.style.height="auto",this.input.style.height=`${this.input.scrollHeight}px`):this.input.style.height=void 0}handleRowsChange(){this.setTextareaHeight()}async handleValueChange(){await this.updateComplete,this.setTextareaHeight(),this.checkNonPrintableChar&&this.markNonPrintableCharacters()}markNonPrintableCharacters(){let t="";if(this.hasPrintableCharacters=!1,this.value)for(let e=0,i=this.value.length;e<i;e++){const i=this.value.charCodeAt(e);i>255&&9109!==i||[129,143,144,157,160].includes(i)?(t+=`<span class="input__srtiked-text">${this.value.charAt(e)}</span>`,this.hasPrintableCharacters=!0):t+=this.value.charAt(e)}this.markedValue=t,this.emit("nile-value-marked",{value:this.markedValue,hasNonPrintableCharacters:this.hasPrintableCharacters})}removeAllNonPrintableCharacters(){let t="";if(this.value)for(let e=0,i=this.value.length;e<i;e++){const i=this.value.charCodeAt(e);i>255&&9109!==i||[129,143,144,157,160].includes(i)||(t+=this.value.charAt(e))}this.value=t,this.emit("nile-npchar-removed",{value:this.value})}focus(t){this.input.focus(t)}blur(){this.input.blur()}select(){this.input.select()}scrollPosition(t){return t?("number"==typeof t.top&&(this.input.scrollTop=t.top),void("number"==typeof t.left&&(this.input.scrollLeft=t.left))):{top:this.input.scrollTop,left:this.input.scrollTop}}setSelectionRange(t,e,i="none"){this.input.setSelectionRange(t,e,i)}setRangeText(t,e,i,s){this.input.setRangeText(t,e,i,s),this.value!==this.input.value&&(this.value=this.input.value),this.value!==this.input.value&&(this.value=this.input.value,this.setTextareaHeight())}render(){const t=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const i=!!this.label||!!t,s=!!this.helpText,a=!!this.errorMessage;return e`
|
|
2
2
|
<div
|
|
3
3
|
part="form-control"
|
|
4
|
-
class=${
|
|
4
|
+
class=${o({"form-control":!0,"form-control--medium":"medium"===this.size,"form-control--has-label":i,"form-control--has-help-text":s})}
|
|
5
5
|
>
|
|
6
6
|
<label
|
|
7
7
|
part="form-control-label"
|
|
@@ -12,50 +12,68 @@ import{__decorate as t}from"tslib";import{x as e}from"../index-cd2f9c12.esm.js";
|
|
|
12
12
|
<slot name="label">${this.label}</slot>
|
|
13
13
|
</label>
|
|
14
14
|
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
15
|
+
<nile-popup
|
|
16
|
+
?active=${this.hasPrintableCharacters}
|
|
17
|
+
placement="bottom-start"
|
|
18
|
+
distance="5"
|
|
19
|
+
strategy="fixed"
|
|
20
|
+
>
|
|
21
|
+
<div part="form-control-input" class="form-control-input" slot="anchor">
|
|
22
|
+
<div
|
|
23
|
+
part="base"
|
|
24
|
+
class=${o({textarea:!0,"textarea--medium":"medium"===this.size,"textarea--warning":this.warning,"textarea--error":this.error,"textarea--success":this.success,"textarea--standard":!this.filled,"textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":!this.value,"textarea--resize-none":"none"===this.resize,"textarea--resize-vertical":"vertical"===this.resize,"textarea--resize-auto":"auto"===this.resize})}
|
|
25
|
+
>
|
|
26
|
+
<textarea
|
|
27
|
+
part="textarea"
|
|
28
|
+
id="input"
|
|
29
|
+
class="textarea__control"
|
|
30
|
+
title=${this.title}
|
|
31
|
+
name=${n(this.name)}
|
|
32
|
+
.value=${d(this.value)}
|
|
33
|
+
?disabled=${this.disabled}
|
|
34
|
+
?readonly=${this.readonly}
|
|
35
|
+
?required=${this.required}
|
|
36
|
+
placeholder=${n(this.placeholder)}
|
|
37
|
+
rows=${n(this.rows)}
|
|
38
|
+
minlength=${n(this.minlength)}
|
|
39
|
+
maxlength=${n(this.maxlength)}
|
|
40
|
+
autocapitalize=${n(this.autocapitalize)}
|
|
41
|
+
autocorrect=${n(this.autocorrect)}
|
|
42
|
+
?autofocus=${this.autofocus}
|
|
43
|
+
spellcheck=${n(this.spellcheck)}
|
|
44
|
+
enterkeyhint=${n(this.enterkeyhint)}
|
|
45
|
+
inputmode=${n(this.inputmode)}
|
|
46
|
+
aria-describedby="help-text"
|
|
47
|
+
@change=${this.handleChange}
|
|
48
|
+
@input=${this.handleInput}
|
|
49
|
+
@focus=${this.handleFocus}
|
|
50
|
+
@blur=${this.handleBlur}
|
|
51
|
+
></textarea>
|
|
52
|
+
</div>
|
|
48
53
|
</div>
|
|
49
|
-
</div>
|
|
50
54
|
|
|
51
|
-
|
|
55
|
+
${s?e`
|
|
52
56
|
<nile-form-help-text>${this.helpText}</nile-form-help-text>
|
|
53
57
|
`:""}
|
|
54
|
-
|
|
55
|
-
${o?e`
|
|
58
|
+
${a?e`
|
|
56
59
|
<nile-form-error-message
|
|
57
60
|
>${this.errorMessage}</nile-form-error-message
|
|
58
61
|
>
|
|
59
62
|
`:""}
|
|
63
|
+
<div class="input__non-printable">
|
|
64
|
+
Non-printable character detected.
|
|
65
|
+
<nile-badge
|
|
66
|
+
variant="error"
|
|
67
|
+
@click=${this.removeAllNonPrintableCharacters}
|
|
68
|
+
class="input__remove-non-printable"
|
|
69
|
+
>
|
|
70
|
+
Remove All
|
|
71
|
+
</nile-badge>
|
|
72
|
+
|
|
73
|
+
<div class="input__srtiked-text-container">
|
|
74
|
+
${p(this.markedValue)}
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</nile-popup>
|
|
60
78
|
</div>
|
|
61
|
-
`}};
|
|
79
|
+
`}};v.styles=r,t([i(".textarea__control")],v.prototype,"input",void 0),t([s()],v.prototype,"hasFocus",void 0),t([u()],v.prototype,"title",void 0),t([u()],v.prototype,"name",void 0),t([u()],v.prototype,"value",void 0),t([u({reflect:!0})],v.prototype,"size",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"filled",void 0),t([u()],v.prototype,"label",void 0),t([u({attribute:"help-text"})],v.prototype,"helpText",void 0),t([u({attribute:"error-message"})],v.prototype,"errorMessage",void 0),t([u()],v.prototype,"placeholder",void 0),t([u({type:Number})],v.prototype,"rows",void 0),t([u()],v.prototype,"resize",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"readonly",void 0),t([u({reflect:!0})],v.prototype,"form",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"required",void 0),t([u({type:Number})],v.prototype,"minlength",void 0),t([u({type:Number})],v.prototype,"maxlength",void 0),t([u({type:Boolean})],v.prototype,"warning",void 0),t([u({type:Boolean})],v.prototype,"error",void 0),t([u({type:Boolean})],v.prototype,"success",void 0),t([u()],v.prototype,"autocapitalize",void 0),t([u()],v.prototype,"autocorrect",void 0),t([u()],v.prototype,"autocomplete",void 0),t([u({type:Boolean})],v.prototype,"autofocus",void 0),t([u()],v.prototype,"enterkeyhint",void 0),t([u({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],v.prototype,"spellcheck",void 0),t([u()],v.prototype,"inputmode",void 0),t([l()],v.prototype,"defaultValue",void 0),t([u({type:Boolean,reflect:!0})],v.prototype,"fullHeight",void 0),t([u({type:Boolean})],v.prototype,"checkNonPrintableChar",void 0),t([s()],v.prototype,"hasPrintableCharacters",void 0),t([s()],v.prototype,"markedValue",void 0),t([c("rows",{waitUntilFirstUpdate:!0})],v.prototype,"handleRowsChange",null),t([c("value",{waitUntilFirstUpdate:!0})],v.prototype,"handleValueChange",null),v=t([a("nile-textarea")],v);export{v as N};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAifxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #a4121c;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /**for v2 */\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--destructive:focus {\n border: 1px solid #fda29b;\n /* Focus rings/ring-error-shadow-xs */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: #7f7f7f;\n color: #667085; /**for v2 */\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\n font-size: 14px;\n line-height: 14px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid #85aad1; /**for v2 */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-wrap: break-all;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #a4121c;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /**for v2 */\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--destructive:focus {\n border: 1px solid #fda29b;\n /* Focus rings/ring-error-shadow-xs */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: #7f7f7f;\n color: #667085; /**for v2 */\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\n font-size: 14px;\n line-height: 14px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid #85aad1; /**for v2 */\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-wrap: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -25,8 +25,8 @@ export const styles = css `
|
|
|
25
25
|
font-family: var(--nile-font-family-serif);
|
|
26
26
|
font-size: 14px;
|
|
27
27
|
font-style: normal;
|
|
28
|
-
font-weight: var(--nile-textarea-label-font-weight);
|
|
29
|
-
line-height: var(--nile-textarea-label-line-height);
|
|
28
|
+
font-weight: var(--nile-textarea-label-font-weight);
|
|
29
|
+
line-height: var(--nile-textarea-label-line-height);
|
|
30
30
|
letter-spacing: 0.2px;
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -85,13 +85,13 @@ export const styles = css `
|
|
|
85
85
|
/* Standard textareas */
|
|
86
86
|
.textarea--standard {
|
|
87
87
|
background-color: var(--nile-colors-white-base);
|
|
88
|
-
border: 1px solid var(--nile-textarea-standard-border-color);
|
|
89
|
-
box-shadow:var(--nile-textarea-standard-box-shadow);
|
|
88
|
+
border: 1px solid var(--nile-textarea-standard-border-color);
|
|
89
|
+
box-shadow:var(--nile-textarea-standard-box-shadow);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.textarea--standard:hover:not(.textarea--disabled) {
|
|
93
93
|
background-color: var(--nile-colors-white-base);
|
|
94
|
-
border-color: var(--nile-textarea-standard-hover-border-color);
|
|
94
|
+
border-color: var(--nile-textarea-standard-hover-border-color);
|
|
95
95
|
border-radius: var(--nile-radius-base-standard);
|
|
96
96
|
}
|
|
97
97
|
|
|
@@ -102,7 +102,7 @@ export const styles = css `
|
|
|
102
102
|
|
|
103
103
|
.textarea--standard.textarea--focused:not(.textarea--disabled) {
|
|
104
104
|
background-color: var(--nile-colors-white-base);
|
|
105
|
-
border-color: var(--nile-textarea-standard-focused-border-color);
|
|
105
|
+
border-color: var(--nile-textarea-standard-focused-border-color);
|
|
106
106
|
box-shadow:var(--nile-textarea-standard-focused-box-shadow);
|
|
107
107
|
}
|
|
108
108
|
|
|
@@ -112,11 +112,11 @@ export const styles = css `
|
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
.textarea--standard.textarea--disabled {
|
|
115
|
-
border-color: var(--nile-textarea-standard-disabled-border-color);
|
|
115
|
+
border-color: var(--nile-textarea-standard-disabled-border-color);
|
|
116
116
|
background: var(--nile-textarea-standard-disabled-background-color);
|
|
117
117
|
opacity: 0.5;
|
|
118
118
|
cursor: not-allowed;
|
|
119
|
-
box-shadow:var(--nile-textarea-standard-disabled-box-shadow);
|
|
119
|
+
box-shadow:var(--nile-textarea-standard-disabled-box-shadow);
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
.textarea--standard.textarea--disabled .textarea__control {
|
|
@@ -203,6 +203,39 @@ export const styles = css `
|
|
|
203
203
|
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
|
|
204
204
|
0px 0px 0px 4px rgba(240, 68, 56, 0.24);
|
|
205
205
|
}
|
|
206
|
+
|
|
207
|
+
.input__non-printable {
|
|
208
|
+
border-radius: 4px;
|
|
209
|
+
max-width: 400px;
|
|
210
|
+
background-color: var(--nile-colors-white-base);
|
|
211
|
+
border: 1px solid var(--nile-colors-red-500);
|
|
212
|
+
color: var(--nile-colors-red-500);
|
|
213
|
+
padding: 10px;
|
|
214
|
+
font-size: 12px;
|
|
215
|
+
max-height: 300px;
|
|
216
|
+
overflow-y: scroll;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.input__remove-non-printable {
|
|
220
|
+
color: var(--nile-colors-red-500);
|
|
221
|
+
margin-left: 10px;
|
|
222
|
+
font-size: 14px;
|
|
223
|
+
color: var(--nile-colors-dark-900);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.input__srtiked-text-container {
|
|
227
|
+
margin-top: 4px;
|
|
228
|
+
color: var(--nile-colors-dark-900);
|
|
229
|
+
word-wrap: break-all;
|
|
230
|
+
line-height: 16px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.input__srtiked-text {
|
|
234
|
+
text-decoration: line-through;
|
|
235
|
+
text-decoration-color: var(--nile-colors-white-base);
|
|
236
|
+
color: var(--nile-colors-white-base);
|
|
237
|
+
background-color: var(--nile-colors-red-500);
|
|
238
|
+
}
|
|
206
239
|
`;
|
|
207
240
|
export default [styles];
|
|
208
241
|
//# sourceMappingURL=nile-textarea.css.js.map
|