cps-ui-kit 21.22.0 → 21.23.0

package/fesm2022/cps-ui-kit.mjs

@@ -11694,6 +11694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Output
             }] } });
 
+const RESIZE_STEP_REM = 1.5;
 /**
  * CpsTextareaComponent is a textarea component.
  * @group Components
@@ -11713,6 +11714,15 @@ class CpsTextareaComponent {
     get value() {
         return this._value;
     }
+    get describedBy() {
+        if (this.hideDetails)
+            return null;
+        if (this.error)
+            return this.errorId;
+        if (this.hint)
+            return this.hintId;
+        return null;
+    }
     constructor(_control, _elementRef) {
         this._control = _control;
         this._elementRef = _elementRef;
@@ -11721,6 +11731,11 @@ class CpsTextareaComponent {
          * @group Props
          */
         this.label = '';
+        /**
+         * Aria label for the textarea component, used for accessibility, it takes precedence over label.
+         * @group Props
+         */
+        this.ariaLabel = '';
         /**
          * Placeholder text for the textarea.
          * @group Props
@@ -11741,6 +11756,16 @@ class CpsTextareaComponent {
          * @group Props
          */
         this.autofocus = false;
+        /**
+         * Determines whether the value of the textarea may be checked for spelling errors.
+         * @group Props
+         */
+        this.spellcheck = false;
+        /**
+         * Determines whether the value of the textarea can be automatically completed by the browser.
+         * @group Props
+         */
+        this.autocomplete = 'off';
         /**
          * Bottom hint text for the textarea.
          * @group Props
@@ -11751,6 +11776,11 @@ class CpsTextareaComponent {
          * @group Props
          */
         this.disabled = false;
+        /**
+         * Determines whether the textarea is readonly.
+         * @group Props
+         */
+        this.readonly = false;
         /**
          * Width of the textarea, it can be of type number denoting pixels or string.
          * @group Props
@@ -11781,6 +11811,12 @@ class CpsTextareaComponent {
          * @group Props
          */
         this.resizable = 'vertical';
+        /**
+         * Maximum height of the textarea during resize, of type number denoting pixels or string.
+         * Accepts only units of px, rem and em. When resizable is set to 'none', this prop has no effect.
+         * @group Props
+         */
+        this.maxHeight = Infinity;
         /**
          * When it is not an empty string, an info icon is displayed to show text for more info.
          * @group Props
@@ -11831,7 +11867,16 @@ class CpsTextareaComponent {
          */
         this.blurred = new EventEmitter();
         this._value = '';
+        this.hintId = generateUniqueId('cps-textarea-hint');
+        this.errorId = generateUniqueId('cps-textarea-error');
         this.cvtWidth = '';
