@digital-realty/ix-textbox 2.3.8 → 2.4.1

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.
Files changed (2) hide show
  1. package/dist/ix-textbox.min.js +23 -23
  2. package/package.json +12 -18
@@ -1,4 +1,4 @@
1
- import{__decorate}from"tslib";import{LitElement,html,nothing}from"lit";import{literal,html as html$1}from"lit/static-html.js";import{query,property,state}from"lit/decorators.js";import"@material/web/textfield/filled-text-field.js";import"@material/web/textfield/outlined-text-field.js";import{AriaForwardMixin}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread}from"@open-wc/lit-helpers";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-phone-input/ix-phone-input.js";let IxTextboxBase=AriaForwardMixin(LitElement);class IxTextbox extends IxTextboxBase{constructor(){super(...arguments),this.filled=!1,this.disabled=!1,this.error=!1,this.errorText="",this.label="",this.required=!1,this.value="",this.name="",this.prefixText="",this.suffixText="",this.leadingIcon="",this.trailingIcon="",this.searchEnabled=!1,this.searchResultCount=0,this.searchResultIndex=0,this.supportingText="",this.textDirection="",this.rows=2,this.inputMode="",this.max="",this.maxLength=-1,this.min="",this.minLength=-1,this.pattern="",this.placeholder="",this.readOnly=!1,this.multiple=!1,this.step="",this.type="text",this.autocomplete="",this.hasText=!1,this.handleKeydownHandler=void 0,this.resizeTextArea=()=>{this.textarea&&(this.textarea.style.height="auto",0<this.textarea.scrollHeight)&&(this.textarea.style.height=this.textarea.scrollHeight+"px")},this.onInput=t=>{t=t.target;this.hasText=0<t.value.length,this.dispatchEvent(new CustomEvent("search-text-change",{detail:{searchText:t.value}}))},this.clearInput=()=>{this.value="",this.hasText=!1,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),"textarea"===this.type&&(this.addEventListener("input",this.resizeTextArea),this.addEventListener("keydown",this.resizeTextArea),window.addEventListener("load",this.resizeTextArea))}async firstUpdated(){var t;"textarea"===this.type&&(this.component instanceof LitElement&&await this.component.updateComplete,await this.updateComplete,this.textarea=null==(t=null==(t=this.component)?void 0:t.shadowRoot)?void 0:t.querySelector("textarea"),this.resizeTextArea())}disconnectedCallback(){super.disconnectedCallback(),this.handleKeydownHandler&&(this.removeEventListener("input",this.resizeTextArea),this.removeEventListener("keydown",this.resizeTextArea),window.removeEventListener("load",this.resizeTextArea))}focus(){this.component.focus()}createRenderRoot(){return this}renderStyles(){return html`
1
+ import{__decorate as t}from"tslib";import{LitElement as e,html as i,nothing as o}from"lit";import{literal as r,html as s}from"lit/static-html.js";import{query as n,property as l,state as a}from"lit/decorators.js";import"@material/web/textfield/filled-text-field.js";import"@material/web/textfield/outlined-text-field.js";import{AriaForwardMixin as d}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread as h}from"@open-wc/lit-helpers";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-phone-input/ix-phone-input.js";const p=d(e);class c extends p{constructor(){super(...arguments),this.filled=!1,this.disabled=!1,this.error=!1,this.errorText="",this.label="",this.required=!1,this.value="",this.name="",this.prefixText="",this.suffixText="",this.leadingIcon="",this.trailingIcon="",this.searchEnabled=!1,this.searchResultCount=0,this.searchResultIndex=0,this.supportingText="",this.textDirection="",this.rows=2,this.inputMode="",this.max="",this.maxLength=-1,this.min="",this.minLength=-1,this.pattern="",this.placeholder="",this.readOnly=!1,this.multiple=!1,this.step="",this.type="text",this.autocomplete="",this.hasText=!1,this.handleKeydownHandler=void 0,this.resizeTextArea=()=>{this.textarea&&(this.textarea.style.height="auto",this.textarea.scrollHeight>0&&(this.textarea.style.height=`${this.textarea.scrollHeight}px`))},this.onInput=t=>{const e=t.target;this.hasText=e.value.length>0,this.dispatchEvent(new CustomEvent("search-text-change",{detail:{searchText:e.value}}))},this.clearInput=()=>{this.value="",this.hasText=!1,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),"textarea"===this.type&&(this.addEventListener("input",this.resizeTextArea),this.addEventListener("keydown",this.resizeTextArea),window.addEventListener("load",this.resizeTextArea))}async firstUpdated(){var t,i;"textarea"===this.type&&(this.component instanceof e&&await this.component.updateComplete,await this.updateComplete,this.textarea=null===(i=null===(t=this.component)||void 0===t?void 0:t.shadowRoot)||void 0===i?void 0:i.querySelector("textarea"),this.resizeTextArea())}disconnectedCallback(){super.disconnectedCallback(),this.handleKeydownHandler&&(this.removeEventListener("input",this.resizeTextArea),this.removeEventListener("keydown",this.resizeTextArea),window.removeEventListener("load",this.resizeTextArea))}focus(){this.component.focus()}createRenderRoot(){return this}renderStyles(){return i`
2
2
  <style>
