@fluid-topics/ft-text-area 1.2.59 → 1.2.60

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 (4) hide show
  1. package/build/ft-text-area.js +13 -11
  2. package/build/ft-text-area.light.js +13 -11
  3. package/build/ft-text-area.min.js +53 -51
  4. package/package.json +5 -5
package/build/ft-text-area.js CHANGED
@@ -13,7 +13,7 @@ import { FtResizer } from "@fluid-topics/ft-resizer";
13
13
  import { FtInputLabel } from "@fluid-topics/ft-input-label";
14
14
  import { FtRipple } from "@fluid-topics/ft-ripple";
15
15
  import { FtTextAreaCssVariables, styles } from "./ft-text-area.styles";
16
- class FtTextArea extends toFtFormComponent(FtLitElement, "textbox") {
16
+ class FtTextArea extends toFtFormComponent(FtLitElement) {
17
17
  constructor() {
18
18
  super(...arguments);
19
19
  this.label = "";
@@ -52,20 +52,22 @@ class FtTextArea extends toFtFormComponent(FtLitElement, "textbox") {
52
52
  ?outlined=${this.outlined}
53
53
  ?raised=${this.focused || this.value != ""}
54
54
  ?error=${this.error}
55
+ aria-hidden="true"
55
56
  ></ft-input-label>
56
- <div class="ft-text-area--input-panel"
57
- aria-label="${this.label}">
57
+ <div class="ft-text-area--input-panel">
58
58
  ${this.outlined ? null : html `
59
59
  <ft-ripple ?disabled=${this.disabled} activated></ft-ripple>
60
60
  `}
61
- <textarea class="ft-typography--body1 ft-text-area--input"
62
- ?disabled=${this.disabled}
63
- .value=${this.value}
64
- @change=${this.updateValueFromInputField}
65
- @keydown=${this.onKeyDown}
66
- @keyup=${this.liveUpdateValueFromInputField}
67
- @focus=${() => this.focused = true}
68
- @focusout=${() => this.focused = false}>
61
+ <textarea
62
+ aria-label="${this.label}"
63
+ class="ft-typography--body1 ft-text-area--input"
64
+ ?disabled=${this.disabled}
65
+ .value=${this.value}
66
+ @change=${this.updateValueFromInputField}
67
+ @keydown=${this.onKeyDown}
68
+ @keyup=${this.liveUpdateValueFromInputField}
69
+ @focus=${() => this.focused = true}
70
+ @focusout=${() => this.focused = false}>
69
71
  </textarea>
70
72
  </div>
71
73
  <ft-resizer @resize=${this.onResize}
package/build/ft-text-area.light.js CHANGED
@@ -553,7 +553,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
553
553
  position: absolute;
554
554
  bottom: 0;
555
555
  }
556
- `;var Y=function(o,r,n,i){var l=arguments.length,c=l<3?r:i===null?i=Object.getOwnPropertyDescriptor(r,n):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")c=Reflect.decorate(o,r,n,i);else for(var f=o.length-1;f>=0;f--)(d=o[f])&&(c=(l<3?d(c):l>3?d(r,n,c):d(r,n))||c);return l>3&&c&&Object.defineProperty(r,n,c),c},A=class extends(0,Te.toFtFormComponent)(Te.FtLitElement,"textbox"){constructor(){super(...arguments),this.label="",this.value="",this.helper="",this.outlined=!1,this.disabled=!1,this.error=!1,this.height=50,this.focused=!1}render(){let r={"ft-text-area":!0,"ft-text-area--filled":!this.outlined,"ft-text-area--outlined":this.outlined,"ft-text-area--disabled":this.disabled,"ft-text-area--has-value":!!this.value,"ft-text-area--no-label":!this.label,"ft-text-area--in-error":this.error};return _e.html`
556
+ `;var Y=function(o,r,n,i){var l=arguments.length,c=l<3?r:i===null?i=Object.getOwnPropertyDescriptor(r,n):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")c=Reflect.decorate(o,r,n,i);else for(var f=o.length-1;f>=0;f--)(d=o[f])&&(c=(l<3?d(c):l>3?d(r,n,c):d(r,n))||c);return l>3&&c&&Object.defineProperty(r,n,c),c},A=class extends(0,Te.toFtFormComponent)(Te.FtLitElement){constructor(){super(...arguments),this.label="",this.value="",this.helper="",this.outlined=!1,this.disabled=!1,this.error=!1,this.height=50,this.focused=!1}render(){let r={"ft-text-area":!0,"ft-text-area--filled":!this.outlined,"ft-text-area--outlined":this.outlined,"ft-text-area--disabled":this.disabled,"ft-text-area--has-value":!!this.value,"ft-text-area--no-label":!this.label,"ft-text-area--in-error":this.error};return _e.html`
557
557
  <style>
558
558
  .ft-text-area--main-panel {
559
559
  height: calc(4 * ${S.verticalSpacing} + ${S.labelSize} + ${S.fontSize} + ${this.height}px);
@@ -570,20 +570,22 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
570
570
  ?outlined=${this.outlined}
571
571
  ?raised=${this.focused||this.value!=""}
572
572
  ?error=${this.error}
573
+ aria-hidden="true"
573
574
  ></ft-input-label>
574
- <div class="ft-text-area--input-panel"
575
- aria-label="${this.label}">
575
+ <div class="ft-text-area--input-panel">
576
576
  ${this.outlined?null:_e.html`
577
577
  <ft-ripple ?disabled=${this.disabled} activated></ft-ripple>
578
578
  `}
579
- <textarea class="ft-typography--body1 ft-text-area--input"
580
- ?disabled=${this.disabled}
581
- .value=${this.value}
582
- @change=${this.updateValueFromInputField}
583
- @keydown=${this.onKeyDown}
584
- @keyup=${this.liveUpdateValueFromInputField}
585
- @focus=${()=>this.focused=!0}
586
- @focusout=${()=>this.focused=!1}>
579
+ <textarea
580
+ aria-label="${this.label}"
581
+ class="ft-typography--body1 ft-text-area--input"
582
+ ?disabled=${this.disabled}
583
+ .value=${this.value}
584
+ @change=${this.updateValueFromInputField}
585
+ @keydown=${this.onKeyDown}
586
+ @keyup=${this.liveUpdateValueFromInputField}
587
+ @focus=${()=>this.focused=!0}
588
+ @focusout=${()=>this.focused=!1}>
587
589
  </textarea>
588
590
  </div>
589
591
  <ft-resizer @resize=${this.onResize}