+        this.maxHeightPx = null;
+        this.isKeyboardFocused = false;
+        this._singleRowHeightPx = 0;
+        this._mouseActivated = false;
+        this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
+        this._platformId = inject(PLATFORM_ID);
+        this._resizeStepPx = computed(() => RESIZE_STEP_REM * (this._cpsRootFontSizeService?.fontSize() || 16), ...(ngDevMode ? [{ debugName: "_resizeStepPx" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_event) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -11839,16 +11884,61 @@ class CpsTextareaComponent {
         if (this._control) {
             this._control.valueAccessor = this;
         }
+        effect(() => this._updateMaxHeight());
     }
     ngOnInit() {
         this.cvtWidth = convertSize(this.width);
         this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
             this._checkErrors();
         });
+        logMissingAriaLabelError('CpsTextareaComponent', this.label, this.ariaLabel);
+    }
+    ngOnChanges(changes) {
+        if (changes.width) {
+            this.cvtWidth = convertSize(this.width);
+        }
+        if (changes.maxHeight || changes.resizable) {
+            this._updateMaxHeight();
+        }
+        logMissingAriaLabelError('CpsTextareaComponent', this.label, this.ariaLabel);
+    }
+    ngAfterViewInit() {
+        if (this.resizable === 'vertical') {
+            const textarea = this._textareaEl?.nativeElement;
+            if (textarea) {
+                this._singleRowHeightPx = textarea.offsetHeight / this.rows;
+            }
+        }
     }
     ngOnDestroy() {
         this._statusChangesSubscription?.unsubscribe();
     }
+    _updateMaxHeight() {
+        if (this.resizable !== 'vertical' || this.maxHeight === Infinity) {
+            this.maxHeightPx = null;
+            return;
+        }
+        const css = convertSize(this.maxHeight);
+        const parsed = parseSize(css);
+        if (!parsed)
+            throw new Error(`Unsupported value for maxHeight.`);
+        const rootFontSizePx = this._cpsRootFontSizeService?.fontSize() || 16;
+        if (parsed.unit === 'px') {
+            this.maxHeightPx = parsed.value;
+        }
+        else if (parsed.unit === 'rem') {
+            this.maxHeightPx = parsed.value * rootFontSizePx;
+        }
+        else if (parsed.unit === 'em') {
+            const emBase = isPlatformBrowser(this._platformId)
+                ? parseFloat(getComputedStyle(this._elementRef.nativeElement).fontSize || '16')
+                : rootFontSizePx;
+            this.maxHeightPx = parsed.value * emBase;
+        }
+        else {
+            throw new Error(`Unsupported unit "${parsed.unit}" for maxHeight.`);
+        }
+    }
     _checkErrors() {
         if (!this._control)
             return;
@@ -11883,6 +11973,9 @@ class CpsTextareaComponent {
         const message = errArr.find((msg) => typeof msg === 'string');
         this.error = message || 'Unknown error';
     }
+    get isRequired() {
+        return this._control?.control?.hasValidator(Validators.required) ?? false;
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -11905,31 +11998,68 @@ class CpsTextareaComponent {
         if (this.value !== '')
             this._updateValue('');
     }
+    onClear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clear();
+        this.focus();
+    }
+    get isClearButtonVisible() {
+        return this.persistentClear || !!this.value;
+    }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
     onBlur() {
+        this.isKeyboardFocused = false;
         this._checkErrors();
         this.blurred.emit();
     }
     onFocus() {
+        this.isKeyboardFocused = !this._mouseActivated;
+        this._mouseActivated = false;
         this._control?.control?.markAsTouched();
         this.focused.emit();
     }
+    onTextareaMousedown() {
+        this._mouseActivated = true;
+    }
     focus() {
-        this._elementRef?.nativeElement?.querySelector('textarea')?.focus();
+        this._textareaEl?.nativeElement?.focus();
+    }
+    onResizeHandleKeydown(event) {
+        const textarea = this._textareaEl?.nativeElement;
+        if (!textarea)
+            return;
+        const current = textarea.offsetHeight;
+        let next = current;
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                next = Math.max(current - this._resizeStepPx(), this._singleRowHeightPx);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                next = Math.min(current + this._resizeStepPx(), this.maxHeightPx ?? Infinity);
+                break;
+            default:
+                return;
+        }
+        textarea.style.height = `${next}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTextareaComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTextareaComponent, isStandalone: true, selector: "cps-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", cols: "cols", autofocus: "autofocus", hint: "hint", disabled: "disabled", width: "width", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", resizable: "resizable", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  @if (label) {\n    <div\n      class=\"cps-textarea-label\"\n      [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-textarea-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n\n  <div\n    class=\"cps-textarea-wrap\"\n    [ngClass]=\"{\n      'cps-textarea-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear\n    }\">\n    <textarea\n      spellcheck=\"false\"\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        resize: resizable\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\"></textarea>\n\n    @if (clearable && !disabled) {\n      <span\n        [style.visibility]=\"\n          persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n        \"\n        class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n      </span>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-textarea-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-textarea-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:var(--cps-state-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-line-light);transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:var(--cps-color-bg-disabled);opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-state-error)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTextareaComponent, isStandalone: true, selector: "cps-textarea", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", rows: "rows", cols: "cols", autofocus: "autofocus", spellcheck: "spellcheck", autocomplete: "autocomplete", hint: "hint", disabled: "disabled", readonly: "readonly", width: "width", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", resizable: "resizable", maxHeight: "maxHeight", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, viewQueries: [{ propertyName: "_textareaEl", first: true, predicate: ["textareaEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-textarea-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-textarea-label\"\n      [class.cps-textarea-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-textarea-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n\n  <div\n    class=\"cps-textarea-wrap\"\n    [class.cps-textarea-wrap-error]=\"!!error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    <textarea\n      #textareaEl\n      [attr.spellcheck]=\"spellcheck\"\n      [attr.autocomplete]=\"autocomplete\"\n      [attr.aria-label]=\"ariaLabel || label || null\"\n      [attr.aria-invalid]=\"error ? 'true' : null\"\n      [attr.aria-required]=\"isRequired || null\"\n      [attr.aria-describedby]=\"describedBy\"\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [style.width]=\"cvtWidth\"\n      [style.max-height.px]=\"maxHeightPx\"\n      [style.resize]=\"readonly || disabled ? 'none' : resizable\"\n      (mousedown)=\"onTextareaMousedown()\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\">\n    </textarea>\n\n    @if (clearable && !disabled && !readonly) {\n      <span\n        class=\"clear-btn\"\n        role=\"button\"\n        [attr.tabindex]=\"isClearButtonVisible ? 0 : null\"\n        aria-label=\"Clear\"\n        [attr.aria-hidden]=\"isClearButtonVisible ? null : 'true'\"\n        [style.visibility]=\"isClearButtonVisible ? 'visible' : 'hidden'\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"onClear($event)\"\n        (keydown.enter)=\"onClear($event)\"\n        (keydown.space)=\"onClear($event)\">\n        <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n      </span>\n    }\n\n    @if (resizable === 'vertical' && !disabled && !readonly) {\n      <div\n        class=\"cps-textarea-resize-handle\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Vertically resize textarea\"\n        aria-description=\"Use up and down arrow keys to resize\"\n        (keydown)=\"onResizeHandleKeydown($event)\"></div>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-textarea-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-textarea-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap:hover:has(textarea:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap:focus-within:not(:has(textarea:read-only)),:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:has(textarea:read-only){border-color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:2.375rem;border:none;transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:0;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:read-only{cursor:default}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-mild);background-color:var(--cps-color-bg-disabled);opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle{position:absolute;bottom:0;right:0;width:1.5rem;height:1.5rem;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus{outline:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{margin-left:.6875rem;margin-top:.6875rem}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible{position:absolute;bottom:0;right:0}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.4375rem;right:.4375rem;display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:hover cps-icon{opacity:1!important}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus{outline:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible{position:absolute;top:.4375rem;right:.4375rem}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:.5rem}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent, CpsInfoCircleComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  @if (label) {\n    <div\n      class=\"cps-textarea-label\"\n      [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-textarea-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n\n  <div\n    class=\"cps-textarea-wrap\"\n    [ngClass]=\"{\n      'cps-textarea-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear\n    }\">\n    <textarea\n      spellcheck=\"false\"\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        resize: resizable\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\"></textarea>\n\n    @if (clearable && !disabled) {\n      <span\n        [style.visibility]=\"\n          persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n        \"\n        class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n      </span>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-textarea-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-textarea-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:var(--cps-state-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-line-light);transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:var(--cps-color-bg-disabled);opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-state-error)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"] }]
+            args: [{ selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent, CpsInfoCircleComponent], template: "<div class=\"cps-textarea-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-textarea-label\"\n      [class.cps-textarea-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-textarea-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n\n  <div\n    class=\"cps-textarea-wrap\"\n    [class.cps-textarea-wrap-error]=\"!!error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    <textarea\n      #textareaEl\n      [attr.spellcheck]=\"spellcheck\"\n      [attr.autocomplete]=\"autocomplete\"\n      [attr.aria-label]=\"ariaLabel || label || null\"\n      [attr.aria-invalid]=\"error ? 'true' : null\"\n      [attr.aria-required]=\"isRequired || null\"\n      [attr.aria-describedby]=\"describedBy\"\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [style.width]=\"cvtWidth\"\n      [style.max-height.px]=\"maxHeightPx\"\n      [style.resize]=\"readonly || disabled ? 'none' : resizable\"\n      (mousedown)=\"onTextareaMousedown()\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\">\n    </textarea>\n\n    @if (clearable && !disabled && !readonly) {\n      <span\n        class=\"clear-btn\"\n        role=\"button\"\n        [attr.tabindex]=\"isClearButtonVisible ? 0 : null\"\n        aria-label=\"Clear\"\n        [attr.aria-hidden]=\"isClearButtonVisible ? null : 'true'\"\n        [style.visibility]=\"isClearButtonVisible ? 'visible' : 'hidden'\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"onClear($event)\"\n        (keydown.enter)=\"onClear($event)\"\n        (keydown.space)=\"onClear($event)\">\n        <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n      </span>\n    }\n\n    @if (resizable === 'vertical' && !disabled && !readonly) {\n      <div\n        class=\"cps-textarea-resize-handle\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Vertically resize textarea\"\n        aria-description=\"Use up and down arrow keys to resize\"\n        (keydown)=\"onResizeHandleKeydown($event)\"></div>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-textarea-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-textarea-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap:hover:has(textarea:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap:focus-within:not(:has(textarea:read-only)),:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:has(textarea:read-only){border-color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:2.375rem;border:none;transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:0;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:read-only{cursor:default}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-mild);background-color:var(--cps-color-bg-disabled);opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle{position:absolute;bottom:0;right:0;width:1.5rem;height:1.5rem;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus{outline:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{margin-left:.6875rem;margin-top:.6875rem}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible{position:absolute;bottom:0;right:0}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.4375rem;right:.4375rem;display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:hover cps-icon{opacity:1!important}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus{outline:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible{position:absolute;top:.4375rem;right:.4375rem}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:.5rem}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }] }, { type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], rows: [{
@@ -11938,10 +12068,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], autofocus: [{
                 type: Input
+            }], spellcheck: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
             }], hint: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], readonly: [{
+                type: Input
             }], width: [{
                 type: Input
             }], clearable: [{
@@ -11954,6 +12090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], resizable: [{
                 type: Input
+            }], maxHeight: [{
+                type: Input
             }], infoTooltip: [{
                 type: Input
             }], infoTooltipClass: [{
@@ -11974,6 +12112,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Output
             }], blurred: [{
                 type: Output
+            }], _textareaEl: [{
+                type: ViewChild,
+                args: ['textareaEl']
             }] } });
 
 /**