3
3
  [error] {
4
4
  --md-outlined-field-outline-width: 2px;
@@ -32,7 +32,7 @@ import{__decorate}from"tslib";import{LitElement,html,nothing}from"lit";import{li
32
32
  }
33
33
  }
34
34
  </style>
35
- `}onSearchNavigation(t,e){this.dispatchEvent(new CustomEvent("search-navigation",{detail:{direction:e},bubbles:!0,composed:!0}))}setSearchResultText(){return 0===this.searchResultCount||0===this.searchResultIndex?this.searchResultCount+" results":`${this.searchResultIndex}/${this.searchResultCount} results`}render(){var t,e;return"tel"===this.type?html`<ix-phone-input
35
+ `}onSearchNavigation(t,e){this.dispatchEvent(new CustomEvent("search-navigation",{detail:{direction:e},bubbles:!0,composed:!0}))}setSearchResultText(){return 0===this.searchResultCount||0===this.searchResultIndex?`${this.searchResultCount} results`:`${this.searchResultIndex}/${this.searchResultCount} results`}render(){var t,e;if("tel"===this.type)return i`<ix-phone-input
36
36
  class="textfield"
37
37
  style="display: block;"
38
38
  ?disabled=${this.disabled}
@@ -43,11 +43,11 @@ import{__decorate}from"tslib";import{LitElement,html,nothing}from"lit";import{li
43
43
  type=${this.type}
44
44
  label=${this.label}
45
45
  name=${this.name}
46
- .value=${null!=(e=this.value)?e:""}
47
- ${spread(this.ariaAttributes)}
48
- ></ix-phone-input>`:(e=this.filled?literal`md-filled-text-field`:literal`md-outlined-text-field`,html$1`
46
+ .value=${null!==(t=this.value)&&void 0!==t?t:""}
47
+ ${h(this.ariaAttributes)}
48
+ ></ix-phone-input>`;const n=this.filled?r`md-filled-text-field`:r`md-outlined-text-field`;return s`
49
49
  ${this.renderStyles()}
50
- <${e}
50
+ <${n}
51
51
  class="textfield"
52
52
  style="display: block;"
53
53
  ?disabled=${this.disabled}
@@ -55,10 +55,10 @@ import{__decorate}from"tslib";import{LitElement,html,nothing}from"lit";import{li
55
55
  ?error=${this.error}
56
56
  ?multipule=${this.multiple}
57
57
  ?readOnly=${this.readOnly}
58
- ?has-leading-icon=${0<this.leadingIcon.length}
59
- ?has-trailing-icon=${0<this.trailingIcon.length}
60
- step=${this.step||nothing}
61
- autocomplete=${this.autocomplete||nothing}
58
+ ?has-leading-icon=${this.leadingIcon.length>0}
59
+ ?has-trailing-icon=${this.trailingIcon.length>0}
60
+ step=${this.step||o}
61
+ autocomplete=${this.autocomplete||o}
62
62
  error-text=${this.errorText}
63
63
  placeholder=${this.placeholder}
64
64
  text-direction=${this.textDirection}
@@ -75,18 +75,18 @@ import{__decorate}from"tslib";import{LitElement,html,nothing}from"lit";import{li
75
75
  type=${this.type}
76
76
  label=${this.label}
77
77
  name=${this.name}
78
- .value=${null!=(t=this.value)?t:""}
78
+ .value=${null!==(e=this.value)&&void 0!==e?e:""}
79
79
  @input=${this.onInput}
80
- ${spread(this.ariaAttributes)}
80
+ ${h(this.ariaAttributes)}
81
81
  >
82
- ${this.leadingIcon?html`<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`:nothing}
83
- ${this.searchEnabled&&this.hasText&&1<this.value.length?html`<div
82
+ ${this.leadingIcon?i`<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`:o}
83
+ ${this.searchEnabled&&this.hasText&&this.value.length>1?i`<div
84
84
  style="font-size: 14px; align-items: center;"
85
85
  slot="trailing-icon"
86
86
  >
87
87
  ${this.setSearchResultText()}
88
- </div>`:nothing}
89
- ${this.searchEnabled&&0<this.searchResultCount?html`<ix-icon
88
+ </div>`:o}
89
+ ${this.searchEnabled&&this.searchResultCount>0?i`<ix-icon
90
90
  style="padding: 0px 3px; align-items: center; cursor: pointer;"
91
91
  slot="trailing-icon"
92
92
  @click=${t=>this.onSearchNavigation(t,"previous")}
@@ -98,15 +98,15 @@ import{__decorate}from"tslib";import{LitElement,html,nothing}from"lit";import{li
98
98
  style="padding: 0px 3px; align-items: center; cursor: pointer;"
99
99
  @click=${t=>this.onSearchNavigation(t,"next")}
100
100
  >chevron_right</ix-icon
101
- >`:nothing}
102
- ${this.hasText?html`<ix-icon
101
+ >`:o}
102
+ ${this.hasText?i`<ix-icon
103
103
  style="padding: 0px 3px; align-items: center; cursor: pointer;"
104
104
  slot="trailing-icon"
105
105
  @click=${this.clearInput}
106
106
  >close</ix-icon
107
- >`:nothing}
108
- ${this.trailingIcon?html`<ix-icon slot="trailing-icon"
107
+ >`:o}
108
+ ${this.trailingIcon?i`<ix-icon slot="trailing-icon"
109
109
  >${this.trailingIcon}</ix-icon
110
- >`:nothing}
111
- </${e}>
112
- `)}}__decorate([query(".textfield")],IxTextbox.prototype,"component",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTextbox.prototype,"filled",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTextbox.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTextbox.prototype,"error",void 0),__decorate([property({attribute:"error-text"})],IxTextbox.prototype,"errorText",void 0),__decorate([property()],IxTextbox.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTextbox.prototype,"required",void 0),__decorate([property()],IxTextbox.prototype,"value",void 0),__decorate([property()],IxTextbox.prototype,"name",void 0),__decorate([property({attribute:"prefix-text"})],IxTextbox.prototype,"prefixText",void 0),__decorate([property({attribute:"suffix-text"})],IxTextbox.prototype,"suffixText",void 0),__decorate([property({attribute:"leading-icon"})],IxTextbox.prototype,"leadingIcon",void 0),__decorate([property({attribute:"trailing-icon"})],IxTextbox.prototype,"trailingIcon",void 0),__decorate([property({type:Boolean})],IxTextbox.prototype,"searchEnabled",void 0),__decorate([property({type:Number})],IxTextbox.prototype,"searchResultCount",void 0),__decorate([property({type:Number})],IxTextbox.prototype,"searchResultIndex",void 0),__decorate([property({attribute:"supporting-text"})],IxTextbox.prototype,"supportingText",void 0),__decorate([property({attribute:"text-direction"})],IxTextbox.prototype,"textDirection",void 0),__decorate([property({type:Number})],IxTextbox.prototype,"rows",void 0),__decorate([property({reflect:!0})],IxTextbox.prototype,"inputMode",void 0),__decorate([property()],IxTextbox.prototype,"max",void 0),__decorate([property({type:Number})],IxTextbox.prototype,"maxLength",void 0),__decorate([property()],IxTextbox.prototype,"min",void 0),__decorate([property({type:Number})],IxTextbox.prototype,"minLength",void 0),__decorate([property()],IxTextbox.prototype,"pattern",void 0),__decorate([property({reflect:!0})],IxTextbox.prototype,"placeholder",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTextbox.prototype,"readOnly",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTextbox.prototype,"multiple",void 0),__decorate([property()],IxTextbox.prototype,"step",void 0),__decorate([property({reflect:!0})],IxTextbox.prototype,"type",void 0),__decorate([property({reflect:!0})],IxTextbox.prototype,"autocomplete",void 0),__decorate([state()],IxTextbox.prototype,"hasText",void 0),customElements.define("ix-textbox",IxTextbox);
110
+ >`:o}
111
+ </${n}>
112
+ `}}t([n(".textfield")],c.prototype,"component",void 0),t([l({type:Boolean,reflect:!0})],c.prototype,"filled",void 0),t([l({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([l({type:Boolean,reflect:!0})],c.prototype,"error",void 0),t([l({attribute:"error-text"})],c.prototype,"errorText",void 0),t([l()],c.prototype,"label",void 0),t([l({type:Boolean,reflect:!0})],c.prototype,"required",void 0),t([l()],c.prototype,"value",void 0),t([l()],c.prototype,"name",void 0),t([l({attribute:"prefix-text"})],c.prototype,"prefixText",void 0),t([l({attribute:"suffix-text"})],c.prototype,"suffixText",void 0),t([l({attribute:"leading-icon"})],c.prototype,"leadingIcon",void 0),t([l({attribute:"trailing-icon"})],c.prototype,"trailingIcon",void 0),t([l({type:Boolean})],c.prototype,"searchEnabled",void 0),t([l({type:Number})],c.prototype,"searchResultCount",void 0),t([l({type:Number})],c.prototype,"searchResultIndex",void 0),t([l({attribute:"supporting-text"})],c.prototype,"supportingText",void 0),t([l({attribute:"text-direction"})],c.prototype,"textDirection",void 0),t([l({type:Number})],c.prototype,"rows",void 0),t([l({reflect:!0})],c.prototype,"inputMode",void 0),t([l()],c.prototype,"max",void 0),t([l({type:Number})],c.prototype,"maxLength",void 0),t([l()],c.prototype,"min",void 0),t([l({type:Number})],c.prototype,"minLength",void 0),t([l()],c.prototype,"pattern",void 0),t([l({reflect:!0})],c.prototype,"placeholder",void 0),t([l({type:Boolean,reflect:!0})],c.prototype,"readOnly",void 0),t([l({type:Boolean,reflect:!0})],c.prototype,"multiple",void 0),t([l()],c.prototype,"step",void 0),t([l({reflect:!0})],c.prototype,"type",void 0),t([l({reflect:!0})],c.prototype,"autocomplete",void 0),t([a()],c.prototype,"hasText",void 0),customElements.define("ix-textbox",c);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-realty/ix-textbox",
3
- "version": "2.3.8",
3
+ "version": "2.4.1",
4
4
  "description": "Webcomponent ix-textbox following open-wc recommendations",
5
5
  "license": "MIT",
6
6
  "author": "Digital Realty",
@@ -25,16 +25,16 @@
25
25
  "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
26
26
  "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
27
27
  "prepublish": "tsc && npm run analyze -- --exclude dist",
28
- "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
29
- "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
28
+ "lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
29
+ "format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
30
30
  "test": "tsc && wtr --coverage",
31
31
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
32
32
  "ts:watch": "tsc --watch --preserveWatchOutput"
33
33
  },
34
34
  "dependencies": {
35
- "@digital-realty/ix-icon": "^1.2.4",
36
- "@digital-realty/ix-phone-input": "^2.3.4",
37
- "@digital-realty/ix-shared-fns": "^1.0.4",
35
+ "@digital-realty/ix-icon": "^1.3.1",
36
+ "@digital-realty/ix-phone-input": "^2.4.1",
37
+ "@digital-realty/ix-shared-fns": "^1.1.1",
38
38
  "@lit/react": "^1.0.2",
39
39
  "@material/web": "2.4.0",
40
40
  "@open-wc/lit-helpers": "^0.7.0",
@@ -43,23 +43,21 @@
43
43
  },
44
44
  "devDependencies": {
45
45
  "@custom-elements-manifest/analyzer": "^0.4.17",
46
- "@open-wc/eslint-config": "^9.2.1",
47
46
  "@open-wc/testing": "^3.1.6",
47
+ "@rollup/plugin-terser": "^1.0.0",
48
48
  "@types/react": "^18.2.22",
49
- "@typescript-eslint/eslint-plugin": "^5.48.0",
50
- "@typescript-eslint/parser": "^5.48.0",
49
+ "@typescript-eslint/eslint-plugin": "^8.58.2",
50
+ "@typescript-eslint/parser": "^8.58.2",
51
51
  "@web/dev-server": "^0.4.6",
52
52
  "@web/test-runner": "^0.20.2",
53
- "concurrently": "^9.1.0",
54
- "eslint": "^8.31.0",
53
+ "concurrently": "^9.2.1",
54
+ "eslint": "^9.39.4",
55
55
  "eslint-config-prettier": "^8.3.0",
56
56
  "husky": "^4.3.8",
57
57
  "lint-staged": "^10.5.4",
58
58
  "prettier": "^2.4.1",
59
59
  "rollup": "^4.29.1",
60
- "rollup-plugin-minify-html-literals": "^1.2.6",
61
60
  "rollup-plugin-summary": "^2.0.0",
62
- "rollup-plugin-uglify": "^6.0.4",
63
61
  "sinon": "^16.1.3",
64
62
  "tslib": "^2.3.1",
65
63
  "typescript": "^4.5.2"
@@ -68,10 +66,6 @@
68
66
  "eslintConfig": {
69
67
  "root": true,
70
68
  "parser": "@typescript-eslint/parser",
71
- "extends": [
72
- "@open-wc",
73
- "prettier"
74
- ],
75
69
  "plugins": [
76
70
  "@typescript-eslint"
77
71
  ],
@@ -118,5 +112,5 @@
118
112
  "README.md",
119
113
  "LICENSE"
120
114
  ],
121
- "gitHead": "4cd8803f4c5f3b3833ae6ebb5791f73a057863f8"
115
+ "gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
122
116
  }