@ptcwebops/ptcw-design 6.3.65-beta → 6.3.66-beta

package/dist/collection/components/ptc-textfield/ptc-textfield.css

@@ -3634,20 +3634,28 @@ ptc-link, ptc-square-card,
 }
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__leading,
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__trailing,
+.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__leading,
+.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__notch,
+.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__trailing {
   border-color: var(--color-blue-07);
 }
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading,
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__leading,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__notch,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__trailing {
   border-color: var(--keyboard-nav-outline);
   border-width: 5px;
 }
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__leading {
   border-top-left-radius: var(--ptc-border-radius-standard) !important;
   border-bottom-left-radius: var(--ptc-border-radius-standard) !important;
 }
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing,
+.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__trailing {
   border-top-right-radius: var(--ptc-border-radius-standard) !important;
   border-bottom-right-radius: var(--ptc-border-radius-standard) !important;
 }
@@ -3823,6 +3831,8 @@ ptc-link, ptc-square-card,
   margin: 0;
   position: static;
   padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
   line-height: var(--ptc-font-size-small);
 }
 .ptc-text-field .mdc-text-field--outlined {
@@ -3848,4 +3858,21 @@ ptc-link, ptc-square-card,
   padding-right: 1px;
   padding-top: 2px;
   padding-bottom: 2px;
+}
+.ptc-text-field .mdc-text-field--with-internal-counter textarea.mdc-text-field__input {
+  padding-bottom: 32px;
+  overflow-y: auto;
+  word-break: break-word;
+}
+.ptc-text-field .textarea-wrapper {
+  position: relative;
+  z-index: 9;
+  padding-bottom: 20px;
+}
+.ptc-text-field .textarea-wrapper .mdc-text-field-character-counter {
+  position: absolute;
+  top: unset;
+  bottom: -28px;
+  right: 0;
+  z-index: 9;
 }

package/dist/collection/components/ptc-textfield/ptc-textfield.js

@@ -224,6 +224,7 @@ export class PtcTextfield {
     const textFields = document.querySelectorAll('.mdc-text-field');
     textFields.forEach((textField) => {
       const input = textField.querySelector('input');
+      const textArea = textField.querySelector('textarea');
       if (input) {
         input.addEventListener('focus', () => {
           if (this.lastInteraction === 'keyboard') {
@@ -239,6 +240,21 @@ export class PtcTextfield {
           textField.classList.remove('keyboard-focus', 'mouse-focus');
         });
       }
+      if (textArea) {
+        textArea.addEventListener('focus', () => {
+          if (this.lastInteraction === 'keyboard') {
+            textField.classList.add('keyboard-focus');
+            textField.classList.remove('mouse-focus');
+          }
+          else {
+            textField.classList.add('mouse-focus');
+            textField.classList.remove('keyboard-focus');
+          }
+        });
+        textArea.addEventListener('blur', () => {
+          textField.classList.remove('keyboard-focus', 'mouse-focus');
+        });
+      }
     });
   }
   render() {
@@ -249,13 +265,13 @@ export class PtcTextfield {
       h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
           ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
           this.mdcTextfield = mdcTextfield;
-        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), this.type === 'textarea' ? (h("textarea", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
+        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), this.type === 'textarea' ? (h("div", { class: "textarea-wrapper" }, h("textarea", Object.assign({ ref: customInput => {
           this.customInput = customInput;
-        }, id: this.fieldId, class: this.getInputClassName() }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName, placeholder: this.placeholderText }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { onInput: e => this.handleInput(e) }))) : (h("input", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
+        }, id: this.fieldId, class: this.getInputClassName() }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName, placeholder: this.placeholderText }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { onInput: e => this.handleInput(e) })), this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null)) : (h("input", Object.assign({ ref: customInput => {
           this.customInput = customInput;
         }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText })))),
       h("div", { class: `mdc-text-field-helper-line
-                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
+                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, (this.ptcMaxLength && this.type === 'text') ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
       /* Alert message */
       h("div", { class: "ptc-text-field-alert-line" }, !!this.alertText ? (h("div", { class: "mdc-text-field-helper-text--alert-msg" }, h("svg", { class: "alert-msg-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Info", "clip-path": "url(#clip0_227_7670)" }, h("path", { id: "Vector", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 6V13H7V6H9ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z", fill: "#197BC0" })), h("defs", null, h("clipPath", { id: "clip0_227_7670" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.alertText)) : null, !!this.alertText && this.alertTextContent ? h("div", { class: "mdc-text-field-helper-text--alert-content-msg" }, this.alertTextContent) : null),
     ]) : (h("input", { id: this.fieldId, name: this.fieldName, type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));