@nuralyui/input 0.0.2 → 0.0.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/input.component.d.ts.map +1 -1
- package/input.component.js +0 -1
- package/input.component.js.map +1 -1
- package/input.style.d.ts.map +1 -1
- package/input.style.js +4 -0
- package/input.style.js.map +1 -1
- package/package.json +1 -1
package/input.component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"AACA;;;;GAIG;;AAEH,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAC,UAAU,EAAE,WAAW,EAAE,UAAU,EAAe,MAAM,qBAAqB,CAAC;AAGtF,qBACa,cAAe,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"AACA;;;;GAIG;;AAEH,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAC,UAAU,EAAE,WAAW,EAAE,UAAU,EAAe,MAAM,qBAAqB,CAAC;AAGtF,qBACa,cAAe,SAAQ,UAAU;IAG5C,QAAQ,UAAS;IAGjB,KAAK,cAAuB;IAG5B,KAAK,SAAgB;IAGrB,IAAI,aAAqB;IAGzB,IAAI,aAAmB;IAGvB,IAAI,EAAG,MAAM,CAAC;IAGd,GAAG,EAAG,MAAM,CAAC;IAGb,GAAG,EAAG,MAAM,CAAC;IAGb,WAAW,SAAgB;IAG3B,YAAY,SAAS;IAGrB,QAAQ,UAAS;IAGjB,SAAS,SAAgB;IAGzB,KAAK,EAAG,gBAAgB,CAAC;IAEhB,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAO7D,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,WAAW;IAQnB,mBAAmB;IAKV,MAAM;IAwEf,OAAgB,MAAM,4BAAU;CACjC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;IAED,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,UAAU,EACN,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAC7E,OAAO,CAAC,cAAc,CAAC,CAAC;SAC7B;KACF;CACF"}
|
package/input.component.js
CHANGED
|
@@ -17,7 +17,6 @@ import { EMPTY_STRING } from './input.constant.js';
|
|
|
17
17
|
import { choose } from 'lit/directives/choose.js';
|
|
18
18
|
let HyInputElement = class HyInputElement extends LitElement {
|
|
19
19
|
constructor() {
|
|
20
|
-
// W3C standards
|
|
21
20
|
super(...arguments);
|
|
22
21
|
this.disabled = false;
|
|
23
22
|
this.state = "default" /* INPUT_STATE.Default */;
|
package/input.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './input.style.js';\nimport {INPUT_TYPE, INPUT_STATE, INPUT_SIZE, EMPTY_STRING} from './input.constant.js';\nimport {choose} from 'lit/directives/choose.js';\n\n@customElement('hy-input')\nexport class HyInputElement extends LitElement {\n // W3C standards\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({type: String, reflect: true})\n state = INPUT_STATE.Default;\n\n @property({type: String})\n value = EMPTY_STRING;\n\n @property({type: String})\n size = INPUT_SIZE.Medium;\n\n @property({reflect: true})\n type = INPUT_TYPE.TEXT;\n\n @property({type: String})\n step!: string;\n\n @property({type: String})\n min!: string;\n\n @property({type: String})\n max!: string;\n\n @property({type: String})\n placeholder = EMPTY_STRING;\n\n @property({type: String})\n autocomplete = 'off';\n\n @property()\n withCopy = false;\n\n @state()\n inputType = EMPTY_STRING;\n\n @query('#input')\n input!: HTMLInputElement;\n\n override willUpdate(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('type')) {\n this.inputType = this.type;\n if (this.inputType == INPUT_TYPE.NUMBER) if (this.min && !this.value) this.value = this.min;\n }\n }\n\n private _increment() {\n this.input.stepUp();\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: this.input,\n })\n );\n }\n private _decrement() {\n this.input.stepDown();\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: this.input,\n })\n );\n }\n\n private _valueChange(e: Event) {\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: e.target,\n })\n );\n }\n private handleKeyDown(keyDownEvent: KeyboardEvent) {\n if (keyDownEvent.key === 'Enter') {\n this.dispatchEvent(\n new CustomEvent('enter-pressed', {\n detail: keyDownEvent.target,\n })\n );\n }\n }\n private onCopy() {\n const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n input.select();\n navigator.clipboard.writeText(input.value);\n }\n\n private _focusEvent(e: Event) {\n this.dispatchEvent(\n new CustomEvent('focused', {\n detail: e.target,\n })\n );\n }\n\n _togglePasswordIcon() {\n if (this.inputType == INPUT_TYPE.PASSWORD) this.inputType = INPUT_TYPE.TEXT;\n else if (this.inputType == INPUT_TYPE.TEXT) this.inputType = INPUT_TYPE.PASSWORD;\n }\n\n override render() {\n return html`\n <slot name=\"label\"></slot>\n <div data-size=${this.size} id=\"input-container\">\n <input\n id=\"input\"\n .disabled=${this.disabled}\n .value=${this.value}\n .placeholder=${this.placeholder}\n .step=${this.step ? this.step : nothing}\n .min=${this.min ? this.min : nothing}\n .max=${this.max ? this.max : nothing}\n .type=\"${this.inputType}\"\n .autocomplete=${this.autocomplete}\n @input=${this._valueChange}\n @focus=${this._focusEvent}\n @keydown=${this.handleKeyDown}\n />\n ${this.withCopy\n ? html`<hy-icon\n name=\"copy\"\n type=\"regular\"\n id=\"copy-icon\"\n @click=${!this.disabled ? this.onCopy : nothing}\n ></hy-icon>`\n : nothing}\n ${choose(this.state, [\n [INPUT_STATE.Default, () => undefined],\n [INPUT_STATE.Warning, () => html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`],\n [INPUT_STATE.Error, () => html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`],\n ])}\n ${this.state == INPUT_STATE.Default && this.type == INPUT_TYPE.CALENDAR\n ? html`<hy-icon name=\"calendar\" type=\"regular\" id=\"calendar-icon\"></hy-icon>`\n : nothing}\n ${this.type == INPUT_TYPE.PASSWORD\n ? choose(this.inputType, [\n [\n INPUT_TYPE.TEXT,\n () =>\n html`<hy-icon\n name=\"eye-slash\"\n type=\"regular\"\n id=\"password-icon\"\n @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n ></hy-icon>`,\n ],\n [\n INPUT_TYPE.PASSWORD,\n () =>\n html`<hy-icon\n name=\"eye\"\n type=\"regular\"\n id=\"password-icon\"\n @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n ></hy-icon>`,\n ],\n ])\n : this.type == INPUT_TYPE.NUMBER\n ? html`\n <div id=\"number-icons\">\n ${this.state != INPUT_STATE.Default ? html`<span id=\"icons-separator\">|</span>` : nothing}\n <hy-icon name=\"minus\" @click=${!this.disabled ? this._decrement : nothing}></hy-icon>\n <span id=\"icons-separator\">|</span>\n <hy-icon name=\"plus\" @click=${!this.disabled ? this._increment : nothing}></hy-icon>\n </div>\n `\n : nothing}\n </div>\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n static override styles = styles;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-input': HyInputElement;\n }\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'hy-input':\n | React.DetailedHTMLProps<React.HTMLAttributes<HyInputElement>, HyInputElement>\n | Partial<HyInputElement>;\n }\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './input.style.js';\nimport {INPUT_TYPE, INPUT_STATE, INPUT_SIZE, EMPTY_STRING} from './input.constant.js';\nimport {choose} from 'lit/directives/choose.js';\n\n@customElement('hy-input')\nexport class HyInputElement extends LitElement {\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({type: String, reflect: true})\n state = INPUT_STATE.Default;\n\n @property({type: String})\n value = EMPTY_STRING;\n\n @property({type: String})\n size = INPUT_SIZE.Medium;\n\n @property({reflect: true})\n type = INPUT_TYPE.TEXT;\n\n @property({type: String})\n step!: string;\n\n @property({type: String})\n min!: string;\n\n @property({type: String})\n max!: string;\n\n @property({type: String})\n placeholder = EMPTY_STRING;\n\n @property({type: String})\n autocomplete = 'off';\n\n @property()\n withCopy = false;\n\n @state()\n inputType = EMPTY_STRING;\n\n @query('#input')\n input!: HTMLInputElement;\n\n override willUpdate(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('type')) {\n this.inputType = this.type;\n if (this.inputType == INPUT_TYPE.NUMBER) if (this.min && !this.value) this.value = this.min;\n }\n }\n\n private _increment() {\n this.input.stepUp();\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: this.input,\n })\n );\n }\n private _decrement() {\n this.input.stepDown();\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: this.input,\n })\n );\n }\n\n private _valueChange(e: Event) {\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: e.target,\n })\n );\n }\n private handleKeyDown(keyDownEvent: KeyboardEvent) {\n if (keyDownEvent.key === 'Enter') {\n this.dispatchEvent(\n new CustomEvent('enter-pressed', {\n detail: keyDownEvent.target,\n })\n );\n }\n }\n private onCopy() {\n const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n input.select();\n navigator.clipboard.writeText(input.value);\n }\n\n private _focusEvent(e: Event) {\n this.dispatchEvent(\n new CustomEvent('focused', {\n detail: e.target,\n })\n );\n }\n\n _togglePasswordIcon() {\n if (this.inputType == INPUT_TYPE.PASSWORD) this.inputType = INPUT_TYPE.TEXT;\n else if (this.inputType == INPUT_TYPE.TEXT) this.inputType = INPUT_TYPE.PASSWORD;\n }\n\n override render() {\n return html`\n <slot name=\"label\"></slot>\n <div data-size=${this.size} id=\"input-container\">\n <input\n id=\"input\"\n .disabled=${this.disabled}\n .value=${this.value}\n .placeholder=${this.placeholder}\n .step=${this.step ? this.step : nothing}\n .min=${this.min ? this.min : nothing}\n .max=${this.max ? this.max : nothing}\n .type=\"${this.inputType}\"\n .autocomplete=${this.autocomplete}\n @input=${this._valueChange}\n @focus=${this._focusEvent}\n @keydown=${this.handleKeyDown}\n />\n ${this.withCopy\n ? html`<hy-icon\n name=\"copy\"\n type=\"regular\"\n id=\"copy-icon\"\n @click=${!this.disabled ? this.onCopy : nothing}\n ></hy-icon>`\n : nothing}\n ${choose(this.state, [\n [INPUT_STATE.Default, () => undefined],\n [INPUT_STATE.Warning, () => html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`],\n [INPUT_STATE.Error, () => html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`],\n ])}\n ${this.state == INPUT_STATE.Default && this.type == INPUT_TYPE.CALENDAR\n ? html`<hy-icon name=\"calendar\" type=\"regular\" id=\"calendar-icon\"></hy-icon>`\n : nothing}\n ${this.type == INPUT_TYPE.PASSWORD\n ? choose(this.inputType, [\n [\n INPUT_TYPE.TEXT,\n () =>\n html`<hy-icon\n name=\"eye-slash\"\n type=\"regular\"\n id=\"password-icon\"\n @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n ></hy-icon>`,\n ],\n [\n INPUT_TYPE.PASSWORD,\n () =>\n html`<hy-icon\n name=\"eye\"\n type=\"regular\"\n id=\"password-icon\"\n @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n ></hy-icon>`,\n ],\n ])\n : this.type == INPUT_TYPE.NUMBER\n ? html`\n <div id=\"number-icons\">\n ${this.state != INPUT_STATE.Default ? html`<span id=\"icons-separator\">|</span>` : nothing}\n <hy-icon name=\"minus\" @click=${!this.disabled ? this._decrement : nothing}></hy-icon>\n <span id=\"icons-separator\">|</span>\n <hy-icon name=\"plus\" @click=${!this.disabled ? this._increment : nothing}></hy-icon>\n </div>\n `\n : nothing}\n </div>\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n static override styles = styles;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-input': HyInputElement;\n }\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'hy-input':\n | React.DetailedHTMLProps<React.HTMLAttributes<HyInputElement>, HyInputElement>\n | Partial<HyInputElement>;\n }\n }\n}"]}
|
package/input.style.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AA2MA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}
|
package/input.style.js
CHANGED
|
@@ -132,6 +132,10 @@ const inputStyle = css `
|
|
|
132
132
|
border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));
|
|
133
133
|
border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));
|
|
134
134
|
border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius));
|
|
135
|
+
border-top-left-radius:var(--hybrid-input-border-top-left-radius,var(--hybrid-input-local-border-top-left-radius)) ;
|
|
136
|
+
border-top-right-radius: var(--hybrid-input-border-top-right-radius,var(--hybrid-input-local-border-top-right-radius));
|
|
137
|
+
border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius,var(--hybrid-input-local-border-bottom-left-radius));
|
|
138
|
+
border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius,var(--hybrid-input-local-border-bottom-right-radius));
|
|
135
139
|
display: flex;
|
|
136
140
|
position: relative;
|
|
137
141
|
}
|
package/input.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AAEpD,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KrB,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './variables.style.js';\n\nconst inputStyle = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n\n :host > #input-container,\n #input-container > input {\n background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));\n }\n\n :host([disabled]) > #input-container,\n :host([disabled]) > #input-container > input {\n background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));\n cursor: not-allowed;\n }\n\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n ::placeholder {\n color: var(--hybrid-input-placeholder-color,var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size,var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));\n }\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));\n }\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left,var(--hybrid-input-local-password-icon-padding-left,));\n padding-right: var(--hybrid-input-password-icon-padding-right,var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));\n }\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right,var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color,var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width,var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right,var(--hybrid-input-local-number-icons-container-padding-right));\n }\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color,var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left,var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right,var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width,var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height,var(--hybrid-input-local-number-icons-height));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));\n }\n\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left,var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color,var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color,var(--hybrid-input-local-warning-helper-text-color));\n }\n\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n #icons-separator {\n color: var(--hybrid-input-number-icons-sperator-color,var(--hybrid-input-local-number-icons-sperator-color));\n padding-bottom: var(--hybrid-input-number-icons-sperator-padding-bottom,var(--hybrid-input-local-number-icons-sperator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-sperator-padding-left,var(--hybrid-input-local-number-icons-sperator-padding-left));\n padding-right: var(--hybrid-input-number-icons-sperator-padding-right,var(--hybrid-input-local-number-icons-sperator-padding-right));\n }\n\n #input-container {\n border-bottom: var(--hybrid-input-border-bottom,var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top,var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));\n border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius)); \n display: flex;\n position: relative;\n }\n\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom,var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top,var(--hybrid-input-local-disabled-border-top));\n border-left:var(--hybrid-input-disabled-border-left,var(--hybrid-input-local-disabled-border-left));\n border-right:var(--hybrid-input-disabled-border-right,var(--hybrid-input-local-disabled-border-right));\n opacity:0.6;\n }\n\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color,var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n font-size:var(--hybrid-input-font-size,var(--hybrid-input-local-font-size));\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color,var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size,var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom,var(--hybrid-input-local-label-padding-bottom));\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color,var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size,var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top,var(--hybrid-input-local-helper-text-padding-top));\n }\n\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));\n }\n`;\n\nconst sizeInputStyle = css`\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top,var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom,var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left,var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right,var(--hybrid-input-local-large-padding-right));\n }\n\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top,var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom,var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left,var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right,var(--hybrid-input-local-medium-padding-right));\n }\n\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top,var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom,var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left,var(--hybrid-input-local-small-padding-left,));\n padding-right: var(--hybrid-input-small-padding-right,var(--hybrid-input-local-small-padding-right));\n }\n`;\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
|
|
1
|
+
{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLrB,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './variables.style.js';\n\nconst inputStyle = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n\n :host > #input-container,\n #input-container > input {\n background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));\n }\n\n :host([disabled]) > #input-container,\n :host([disabled]) > #input-container > input {\n background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));\n cursor: not-allowed;\n }\n\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n ::placeholder {\n color: var(--hybrid-input-placeholder-color,var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size,var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));\n }\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));\n }\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left,var(--hybrid-input-local-password-icon-padding-left,));\n padding-right: var(--hybrid-input-password-icon-padding-right,var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));\n }\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right,var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color,var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width,var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right,var(--hybrid-input-local-number-icons-container-padding-right));\n }\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color,var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left,var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right,var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width,var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height,var(--hybrid-input-local-number-icons-height));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));\n }\n\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left,var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color,var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color,var(--hybrid-input-local-warning-helper-text-color));\n }\n\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n #icons-separator {\n color: var(--hybrid-input-number-icons-sperator-color,var(--hybrid-input-local-number-icons-sperator-color));\n padding-bottom: var(--hybrid-input-number-icons-sperator-padding-bottom,var(--hybrid-input-local-number-icons-sperator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-sperator-padding-left,var(--hybrid-input-local-number-icons-sperator-padding-left));\n padding-right: var(--hybrid-input-number-icons-sperator-padding-right,var(--hybrid-input-local-number-icons-sperator-padding-right));\n }\n\n #input-container {\n border-bottom: var(--hybrid-input-border-bottom,var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top,var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));\n border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius)); \n border-top-left-radius:var(--hybrid-input-border-top-left-radius,var(--hybrid-input-local-border-top-left-radius)) ;\n border-top-right-radius: var(--hybrid-input-border-top-right-radius,var(--hybrid-input-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius,var(--hybrid-input-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius,var(--hybrid-input-local-border-bottom-right-radius));\n display: flex;\n position: relative;\n }\n\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom,var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top,var(--hybrid-input-local-disabled-border-top));\n border-left:var(--hybrid-input-disabled-border-left,var(--hybrid-input-local-disabled-border-left));\n border-right:var(--hybrid-input-disabled-border-right,var(--hybrid-input-local-disabled-border-right));\n opacity:0.6;\n }\n\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color,var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n font-size:var(--hybrid-input-font-size,var(--hybrid-input-local-font-size));\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color,var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size,var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom,var(--hybrid-input-local-label-padding-bottom));\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color,var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size,var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top,var(--hybrid-input-local-helper-text-padding-top));\n }\n\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));\n }\n`;\n\nconst sizeInputStyle = css`\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top,var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom,var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left,var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right,var(--hybrid-input-local-large-padding-right));\n }\n\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top,var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom,var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left,var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right,var(--hybrid-input-local-medium-padding-right));\n }\n\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top,var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom,var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left,var(--hybrid-input-local-small-padding-left,));\n padding-right: var(--hybrid-input-small-padding-right,var(--hybrid-input-local-small-padding-right));\n }\n`;\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
|