@digital-realty/ix-email-list 1.3.7 → 1.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.
- package/dist/ix-email-list.min.js +93 -3
- package/package.json +12 -18
|
@@ -1,5 +1,95 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import"@digital-realty/ix-chip/ix-chip-set.js";import"@digital-realty/ix-chip/ix-chip.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import{mixinDelegatesAria}from"@material/web/internal/aria/delegate.js";import{mixinElementInternals}from"@material/web/labs/behaviors/element-internals.js";import{css,LitElement,nothing,html}from"lit";import{query,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";
|
|
1
|
+
import{__decorate as e}from"tslib";import"@digital-realty/ix-chip/ix-chip-set.js";import"@digital-realty/ix-chip/ix-chip.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import{mixinDelegatesAria as t}from"@material/web/internal/aria/delegate.js";import{mixinElementInternals as i}from"@material/web/labs/behaviors/element-internals.js";import{css as s,LitElement as r,nothing as a,html as o}from"lit";import{query as l,property as d,state as n}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";const u=s`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
}
|
|
5
|
+
:host([disabled]) {
|
|
6
|
+
pointer-events: none;
|
|
7
|
+
}
|
|
8
|
+
ix-field {
|
|
9
|
+
display: block;
|
|
10
|
+
}
|
|
11
|
+
ix-field label {
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
14
|
+
ix-chip.error {
|
|
15
|
+
--ix-chip-container-color: var(--md-sys-color-error);
|
|
16
|
+
--md-input-chip-outline-color: var(--md-sys-color-error);
|
|
17
|
+
}
|
|
18
|
+
.field-content {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-wrap: wrap;
|
|
21
|
+
min-height: var(--ix-custom-field-min-height, 24px);
|
|
22
|
+
}
|
|
23
|
+
input {
|
|
24
|
+
border: none;
|
|
25
|
+
background: transparent;
|
|
26
|
+
outline: none;
|
|
27
|
+
min-width: 30%;
|
|
28
|
+
line-height: var(--_content-line-height);
|
|
29
|
+
flex-grow: 1;
|
|
30
|
+
}
|
|
31
|
+
ix-chip-set {
|
|
32
|
+
min-height: var(--_content-line-height);
|
|
33
|
+
display: flex;
|
|
34
|
+
padding-right: 0.5rem;
|
|
35
|
+
}
|
|
36
|
+
ix-icon-button {
|
|
37
|
+
--md-icon-button-icon-color: var(--md-sys-text-color-secondary);
|
|
38
|
+
--md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);
|
|
39
|
+
--md-icon-button-hover-state-layer-color: var(
|
|
2
40
|
--md-sys-text-color-secondary
|
|
3
|
-
)
|
|
41
|
+
);
|
|
42
|
+
--md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);
|
|
43
|
+
--md-icon-button-pressed-state-layer-color: var(
|
|
4
44
|
--md-sys-text-color-secondary
|
|
5
|
-
)
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
.clear-icon {
|
|
48
|
+
margin-right: 0.5rem;
|
|
49
|
+
}
|
|
50
|
+
`,c=e=>/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e),p=t(i(r));class m extends p{constructor(){super(...arguments),this.internals=this.attachInternals(),this.lookup=()=>{},this.label="",this.value="",this.errorText="Invalid email in list.",this.disabled=!1,this.error=!1,this.required=!1,this.onChanged=()=>{},this.checkDuplicates=!1,this.maximumEmailCount=-1,this.tabIndex=0,this.maximumEmailLength=-1,this.errorMessage="",this.focused=!1,this.inputValue="",this.addresses=[],this.chipRemove=async e=>{const t=this.addresses.filter((t,i)=>i!==e);this.addresses=[],await 0,this.addresses=t,this.isValidList(),this.value=this.addresses.map(e=>e.address).join(","),this.onChanged(this.addresses),this.addresses.length||this.handleFocusout()},this.handleFocusin=()=>{this.focused=!0},this.handleFocusout=()=>{this.inputValue&&this.resolveInput(),this.focused=!1},this.keydown=e=>{[" ",",","Tab","Enter",";"].includes(e.key)&&this.inputValue.length&&(e.preventDefault(),this.resolveInput())},this.resolveInput=()=>{const e=this.inputValue.toLowerCase(),t=c(e),i=this.lookup(e);this.addresses=[...this.addresses,{address:e,isValid:t,name:i}],this.inputValue="",this.value=this.addresses.map(e=>e.address).join(","),this.isValidList(),this.onChanged(this.addresses)},this.input=e=>{const{value:t}=e.target;this.inputValue=t},this.clear=e=>{this.addresses=[],this.inputValue="",this.value="",this.error=!1,e||this.onChanged(this.addresses),this.handleFocusout()},this.isValidList=()=>{this.errorMessage="",this.error=!1,this.addresses.some(e=>!e.isValid)&&this.addError(this.errorText),this.checkDuplicates&&this.checkForDuplicates(),this.maximumEmailCount>0&&this.validateEmailCount(),this.maximumEmailLength>0&&this.validateEmailLength(),this.internals.setValidity({badInput:this.error},this.error?this.errorMessage:"",this.emailInput)}}static get styles(){return[u]}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var e;return null!==(e=this.getAttribute("name"))&&void 0!==e?e:""}set name(e){this.setAttribute("name",e)}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}disconnectedCallback(){super.disconnectedCallback(),this.reset(!0)}validate(){this.required&&0===this.addresses.length?this.addError(this.errorText):this.isValidList()}formResetCallback(){this.reset(!1)}reset(e){var t;this.clear(e),this.value=null!==(t=this.getAttribute("value"))&&void 0!==t?t:""}validateEmailCount(){this.addresses.length>this.maximumEmailCount&&this.addError(`Maximum of ${this.maximumEmailCount} emails are allowed. `)}validateEmailLength(){this.addresses.some(e=>e.address.length>this.maximumEmailLength)&&this.addError(`Email address exceeds the maximum length of ${this.maximumEmailLength} characters.`)}checkForDuplicates(){let e=!1;const t=this.addresses.reduce((e,t,i)=>{const{address:s}=t;return e[s]||(e[s]=[]),e[s].push(i),e},{});Object.values(t).forEach(t=>{t.length>1?(e=!0,t.forEach(e=>{this.addresses[e].isDuplicate=!0})):this.addresses[t[0]].isDuplicate=!1}),e&&this.addError("Duplicate emails detected.")}updated(e){e.has("disabled")&&(this.tabIndex=this.disabled?-1:0),e.has("value")&&(this.internals.setFormValue(this.value),""!==this.value.trim()?this.addresses=this.value.split(",").map(e=>{const t=e.toLowerCase().trim();return{address:t,isValid:c(t)}}):this.addresses=[],this.isValidList())}focus(){this.emailInput.focus()}addError(e){this.error=!0,this.errorMessage+=e}render(){const e={disabled:this.disabled,error:!this.disabled&&this.error};return o`
|
|
51
|
+
<ix-field
|
|
52
|
+
class="${h(e)}"
|
|
53
|
+
?focused=${this.focused}
|
|
54
|
+
?disabled=${this.disabled}
|
|
55
|
+
?required=${this.required}
|
|
56
|
+
?checkDuplicates=${this.checkDuplicates}
|
|
57
|
+
?maximumEmailCount=${this.maximumEmailCount}
|
|
58
|
+
label=${this.label}
|
|
59
|
+
?error=${this.error}
|
|
60
|
+
error-text=${this.errorMessage}
|
|
61
|
+
@focusin=${this.handleFocusin}
|
|
62
|
+
@focusout=${this.handleFocusout}
|
|
63
|
+
?populated=${this.addresses.length||this.inputValue.length}
|
|
64
|
+
>
|
|
65
|
+
<div class="field-content">
|
|
66
|
+
${this.addresses.length?o`<ix-chip-set>
|
|
67
|
+
${this.addresses.map((e,t)=>o`<span
|
|
68
|
+
><ix-chip
|
|
69
|
+
@remove=${()=>this.chipRemove(t)}
|
|
70
|
+
label=${m.labelText(e)}
|
|
71
|
+
class=${!e.isValid||e.isDuplicate?"error":""}
|
|
72
|
+
appearance="input"
|
|
73
|
+
removable
|
|
74
|
+
remove-only
|
|
75
|
+
></ix-chip
|
|
76
|
+
></span>`)}
|
|
77
|
+
</ix-chip-set>`:a}
|
|
78
|
+
<input
|
|
79
|
+
id="email-input"
|
|
80
|
+
@keydown=${this.keydown}
|
|
81
|
+
@input=${this.input}
|
|
82
|
+
.value=${this.inputValue}
|
|
83
|
+
type="text"
|
|
84
|
+
/>
|
|
85
|
+
</div>
|
|
86
|
+
<slot name="end" slot="end">
|
|
87
|
+
${this.addresses.length?o`<ix-icon-button
|
|
88
|
+
class="clear-icon"
|
|
89
|
+
@click=${()=>this.clear(!1)}
|
|
90
|
+
icon="close"
|
|
91
|
+
aria-label="clear"
|
|
92
|
+
></ix-icon-button>`:a}
|
|
93
|
+
</slot>
|
|
94
|
+
</ix-field>
|
|
95
|
+
`}}m.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0},m.formAssociated=!0,m.labelText=e=>{const t=e.isValid?e.address:`${e.address}!`;return e.name?e.name:t},e([l("#email-input")],m.prototype,"emailInput",void 0),e([d()],m.prototype,"lookup",void 0),e([d({type:String})],m.prototype,"label",void 0),e([d({type:String})],m.prototype,"value",void 0),e([d({type:String,attribute:"error-text"})],m.prototype,"errorText",void 0),e([d({type:Boolean,reflect:!0})],m.prototype,"disabled",void 0),e([d({type:Boolean,reflect:!0})],m.prototype,"error",void 0),e([d({type:Boolean,reflect:!0})],m.prototype,"required",void 0),e([d({type:Function})],m.prototype,"onChanged",void 0),e([d({type:Boolean,reflect:!0})],m.prototype,"checkDuplicates",void 0),e([d({type:Number,reflect:!0})],m.prototype,"maximumEmailCount",void 0),e([d({type:Number,reflect:!0})],m.prototype,"tabIndex",void 0),e([d({type:Number})],m.prototype,"maximumEmailLength",void 0),e([n()],m.prototype,"focused",void 0),e([n()],m.prototype,"inputValue",void 0),e([n()],m.prototype,"addresses",void 0),window.customElements.define("ix-email-list",m);
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-email-list following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.4.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -20,47 +20,41 @@
|
|
|
20
20
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
21
21
|
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
22
22
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
23
|
-
"lint": "eslint --ext .ts,.html .
|
|
24
|
-
"format": "eslint --ext .ts,.html . --fix
|
|
23
|
+
"lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
24
|
+
"format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
25
25
|
"test": "tsc && wtr --coverage",
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@digital-realty/ix-chip": "^1.
|
|
30
|
-
"@digital-realty/ix-field": "^1.
|
|
31
|
-
"@digital-realty/ix-icon-button": "^1.
|
|
29
|
+
"@digital-realty/ix-chip": "^1.3.1",
|
|
30
|
+
"@digital-realty/ix-field": "^1.3.1",
|
|
31
|
+
"@digital-realty/ix-icon-button": "^1.3.1",
|
|
32
32
|
"@material/web": "2.4.0",
|
|
33
33
|
"@web/test-runner-commands": "^0.9.0",
|
|
34
34
|
"lit": "^3.2.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
38
|
-
"@open-wc/eslint-config": "^9.2.1",
|
|
39
38
|
"@open-wc/testing": "^3.1.6",
|
|
40
|
-
"@
|
|
41
|
-
"@typescript-eslint/
|
|
39
|
+
"@rollup/plugin-terser": "^1.0.0",
|
|
40
|
+
"@typescript-eslint/eslint-plugin": "^8.58.2",
|
|
41
|
+
"@typescript-eslint/parser": "^8.58.2",
|
|
42
42
|
"@web/dev-server": "^0.4.6",
|
|
43
43
|
"@web/test-runner": "^0.20.2",
|
|
44
|
-
"concurrently": "^9.1
|
|
45
|
-
"eslint": "^
|
|
44
|
+
"concurrently": "^9.2.1",
|
|
45
|
+
"eslint": "^9.39.4",
|
|
46
46
|
"eslint-config-prettier": "^8.3.0",
|
|
47
47
|
"husky": "^4.3.8",
|
|
48
48
|
"lint-staged": "^10.5.4",
|
|
49
49
|
"prettier": "^2.4.1",
|
|
50
50
|
"rollup": "^4.29.1",
|
|
51
|
-
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
52
51
|
"rollup-plugin-summary": "^2.0.0",
|
|
53
|
-
"rollup-plugin-uglify": "^6.0.4",
|
|
54
52
|
"tslib": "^2.3.1",
|
|
55
53
|
"typescript": "^4.5.2"
|
|
56
54
|
},
|
|
57
55
|
"customElements": "custom-elements.json",
|
|
58
56
|
"eslintConfig": {
|
|
59
57
|
"parser": "@typescript-eslint/parser",
|
|
60
|
-
"extends": [
|
|
61
|
-
"@open-wc",
|
|
62
|
-
"prettier"
|
|
63
|
-
],
|
|
64
58
|
"plugins": [
|
|
65
59
|
"@typescript-eslint"
|
|
66
60
|
],
|
|
@@ -102,5 +96,5 @@
|
|
|
102
96
|
"README.md",
|
|
103
97
|
"LICENSE"
|
|
104
98
|
],
|
|
105
|
-
"gitHead": "
|
|
99
|
+
"gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
|
|
106
100
|
}
|