@nuralyui/input 0.0.1 → 0.0.2
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 +1 -0
- package/input.component.d.ts.map +1 -1
- package/input.component.js +20 -15
- package/input.component.js.map +1 -1
- package/package.json +1 -1
- package/variables.style.js +3 -3
- package/variables.style.js.map +1 -1
package/input.component.d.ts
CHANGED
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;IAI5C,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,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;
|
|
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;IAI5C,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
|
@@ -25,6 +25,7 @@ let HyInputElement = class HyInputElement extends LitElement {
|
|
|
25
25
|
this.size = "medium" /* INPUT_SIZE.Medium */;
|
|
26
26
|
this.type = "text" /* INPUT_TYPE.TEXT */;
|
|
27
27
|
this.placeholder = EMPTY_STRING;
|
|
28
|
+
this.autocomplete = 'off';
|
|
28
29
|
this.withCopy = false;
|
|
29
30
|
this.inputType = EMPTY_STRING;
|
|
30
31
|
}
|
|
@@ -89,17 +90,18 @@ let HyInputElement = class HyInputElement extends LitElement {
|
|
|
89
90
|
.min=${this.min ? this.min : nothing}
|
|
90
91
|
.max=${this.max ? this.max : nothing}
|
|
91
92
|
.type="${this.inputType}"
|
|
93
|
+
.autocomplete=${this.autocomplete}
|
|
92
94
|
@input=${this._valueChange}
|
|
93
95
|
@focus=${this._focusEvent}
|
|
94
96
|
@keydown=${this.handleKeyDown}
|
|
95
97
|
/>
|
|
96
98
|
${this.withCopy
|
|
97
99
|
? html `<hy-icon
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
100
|
+
name="copy"
|
|
101
|
+
type="regular"
|
|
102
|
+
id="copy-icon"
|
|
103
|
+
@click=${!this.disabled ? this.onCopy : nothing}
|
|
104
|
+
></hy-icon>`
|
|
103
105
|
: nothing}
|
|
104
106
|
${choose(this.state, [
|
|
105
107
|
["default" /* INPUT_STATE.Default */, () => undefined],
|
|
@@ -114,20 +116,20 @@ let HyInputElement = class HyInputElement extends LitElement {
|
|
|
114
116
|
[
|
|
115
117
|
"text" /* INPUT_TYPE.TEXT */,
|
|
116
118
|
() => html `<hy-icon
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
119
|
+
name="eye-slash"
|
|
120
|
+
type="regular"
|
|
121
|
+
id="password-icon"
|
|
122
|
+
@click=${!this.disabled ? this._togglePasswordIcon : nothing}
|
|
123
|
+
></hy-icon>`,
|
|
122
124
|
],
|
|
123
125
|
[
|
|
124
126
|
"password" /* INPUT_TYPE.PASSWORD */,
|
|
125
127
|
() => html `<hy-icon
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
128
|
+
name="eye"
|
|
129
|
+
type="regular"
|
|
130
|
+
id="password-icon"
|
|
131
|
+
@click=${!this.disabled ? this._togglePasswordIcon : nothing}
|
|
132
|
+
></hy-icon>`,
|
|
131
133
|
],
|
|
132
134
|
])
|
|
133
135
|
: this.type == "number" /* INPUT_TYPE.NUMBER */
|
|
@@ -173,6 +175,9 @@ __decorate([
|
|
|
173
175
|
__decorate([
|
|
174
176
|
property({ type: String })
|
|
175
177
|
], HyInputElement.prototype, "placeholder", void 0);
|
|
178
|
+
__decorate([
|
|
179
|
+
property({ type: String })
|
|
180
|
+
], HyInputElement.prototype, "autocomplete", void 0);
|
|
176
181
|
__decorate([
|
|
177
182
|
property()
|
|
178
183
|
], HyInputElement.prototype, "withCopy", void 0);
|
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()\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\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 @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}\n"]}
|
|
1
|
+
{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAsC,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAGhD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;QACE,gBAAgB;;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,UAAK,uCAAuB;QAG5B,UAAK,GAAG,YAAY,CAAC;QAGrB,SAAI,oCAAqB;QAGzB,SAAI,gCAAmB;QAYvB,gBAAW,GAAG,YAAY,CAAC;QAG3B,iBAAY,GAAG,KAAK,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,cAAS,GAAG,YAAY,CAAC;IAyI3B,CAAC;IApIU,UAAU,CAAC,kBAAkC;QACpD,IAAI,kBAAkB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;YAC3B,IAAI,IAAI,CAAC,SAAS,oCAAqB;gBAAE,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SAC7F;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAC;IACJ,CAAC;IACO,UAAU;QAChB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,CAAC,CAAC,MAAM;SACjB,CAAC,CACH,CAAC;IACJ,CAAC;IACO,aAAa,CAAC,YAA2B;QAC/C,IAAI,YAAY,CAAC,GAAG,KAAK,OAAO,EAAE;YAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;gBAC/B,MAAM,EAAE,YAAY,CAAC,MAAM;aAC5B,CAAC,CACH,CAAC;SACH;IACH,CAAC;IACO,MAAM;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,UAAW,CAAC,cAAc,CAAC,OAAO,CAAsB,CAAC;QAC5E,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;YACzB,MAAM,EAAE,CAAC,CAAC,MAAM;SACjB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,mBAAmB;QACjB,IAAI,IAAI,CAAC,SAAS,wCAAuB;YAAE,IAAI,CAAC,SAAS,+BAAkB,CAAC;aACvE,IAAI,IAAI,CAAC,SAAS,gCAAmB;YAAE,IAAI,CAAC,SAAS,uCAAsB,CAAC;IACnF,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,IAAI;;;sBAGV,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK;yBACJ,IAAI,CAAC,WAAW;kBACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;iBAChC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;iBAC7B,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;mBAC3B,IAAI,CAAC,SAAS;0BACP,IAAI,CAAC,YAAY;mBACxB,IAAI,CAAC,YAAY;mBACjB,IAAI,CAAC,WAAW;qBACd,IAAI,CAAC,aAAa;;UAE7B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA;;;;qBAIK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBACrC;YACZ,CAAC,CAAC,OAAO;UACT,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;YACnB,sCAAsB,GAAG,EAAE,CAAC,SAAS,CAAC;YACtC,sCAAsB,GAAG,EAAE,CAAC,IAAI,CAAA,sDAAsD,CAAC;YACvF,kCAAoB,GAAG,EAAE,CAAC,IAAI,CAAA,+DAA+D,CAAC;SAC/F,CAAC;UACA,IAAI,CAAC,KAAK,uCAAuB,IAAI,IAAI,CAAC,IAAI,wCAAuB;YACrE,CAAC,CAAC,IAAI,CAAA,uEAAuE;YAC7E,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,IAAI,wCAAuB;YAChC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE;gBACvB;;oBAEE,GAAG,EAAE,CACH,IAAI,CAAA;;;;2BAIO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,OAAO;4BAClD;iBACf;gBACD;;oBAEE,GAAG,EAAE,CACH,IAAI,CAAA;;;;2BAIO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,OAAO;4BAClD;iBACf;aACF,CAAC;YACF,CAAC,CAAC,IAAI,CAAC,IAAI,oCAAqB;gBAC9B,CAAC,CAAC,IAAI,CAAA;;kBAEA,IAAI,CAAC,KAAK,uCAAuB,CAAC,CAAC,CAAC,IAAI,CAAA,qCAAqC,CAAC,CAAC,CAAC,OAAO;+CAC1D,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;;8CAE3C,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;;aAE3E;gBACD,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;CAGF,CAAA;AADiB,qBAAM,GAAG,MAAO,CAAA;AAzKhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CACZ;AAG5B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACJ;AAGrB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACA;AAGzB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACX;AAGd;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CACZ;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CACZ;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mDACE;AAG3B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACJ;AAGrB;IADC,QAAQ,EAAE;gDACM;AAGjB;IADC,KAAK,EAAE;iDACiB;AAGzB;IADC,KAAK,CAAC,QAAQ,CAAC;6CACS;AAxCd,cAAc;IAD1B,aAAa,CAAC,UAAU,CAAC;GACb,cAAc,CA8K1B;SA9KY,cAAc","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}"]}
|
package/package.json
CHANGED
package/variables.style.js
CHANGED
|
@@ -3,12 +3,12 @@ export const styleVariables = css `
|
|
|
3
3
|
:host {
|
|
4
4
|
--hybrid-input-local-background-color: #f4f4f4;
|
|
5
5
|
--hybrid-input-local-text-color: #000000;
|
|
6
|
-
--hybrid-input-local-font-family:
|
|
6
|
+
--hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, SFProLocalRange;
|
|
7
7
|
--hybrid-input-local-font-size:13px;
|
|
8
8
|
--hybrid-input-local-label-color: #525252;
|
|
9
9
|
--hybrid-input-local-placeholder-color: #a8a8a8;
|
|
10
|
-
--hybrid-input-local-border-bottom:
|
|
11
|
-
--hybrid-input-local-border-top:
|
|
10
|
+
--hybrid-input-local-border-bottom: 2px solid #a8a8a8;
|
|
11
|
+
--hybrid-input-local-border-top: 2px solid transparent;
|
|
12
12
|
--hybrid-input-local-border-left: 2px solid transparent;
|
|
13
13
|
--hybrid-input-local-border-right: 2px solid transparent;
|
|
14
14
|
--hybrid-input-local-disabled-border-bottom: none;
|
package/variables.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variables.style.js","sourceRoot":"","sources":["../../../src/components/input/variables.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-input-local-background-color: #f4f4f4;\n --hybrid-input-local-text-color: #000000;\n --hybrid-input-local-font-family:
|
|
1
|
+
{"version":3,"file":"variables.style.js","sourceRoot":"","sources":["../../../src/components/input/variables.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-input-local-background-color: #f4f4f4;\n --hybrid-input-local-text-color: #000000;\n --hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-input-local-font-size:13px;\n --hybrid-input-local-label-color: #525252;\n --hybrid-input-local-placeholder-color: #a8a8a8;\n --hybrid-input-local-border-bottom: 2px solid #a8a8a8;\n --hybrid-input-local-border-top: 2px solid transparent;\n --hybrid-input-local-border-left: 2px solid transparent;\n --hybrid-input-local-border-right: 2px solid transparent;\n --hybrid-input-local-disabled-border-bottom: none;\n --hybrid-input-local-disabled-border-top: none;\n --hybrid-input-local-disabled-border-left: none;\n --hybrid-input-local-disabled-border-right: none;\n --hybrid-input-local-focus-border: 2px solid #0f62fe;\n --hybrid-input-local-border-radius: 0px;\n --hybrid-input-local-label-font-size: 13px;\n --hybrid-input-local-helper-text-color: #525252;\n --hybrid-input-local-helper-text-font-size: 13px;\n --hybrid-input-local-placeholder-font-size: 13px;\n --hybrid-input-label-padding-bottom: 5px;\n --hybrid-input-local-helper-text-padding-top: 5px;\n --hybrid-input-local-disabled-background-color: #f4f4f4;\n --hybrid-input-local-disabled-placeholder-color: #c6c6c6;\n --hybrid-input-local-error-helper-text-color: #da1e28;\n --hybrid-input-local-error-border: 2px solid #da1e28;\n --hybrid-input-local-warning-helper-text-color: #161616;\n --hybrid-input-local-disabled-helper-text-color: #c6c6c6;\n --hybrid-input-local-disabled-label-color: #c6c6c6;\n --hybrid-input-local-warning-icon-color: #f0c300;\n --hybrid-input-local-error-icon-color: #da1e28;\n --hybrid-input-local-password-icon-color: #000000;\n --hybrid-input-local-calendar-icon-color: #000000;\n --hybrid-input-local-copy-icon-color: #000000;\n --hybrid-input-local-disabled-icon-opacity: 0.4;\n --hybrid-input-local-number-icons-color: #000000;\n --hybrid-input-local-password-icon-padding-left: 8px;\n --hybrid-input-local-password-icon-padding-right: 8px;\n --hybrid-input-local-number-icons-sperator-color: #e0e0e0;\n --hybrid-input-local-number-icons-sperator-padding-bottom: 4px;\n --hybrid-input-local-number-icons-sperator-padding-left: 5px;\n --hybrid-input-local-number-icons-sperator-padding-right: 5px;\n --hybrid-input-local-copy-icon-padding-right:5px;\n\n --hybrid-input-local-number-icons-container-width: 70px;\n --hybrid-input-local-number-icons-container-padding-left: 5px;\n --hybrid-input-local-number-icons-container-padding-right: 5px;\n --hybrid-input-local-number-icons-width: 12px;\n --hybrid-input-local-number-icons-height: 12px;\n\n --hybrid-input-local-number-icons-padding-left: 4px;\n --hybrid-input-local-number-icons-padding-right: 4px;\n\n --hybrid-input-local-large-padding-top: 10px;\n --hybrid-input-local-large-padding-bottom: 10px;\n --hybrid-input-local-large-padding-left: 9px;\n --hybrid-input-local-large-padding-right: 4px;\n\n --hybrid-input-local-medium-padding-top: 7px;\n --hybrid-input-local-medium-padding-bottom: 7px;\n --hybrid-input-local-medium-padding-left: 9px;\n --hybrid-input-local-medium-padding-right: 4px;\n\n --hybrid-input-local-small-padding-top: 4px;\n --hybrid-input-local-small-padding-bottom: 4px;\n --hybrid-input-local-small-padding-left: 9px;\n --hybrid-input-local-small-padding-right: 4px;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-input-local-background-color: #393939;\n --hybrid-input-local-focus-border: 2px solid #ffffff;\n --hybrid-input-local-text-color: #ffffff;\n --hybrid-input-local-error-border: 2px solid #fa4d56;\n --hybrid-input-local-error-helper-text-color: #ffb3b8;\n --hybrid-input-local-disabled-background-color: #393939;\n --hybrid-input-local-disabled-placeholder-color: #6f6f6f;\n --hybrid-input-local-disabled-helper-text-color: #6f6f6f;\n --hybrid-input-local-disabled-label-color: #6f6f6f;\n --hybrid-input-local-warning-icon-color: #f0c300;\n --hybrid-input-local-error-icon-color: #da1e28;\n --hybrid-input-local-password-icon-color: #ffffff;\n --hybrid-input-local-number-icons-color: #ffffff;\n --hybrid-input-local-label-color: #c6c6c6;\n --hybrid-input-local-helper-text-color: #c6c6c6;\n --hybrid-input-local-number-icon-sperator-color: #525252;\n --hybrid-input-local-calendar-icon-color: #ffffff;\n --hybrid-input-local-copy-icon-color: #ffffff;\n }\n }\n`;\n"]}
|