Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@spectrum-web-components/textfield
Advanced tools
@spectrum-web-components/textfield - npm Package Compare versions
Comparing version 0.34.1-rc.0 to 0.35.0
@@ -7,3 +7,3 @@ { | ||
| "kind": "javascript-module", | ||
| "path": "sp-textfield.ts", | ||
| "path": "sp-textfield.js", | ||
| "declarations": [], | ||
@@ -23,3 +23,3 @@ "exports": [ | ||
| "kind": "javascript-module", | ||
| "path": "src/Textfield.ts", | ||
| "path": "src/Textfield.js", | ||
| "declarations": [ | ||
@@ -33,2 +33,9 @@ { | ||
| "kind": "field", | ||
| "name": "appliedLabel", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "allowedKeys", | ||
@@ -592,3 +599,3 @@ "type": { | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -606,3 +613,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -612,2 +619,13 @@ }, | ||
| "kind": "field", | ||
| "name": "appliedLabel", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "inheritedFrom": { | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "allowedKeys", | ||
@@ -621,3 +639,3 @@ "type": { | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -637,3 +655,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -650,3 +668,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -666,3 +684,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -681,3 +699,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -696,3 +714,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -712,3 +730,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -724,3 +742,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -738,3 +756,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -754,3 +772,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -769,3 +787,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -784,3 +802,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -800,3 +818,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -816,3 +834,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -831,3 +849,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -847,3 +865,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -863,3 +881,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -879,3 +897,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -894,3 +912,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -908,3 +926,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -949,3 +967,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -965,3 +983,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -980,3 +998,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -995,3 +1013,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1010,3 +1028,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1025,3 +1043,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1040,3 +1058,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1054,3 +1072,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1068,3 +1086,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1082,3 +1100,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1097,3 +1115,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1112,3 +1130,3 @@ }, | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1367,3 +1385,3 @@ } | ||
| "name": "TextfieldBase", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1376,3 +1394,3 @@ }, | ||
| "name": "Textfield", | ||
| "module": "src/Textfield.ts" | ||
| "module": "src/Textfield.js" | ||
| } | ||
@@ -1379,0 +1397,0 @@ } |
| { | ||
| "name": "@spectrum-web-components/textfield", | ||
| "version": "0.34.1-rc.0+1647bfed5", | ||
| "version": "0.35.0", | ||
| "publishConfig": { | ||
@@ -60,11 +60,11 @@ "access": "public" | ||
| "dependencies": { | ||
| "@spectrum-web-components/base": "^0.34.1-rc.0+1647bfed5", | ||
| "@spectrum-web-components/help-text": "^0.34.1-rc.0+1647bfed5", | ||
| "@spectrum-web-components/icon": "^0.34.1-rc.0+1647bfed5", | ||
| "@spectrum-web-components/icons-ui": "^0.34.1-rc.0+1647bfed5", | ||
| "@spectrum-web-components/icons-workflow": "^0.34.1-rc.0+1647bfed5", | ||
| "@spectrum-web-components/shared": "^0.34.1-rc.0+1647bfed5" | ||
| "@spectrum-web-components/base": "^0.35.0", | ||
| "@spectrum-web-components/help-text": "^0.35.0", | ||
| "@spectrum-web-components/icon": "^0.35.0", | ||
| "@spectrum-web-components/icons-ui": "^0.35.0", | ||
| "@spectrum-web-components/icons-workflow": "^0.35.0", | ||
| "@spectrum-web-components/shared": "^0.35.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@spectrum-css/textfield": "^6.0.2" | ||
| "@spectrum-css/textfield": "^6.0.7" | ||
| }, | ||
@@ -77,3 +77,3 @@ "types": "./src/index.d.ts", | ||
| ], | ||
| "gitHead": "1647bfed54cb29f3513343cd0d2c2d9e73e1c508" | ||
| "gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1" | ||
| } |
@@ -561,3 +561,3 @@ "use strict"; | ||
| --system-spectrum-textfield-border-width | ||
| )}:host{display:inline-flex;flex-direction:column;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width))}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}:host([grows]) .input{height:100%;left:0;overflow:hidden;position:absolute;resize:none;top:0}:host([grows]) #textfield:after{grid-area:unset;min-block-size:calc(var( | ||
| )}:host{display:inline-flex;flex-direction:column;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width))}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}:host([grows]:not([quiet])) #textfield:after{grid-area:unset;min-block-size:calc(var( | ||
| --mod-text-area-min-block-size, | ||
@@ -568,23 +568,3 @@ var(--spectrum-text-area-min-block-size) | ||
| var(--spectrum-textfield-focus-indicator-gap) | ||
| )*2)}:host([grows]) #sizer{-webkit-appearance:none;-moz-appearance:textfield;border:var(--spectrum-textfield-texticon-border-size) solid;border-radius:var(--spectrum-textfield-texticon-border-radius);box-sizing:border-box;font-family:var(--spectrum-textfield-texticon-text-font-family);font-size:var(--spectrum-textfield-texticon-text-size);inline-size:100%;line-height:var(--spectrum-textfield-texticon-text-line-height);margin:0;min-block-size:var( | ||
| --mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size) | ||
| );outline:none;overflow:visible;overflow-wrap:break-word;padding-block-end:calc(var( | ||
| --mod-textfield-spacing-block-end, | ||
| var(--spectrum-textfield-spacing-block-end) | ||
| ) + var( | ||
| --mod-textfield-border-width, | ||
| var(--spectrum-textfield-border-width) | ||
| ));padding-block-start:calc(var( | ||
| --mod-textfield-spacing-block-start, | ||
| var(--spectrum-textfield-spacing-block-start) | ||
| ) + var( | ||
| --mod-textfield-border-width, | ||
| var(--spectrum-textfield-border-width) | ||
| ));padding-inline:calc(var( | ||
| --mod-textfield-spacing-inline, | ||
| var(--spectrum-textfield-spacing-inline) | ||
| ) + var( | ||
| --mod-textfield-border-width, | ||
| var(--spectrum-textfield-border-width) | ||
| ));text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;white-space:pre-wrap;word-break:break-word}:host([grows][quiet]) #sizer{border-radius:var(--spectrum-textfield-quiet-texticon-border-radius);border-width:0 0 var(--spectrum-textfield-quiet-texticon-border-size) 0;overflow-y:hidden;resize:none}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{background-color:var( | ||
| )*2)}#sizer{block-size:auto;opacity:0;word-break:break-word}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([grows]:not([rows])) .input:not(#sizer){height:100%;left:0;overflow:hidden;position:absolute;resize:none;top:0}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{background-color:var( | ||
| --spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent) | ||
@@ -591,0 +571,0 @@ );border-color:var( |
@@ -559,3 +559,3 @@ "use strict";import{css as e}from"@spectrum-web-components/base";const t=e` | ||
| --system-spectrum-textfield-border-width | ||
| )}:host{display:inline-flex;flex-direction:column;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width))}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}:host([grows]) .input{height:100%;left:0;overflow:hidden;position:absolute;resize:none;top:0}:host([grows]) #textfield:after{grid-area:unset;min-block-size:calc(var( | ||
| )}:host{display:inline-flex;flex-direction:column;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width))}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}:host([grows]:not([quiet])) #textfield:after{grid-area:unset;min-block-size:calc(var( | ||
| --mod-text-area-min-block-size, | ||
@@ -566,23 +566,3 @@ var(--spectrum-text-area-min-block-size) | ||
| var(--spectrum-textfield-focus-indicator-gap) | ||
| )*2)}:host([grows]) #sizer{-webkit-appearance:none;-moz-appearance:textfield;border:var(--spectrum-textfield-texticon-border-size) solid;border-radius:var(--spectrum-textfield-texticon-border-radius);box-sizing:border-box;font-family:var(--spectrum-textfield-texticon-text-font-family);font-size:var(--spectrum-textfield-texticon-text-size);inline-size:100%;line-height:var(--spectrum-textfield-texticon-text-line-height);margin:0;min-block-size:var( | ||
| --mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size) | ||
| );outline:none;overflow:visible;overflow-wrap:break-word;padding-block-end:calc(var( | ||
| --mod-textfield-spacing-block-end, | ||
| var(--spectrum-textfield-spacing-block-end) | ||
| ) + var( | ||
| --mod-textfield-border-width, | ||
| var(--spectrum-textfield-border-width) | ||
| ));padding-block-start:calc(var( | ||
| --mod-textfield-spacing-block-start, | ||
| var(--spectrum-textfield-spacing-block-start) | ||
| ) + var( | ||
| --mod-textfield-border-width, | ||
| var(--spectrum-textfield-border-width) | ||
| ));padding-inline:calc(var( | ||
| --mod-textfield-spacing-inline, | ||
| var(--spectrum-textfield-spacing-inline) | ||
| ) + var( | ||
| --mod-textfield-border-width, | ||
| var(--spectrum-textfield-border-width) | ||
| ));text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;white-space:pre-wrap;word-break:break-word}:host([grows][quiet]) #sizer{border-radius:var(--spectrum-textfield-quiet-texticon-border-radius);border-width:0 0 var(--spectrum-textfield-quiet-texticon-border-size) 0;overflow-y:hidden;resize:none}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{background-color:var( | ||
| )*2)}#sizer{block-size:auto;opacity:0;word-break:break-word}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([grows]:not([rows])) .input:not(#sizer){height:100%;left:0;overflow:hidden;position:absolute;resize:none;top:0}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{background-color:var( | ||
| --spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent) | ||
@@ -589,0 +569,0 @@ );border-color:var( |
@@ -20,2 +20,3 @@ import { CSSResultArray, nothing, PropertyValues, TemplateResult } from '@spectrum-web-components/base'; | ||
| static get styles(): CSSResultArray; | ||
| appliedLabel?: string; | ||
| allowedKeys: string; | ||
@@ -22,0 +23,0 @@ focused: boolean; |
@@ -157,4 +157,6 @@ "use strict"; | ||
| return html` | ||
| ${this.grows && !this.quiet && this.rows === -1 ? html` | ||
| <div id="sizer">${this.value}​</div> | ||
| ${this.grows && this.rows === -1 ? html` | ||
| <div id="sizer" class="input" aria-hidden="true"> | ||
| ${this.value}​ | ||
| </div> | ||
| ` : nothing} | ||
@@ -164,3 +166,3 @@ <!-- @ts-ignore --> | ||
| aria-describedby=${this.helpTextId} | ||
| aria-label=${this.label || this.placeholder} | ||
| aria-label=${this.label || this.appliedLabel || this.placeholder} | ||
| aria-invalid=${ifDefined(this.invalid || void 0)} | ||
@@ -174,2 +176,3 @@ class="input" | ||
| )} | ||
| title=${this.invalid ? "" : nothing} | ||
| pattern=${ifDefined(this.pattern)} | ||
@@ -196,5 +199,6 @@ placeholder=${this.placeholder} | ||
| aria-describedby=${this.helpTextId} | ||
| aria-label=${this.label || this.placeholder} | ||
| aria-label=${this.label || this.appliedLabel || this.placeholder} | ||
| aria-invalid=${ifDefined(this.invalid || void 0)} | ||
| class="input" | ||
| title=${this.invalid ? "" : nothing} | ||
| maxlength=${ifDefined( | ||
@@ -257,2 +261,5 @@ this.maxlength > -1 ? this.maxlength : void 0 | ||
| __decorateClass([ | ||
| state() | ||
| ], TextfieldBase.prototype, "appliedLabel", 2); | ||
| __decorateClass([ | ||
| property({ attribute: "allowed-keys" }) | ||
@@ -264,3 +271,3 @@ ], TextfieldBase.prototype, "allowedKeys", 2); | ||
| __decorateClass([ | ||
| query(".input") | ||
| query(".input:not(#sizer)") | ||
| ], TextfieldBase.prototype, "inputElement", 2); | ||
@@ -267,0 +274,0 @@ __decorateClass([ |
@@ -1,2 +0,2 @@ | ||
| "use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var t=(a,u,e,l)=>{for(var r=l>1?void 0:l?c(u,e):u,p=a.length-1,o;p>=0;p--)(o=a[p])&&(r=(l?o(u,e,r):o(r))||r);return l&&r&&d(u,e,r),r};import{html as s,nothing as h,SizedMixin as m}from"@spectrum-web-components/base";import{ifDefined as n,live as v}from"@spectrum-web-components/base/src/directives.js";import{property as i,query as y,state as g}from"@spectrum-web-components/base/src/decorators.js";import{ManageHelpText as b}from"@spectrum-web-components/help-text/src/manage-help-text.js";import{Focusable as f}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import $ from"./textfield.css.js";import S from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";const E=["text","url","tel","email","password"];export class TextfieldBase extends b(m(f,{noDefaultSize:!0})){constructor(){super(...arguments);this.allowedKeys="";this.focused=!1;this.invalid=!1;this.label="";this.placeholder="";this._type="text";this.grows=!1;this.maxlength=-1;this.minlength=-1;this.multiline=!1;this.readonly=!1;this.rows=-1;this.valid=!1;this._value="";this.quiet=!1;this.required=!1}static get styles(){return[$,S]}get type(){var e;return(e=E.find(l=>l===this._type))!=null?e:"text"}set type(e){const l=this._type;this._type=e,this.requestUpdate("type",l)}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,l,r="none"){this.inputElement.setSelectionRange(e,l,r)}select(){this.inputElement.select()}handleInput(){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const r=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(r,r);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(){this.focused=!this.readonly&&!1}renderStateIcons(){return this.invalid?s` | ||
| "use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var t=(u,a,e,l)=>{for(var r=l>1?void 0:l?m(a,e):a,o=u.length-1,h;o>=0;o--)(h=u[o])&&(r=(l?h(a,e,r):h(r))||r);return l&&r&&c(a,e,r),r};import{html as s,nothing as p,SizedMixin as v}from"@spectrum-web-components/base";import{ifDefined as n,live as y}from"@spectrum-web-components/base/src/directives.js";import{property as i,query as b,state as d}from"@spectrum-web-components/base/src/decorators.js";import{ManageHelpText as g}from"@spectrum-web-components/help-text/src/manage-help-text.js";import{Focusable as f}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import $ from"./textfield.css.js";import S from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";const E=["text","url","tel","email","password"];export class TextfieldBase extends g(v(f,{noDefaultSize:!0})){constructor(){super(...arguments);this.allowedKeys="";this.focused=!1;this.invalid=!1;this.label="";this.placeholder="";this._type="text";this.grows=!1;this.maxlength=-1;this.minlength=-1;this.multiline=!1;this.readonly=!1;this.rows=-1;this.valid=!1;this._value="";this.quiet=!1;this.required=!1}static get styles(){return[$,S]}get type(){var e;return(e=E.find(l=>l===this._type))!=null?e:"text"}set type(e){const l=this._type;this._type=e,this.requestUpdate("type",l)}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,l,r="none"){this.inputElement.setSelectionRange(e,l,r)}select(){this.inputElement.select()}handleInput(){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const r=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(r,r);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(){this.focused=!this.readonly&&!1}renderStateIcons(){return this.invalid?s` | ||
| <sp-icon-alert id="invalid" class="icon"></sp-icon-alert> | ||
@@ -8,10 +8,12 @@ `:this.valid?s` | ||
| ></sp-icon-checkmark100> | ||
| `:h}get displayValue(){return this.value.toString()}get renderMultiline(){return s` | ||
| ${this.grows&&!this.quiet&&this.rows===-1?s` | ||
| <div id="sizer">${this.value}​</div> | ||
| `:h} | ||
| `:p}get displayValue(){return this.value.toString()}get renderMultiline(){return s` | ||
| ${this.grows&&this.rows===-1?s` | ||
| <div id="sizer" class="input" aria-hidden="true"> | ||
| ${this.value}​ | ||
| </div> | ||
| `:p} | ||
| <!-- @ts-ignore --> | ||
| <textarea | ||
| aria-describedby=${this.helpTextId} | ||
| aria-label=${this.label||this.placeholder} | ||
| aria-label=${this.label||this.appliedLabel||this.placeholder} | ||
| aria-invalid=${n(this.invalid||void 0)} | ||
@@ -21,2 +23,3 @@ class="input" | ||
| minlength=${n(this.minlength>-1?this.minlength:void 0)} | ||
| title=${this.invalid?"":p} | ||
| pattern=${n(this.pattern)} | ||
@@ -40,5 +43,6 @@ placeholder=${this.placeholder} | ||
| aria-describedby=${this.helpTextId} | ||
| aria-label=${this.label||this.placeholder} | ||
| aria-label=${this.label||this.appliedLabel||this.placeholder} | ||
| aria-invalid=${n(this.invalid||void 0)} | ||
| class="input" | ||
| title=${this.invalid?"":p} | ||
| maxlength=${n(this.maxlength>-1?this.maxlength:void 0)} | ||
@@ -48,3 +52,3 @@ minlength=${n(this.minlength>-1?this.minlength:void 0)} | ||
| placeholder=${this.placeholder} | ||
| .value=${v(this.displayValue)} | ||
| .value=${y(this.displayValue)} | ||
| @change=${this.handleChange} | ||
@@ -65,3 +69,3 @@ @input=${this.handleInput} | ||
| ${this.renderHelpText(this.invalid)} | ||
| `}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),typeof this.minlength!="undefined"&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}t([i({attribute:"allowed-keys"})],TextfieldBase.prototype,"allowedKeys",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"focused",2),t([y(".input")],TextfieldBase.prototype,"inputElement",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"invalid",2),t([i()],TextfieldBase.prototype,"label",2),t([i()],TextfieldBase.prototype,"placeholder",2),t([i({attribute:"type",reflect:!0})],TextfieldBase.prototype,"_type",2),t([g()],TextfieldBase.prototype,"type",1),t([i()],TextfieldBase.prototype,"pattern",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"grows",2),t([i({type:Number})],TextfieldBase.prototype,"maxlength",2),t([i({type:Number})],TextfieldBase.prototype,"minlength",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"multiline",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"readonly",2),t([i({type:Number})],TextfieldBase.prototype,"rows",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"valid",2),t([i({type:String})],TextfieldBase.prototype,"value",1),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"quiet",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"required",2),t([i({type:String,reflect:!0})],TextfieldBase.prototype,"autocomplete",2);export class Textfield extends TextfieldBase{constructor(){super(...arguments);this._value=""}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}}t([i({type:String})],Textfield.prototype,"value",1); | ||
| `}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),typeof this.minlength!="undefined"&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}t([d()],TextfieldBase.prototype,"appliedLabel",2),t([i({attribute:"allowed-keys"})],TextfieldBase.prototype,"allowedKeys",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"focused",2),t([b(".input:not(#sizer)")],TextfieldBase.prototype,"inputElement",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"invalid",2),t([i()],TextfieldBase.prototype,"label",2),t([i()],TextfieldBase.prototype,"placeholder",2),t([i({attribute:"type",reflect:!0})],TextfieldBase.prototype,"_type",2),t([d()],TextfieldBase.prototype,"type",1),t([i()],TextfieldBase.prototype,"pattern",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"grows",2),t([i({type:Number})],TextfieldBase.prototype,"maxlength",2),t([i({type:Number})],TextfieldBase.prototype,"minlength",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"multiline",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"readonly",2),t([i({type:Number})],TextfieldBase.prototype,"rows",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"valid",2),t([i({type:String})],TextfieldBase.prototype,"value",1),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"quiet",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"required",2),t([i({type:String,reflect:!0})],TextfieldBase.prototype,"autocomplete",2);export class Textfield extends TextfieldBase{constructor(){super(...arguments);this._value=""}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}}t([i({type:String})],Textfield.prototype,"value",1); | ||
| //# sourceMappingURL=Textfield.js.map |
@@ -81,2 +81,13 @@ "use strict"; | ||
| `; | ||
| export const growsQuiet = () => html` | ||
| <sp-field-label for="story">Enter your life story...</sp-field-label> | ||
| <sp-textfield | ||
| multiline | ||
| id="story" | ||
| value="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt." | ||
| grows | ||
| quiet | ||
| placeholder="Enter your life story" | ||
| ></sp-textfield> | ||
| `; | ||
| export const growsEmpty = () => html` | ||
@@ -164,3 +175,7 @@ <sp-field-label for="empty"> | ||
| id="predefinedRows" | ||
| value="Line 1\nLine 2\nLine 3\nLine 4\nLine 5" | ||
| value="Line 1 | ||
| Line 2 | ||
| Line 3 | ||
| Line 4 | ||
| Line 5" | ||
| placeholder="Enter your life story" | ||
@@ -170,2 +185,19 @@ rows="5" | ||
| `; | ||
| export const rowsDefeatsGrows = () => html` | ||
| <sp-field-label for="predefinedRows"> | ||
| Enter your life story with very long words... | ||
| </sp-field-label> | ||
| <sp-textfield | ||
| multiline | ||
| grows | ||
| id="predefinedRows" | ||
| value="Line 1 | ||
| Line 2 | ||
| Line 3 | ||
| Line 4 | ||
| Line 5" | ||
| placeholder="Enter your life story" | ||
| rows="3" | ||
| ></sp-textfield> | ||
| `; | ||
| export const with1Row = () => html` | ||
@@ -172,0 +204,0 @@ <sp-field-label for="predefinedRows"> |
@@ -130,3 +130,5 @@ "use strict"; | ||
| const boundsOneRowElement = oneRowTextarea == null ? void 0 : oneRowTextarea.getBoundingClientRect(); | ||
| expect(boundsDefaultElement == null ? void 0 : boundsDefaultElement.height).to.be.greaterThan((_a = boundsOneRowElement == null ? void 0 : boundsOneRowElement.height) != null ? _a : 0); | ||
| expect(boundsDefaultElement == null ? void 0 : boundsDefaultElement.height).to.be.greaterThan( | ||
| (_a = boundsOneRowElement == null ? void 0 : boundsOneRowElement.height) != null ? _a : 0 | ||
| ); | ||
| }); | ||
@@ -362,2 +364,35 @@ it("multiline with rows does not resize", async () => { | ||
| }); | ||
| it("valid - boundary-type assertions and title", async () => { | ||
| const el = await litFixture( | ||
| html` | ||
| <sp-textfield | ||
| placeholder="Enter your number" | ||
| pattern="^[\\d]+$" | ||
| value="123" | ||
| ></sp-textfield> | ||
| ` | ||
| ); | ||
| await elementUpdated(el); | ||
| expect(el).to.not.equal(void 0); | ||
| const input = el.shadowRoot.querySelector("#valid"); | ||
| expect(input).to.not.be.null; | ||
| expect(el.focusElement).to.not.have.attribute("title"); | ||
| }); | ||
| it("valid - multiline - boundary-type assertions and title", async () => { | ||
| const el = await litFixture( | ||
| html` | ||
| <sp-textfield | ||
| multiline | ||
| placeholder="Enter your number" | ||
| pattern="^[\\d]+$" | ||
| value="123" | ||
| ></sp-textfield> | ||
| ` | ||
| ); | ||
| await elementUpdated(el); | ||
| expect(el).to.not.equal(void 0); | ||
| const input = el.shadowRoot.querySelector("#valid"); | ||
| expect(input).to.not.be.null; | ||
| expect(el.focusElement).to.not.have.attribute("title"); | ||
| }); | ||
| it("valid - unicode", async () => { | ||
@@ -509,2 +544,37 @@ const el = await litFixture( | ||
| }); | ||
| it("invalid - boundary-type assertions and title", async () => { | ||
| const el = await litFixture( | ||
| html` | ||
| <sp-textfield | ||
| placeholder="Enter your number" | ||
| type="url" | ||
| value="invalid-email" | ||
| invalid | ||
| ></sp-textfield> | ||
| ` | ||
| ); | ||
| await elementUpdated(el); | ||
| expect(el).to.not.equal(void 0); | ||
| const input = el.shadowRoot.querySelector("#invalid"); | ||
| expect(input).to.not.be.null; | ||
| expect(el.focusElement).to.have.attribute("title"); | ||
| }); | ||
| it("invalid - multiline - boundary-type assertions and title", async () => { | ||
| const el = await litFixture( | ||
| html` | ||
| <sp-textfield | ||
| multiline | ||
| placeholder="Enter your number" | ||
| type="url" | ||
| value="invalid-email" | ||
| invalid | ||
| ></sp-textfield> | ||
| ` | ||
| ); | ||
| await elementUpdated(el); | ||
| expect(el).to.not.equal(void 0); | ||
| const input = el.shadowRoot.querySelector("#invalid"); | ||
| expect(input).to.not.be.null; | ||
| expect(el.focusElement).to.have.attribute("title"); | ||
| }); | ||
| it("invalid - multiline - boundary-type assertions", async () => { | ||
@@ -511,0 +581,0 @@ const el = await litFixture( |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.77%
541053
- Lines of code
- increased by1.57%
5686
- Number of medium supply chain risk alerts
- decreased by-100%
0
Dependency changes
+ Added@spectrum-web-components/base@0.35.0(transitive)
+ Added@spectrum-web-components/help-text@0.35.0(transitive)
+ Added@spectrum-web-components/icon@0.35.0(transitive)
+ Added@spectrum-web-components/icons-ui@0.35.0(transitive)
+ Added@spectrum-web-components/icons-workflow@0.35.0(transitive)
+ Added@spectrum-web-components/iconset@0.35.0(transitive)
+ Added@spectrum-web-components/shared@0.35.0(transitive)
- Removed@spectrum-web-components/base@0.34.1-rc.0(transitive)
- Removed@spectrum-web-components/help-text@0.34.1-rc.0(transitive)
- Removed@spectrum-web-components/icon@0.34.1-rc.0(transitive)
- Removed@spectrum-web-components/icons-ui@0.34.1-rc.0(transitive)
- Removed@spectrum-web-components/icons-workflow@0.34.1-rc.0(transitive)
- Removed@spectrum-web-components/iconset@0.34.1-rc.0(transitive)
- Removed@spectrum-web-components/shared@0.34.1-rc.0(transitive)