#26231 Implement a trim input text directive (#26266)

#26231  Add a directive to trim input on blur

core-web/apps/dotcms-ui/.storybook/main.js

@@ -13,7 +13,8 @@ module.exports = {
         '../../../libs/template-builder/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/block-editor/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/contenttype-fields/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-        '../../../libs/ui/**/*.stories.@(js|jsx|ts|tsx|mdx)'
+        '../../../libs/ui/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+        '../../../libs/portlets/**/*.stories.@(js|jsx|ts|tsx|mdx)'
     ],
     addons: ['storybook-design-token', '@storybook/addon-essentials', ...rootMain.addons],
     features: {

core-web/apps/dotcms-ui/.storybook/tsconfig.json

@@ -9,6 +9,7 @@
         "../../../**/template-builder/**/src/lib/**/*.stories.ts",
         "../../../**/block-editor/**/src/lib/**/*.stories.ts",
         "../../../**/contenttype-fields/**/src/lib/**/*.stories.ts",
-        "../../../**/ui/**/src/lib/**/*.stories.ts"
+        "../../../**/ui/**/src/lib/**/*.stories.ts",
+        "../../../**/portlets/**/src/lib/**/*.stories.ts"
     ]
 }

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-configuration/components/dot-experiments-configuration-goal-select/dot-experiments-configuration-goal-select.component.html

@@ -3,43 +3,37 @@
         [(visible)]="vm.status.isOpen"
         (onHide)="closeSidebar()"
         dotSidebar
-        dotSize="{{ sidebarSizes.LG }}"
-    >
+        dotSize="{{ sidebarSizes.LG }}">
         <dot-sidebar-header
             [actionButtonTpl]="actionHeaderBtnTpl"
-            dotTitle="{{ 'experiments.configure.goals.sidebar.header' | dm }}"
-        />
+            dotTitle="{{ 'experiments.configure.goals.sidebar.header' | dm }}" />
         <div class="experiment-goal-select__form-wrapper flex flex-column">
             <form
                 class="p-fluid"
                 id="select-goal-form"
                 [formGroup]="form"
                 data-testId="select-goal-form"
-                novalidate
-            >
+                novalidate>
                 <div formGroupName="primary">
                     <div class="field">
                         <dot-experiment-options formControlName="type">
                             <dot-experiment-options-item
                                 [icon]="goals.BOUNCE_RATE.icon"
                                 [value]="goalsTypes.BOUNCE_RATE"
                                 detail="{{ goals.BOUNCE_RATE.description | dm }}"
-                                title="{{ goals.BOUNCE_RATE.label | dm }}"
-                            />
+                                title="{{ goals.BOUNCE_RATE.label | dm }}" />
 
                             <dot-experiment-options-item
                                 [icon]="goals.EXIT_RATE.icon"
                                 [value]="goalsTypes.EXIT_RATE"
                                 detail="{{ goals.EXIT_RATE.description | dm }}"
-                                title="{{ goals.EXIT_RATE.label | dm }}"
-                            />
+                                title="{{ goals.EXIT_RATE.label | dm }}" />
 
                             <dot-experiment-options-item
                                 [icon]="goals.REACH_PAGE.icon"
                                 [value]="goalsTypes.REACH_PAGE"
                                 detail="{{ goals.REACH_PAGE.description | dm }}"
-                                title="{{ goals.REACH_PAGE.label | dm }}"
-                            >
+                                title="{{ goals.REACH_PAGE.label | dm }}">
                                 <ng-template dotOptionContent>
                                     <dot-experiments-goal-configuration-reach-page />
                                 </ng-template>
@@ -49,8 +43,7 @@
                                 [icon]="goals.URL_PARAMETER.icon"
                                 [value]="goalsTypes.URL_PARAMETER"
                                 detail="{{ goals.URL_PARAMETER.description | dm }}"
-                                title="{{ goals.URL_PARAMETER.label | dm }}"
-                            >
+                                title="{{ goals.URL_PARAMETER.label | dm }}">
                                 <ng-template dotOptionContent>
                                     <dot-experiments-goal-configuration-url-parameter-component />
                                 </ng-template>
@@ -66,16 +59,15 @@
                             [maxlength]="this.maxNameLength + 1"
                             [placeholder]="'experiments.goal.reach_page.form.name.placeholder' | dm"
                             data-testId="goal-name-input"
+                            dotTrimInput
                             formControlName="name"
                             name="name"
                             pInputText
                             required
-                            type="text"
-                        />
+                            type="text" />
 
                         <dot-field-validation-message
-                            [field]="goalNameControl"
-                        ></dot-field-validation-message>
+                            [field]="goalNameControl"></dot-field-validation-message>
                     </div>
                 </div>
             </form>
@@ -92,7 +84,6 @@
             data-testId="add-goal-button"
             label="{{ 'experiments.configure.goals.sidebar.header.button.apply.label' | dm }}"
             pButton
-            type="submit"
-        ></button>
+            type="submit"></button>
     </ng-template>
 </ng-container>

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-configuration/components/dot-experiments-configuration-goal-select/dot-experiments-configuration-goal-select.component.ts

@@ -23,7 +23,7 @@ import {
     MAX_INPUT_DESCRIPTIVE_LENGTH,
     StepStatus
 } from '@dotcms/dotcms-models';
-import { DotAutofocusDirective, DotMessagePipe } from '@dotcms/ui';
+import { DotAutofocusDirective, DotMessagePipe, DotTrimInputDirective } from '@dotcms/ui';
 import { DotDropdownDirective } from '@portlets/shared/directives/dot-dropdown.directive';
 import {
     DotSidebarDirective,
@@ -59,7 +59,8 @@ import { DotExperimentsConfigurationStore } from '../../store/dot-experiments-co
         DropdownModule,
         DotExperimentsGoalConfigurationReachPageComponent,
         DotExperimentsGoalConfigurationUrlParameterComponentComponent,
-        DotExperimentsGoalsComingSoonComponent
+        DotExperimentsGoalsComingSoonComponent,
+        DotTrimInputDirective
     ],
     templateUrl: './dot-experiments-configuration-goal-select.component.html',
     styleUrls: ['./dot-experiments-configuration-goal-select.component.scss'],

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-configuration/components/dot-experiments-configuration-variants-add/dot-experiments-configuration-variants-add.component.html

@@ -2,39 +2,36 @@
     <p-sidebar [(visible)]="vm.status.isOpen" (onHide)="closeSidebar()" dotSidebar>
         <dot-sidebar-header
             [actionButtonTpl]="actionHeaderBtnTpl"
-            dotTitle="{{ 'experiments.configure.variants.add' | dm }}"
-        ></dot-sidebar-header>
+            dotTitle="{{ 'experiments.configure.variants.add' | dm }}"></dot-sidebar-header>
 
         <div class="experiment-variant-add__form-wrapper">
             <form
                 class="experiment-create__form p-fluid"
                 id="new-variant-form"
                 [formGroup]="form"
                 data-testId="new-variant-form"
-                novalidate
-            >
+                novalidate>
                 <div class="field">
                     <label class="p-label-input-required" for="name">{{
                         'experiments.configure.variant.add.form.name.label' | dm
                     }}</label>
                     <input
                         id="name"
-                        [tabindex]="1"
                         [maxlength]="this.maxNameLength + 1"
+                        [tabindex]="1"
                         data-testId="add-experiment-description-input"
                         dotAutofocus
+                        dotTrimInput
                         formControlName="name"
                         name="name"
                         pInputText
                         placeholder="{{
                             'experiments.configure.variant.add.form.name.placeholder' | dm
                         }}"
                         required
-                        type="text"
-                    />
+                        type="text" />
                     <dot-field-validation-message
-                        [field]="form.controls.name"
-                    ></dot-field-validation-message>
+                        [field]="form.controls.name"></dot-field-validation-message>
                 </div>
             </form>
         </div>
@@ -49,7 +46,6 @@
             form="new-variant-form"
             label="{{ 'experiments.action.add' | dm }}"
             pButton
-            type="submit"
-        ></button>
+            type="submit"></button>
     </ng-template>
 </ng-container>

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-list/components/dot-experiments-create/dot-experiments-create.component.html

@@ -2,8 +2,7 @@
     <p-sidebar [(visible)]="vm.sidebar.isOpen" (onHide)="closeSidebar()" dotSidebar>
         <dot-sidebar-header
             [actionButtonTpl]="actionHeaderBtnTpl"
-            dotTitle="{{ 'experiments.create.form.sidebar.header' | dm }}"
-        ></dot-sidebar-header>
+            dotTitle="{{ 'experiments.create.form.sidebar.header' | dm }}"></dot-sidebar-header>
 
         <div class="experiment-create__form-wrapper">
             <form
@@ -12,8 +11,7 @@
                 #myForm="ngForm"
                 [formGroup]="form"
                 data-testId="new-experiment-form"
-                novalidate
-            >
+                novalidate>
                 <div class="field">
                     <label dotFieldRequired for="name">{{
                         'experiments.create.form.name.label' | dm
@@ -24,16 +22,15 @@
                         [tabindex]="1"
                         data-testId="add-experiment-name-input"
                         dotAutofocus
+                        dotTrimInput
                         formControlName="name"
                         name="name"
                         pInputText
                         placeholder="{{ 'experiments.create.form.name.placeholder' | dm }}"
                         required
-                        type="text"
-                    />
+                        type="text" />
                     <dot-field-validation-message
-                        [field]="form.controls.name"
-                    ></dot-field-validation-message>
+                        [field]="form.controls.name"></dot-field-validation-message>
                 </div>
 
                 <div class="field">
@@ -48,12 +45,10 @@
                         name="description"
                         pInputTextarea
                         placeholder="{{ 'experiments.create.form.description.placeholder' | dm }}"
-                        rows="6"
-                    ></textarea>
+                        rows="6"></textarea>
 
                     <dot-field-validation-message
-                        [field]="form.controls.description"
-                    ></dot-field-validation-message>
+                        [field]="form.controls.description"></dot-field-validation-message>
                 </div>
             </form>
         </div>
@@ -68,7 +63,6 @@
             form="new-experiment-form"
             label="{{ 'experiments.action.add' | dm }}"
             pButton
-            type="submit"
-        ></button>
+            type="submit"></button>
     </ng-template>
 </ng-container>

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-list/components/dot-experiments-create/dot-experiments-create.component.ts

@@ -11,7 +11,12 @@ import { SidebarModule } from 'primeng/sidebar';
 
 import { DotFieldValidationMessageModule } from '@components/_common/dot-field-validation-message/dot-file-validation-message.module';
 import { DotExperiment, MAX_INPUT_TITLE_LENGTH } from '@dotcms/dotcms-models';
-import { DotAutofocusDirective, DotFieldRequiredDirective, DotMessagePipe } from '@dotcms/ui';
+import {
+    DotAutofocusDirective,
+    DotFieldRequiredDirective,
+    DotMessagePipe,
+    DotTrimInputDirective
+} from '@dotcms/ui';
 import { DotSidebarDirective } from '@portlets/shared/directives/dot-sidebar.directive';
 import { DotSidebarHeaderComponent } from '@shared/dot-sidebar-header/dot-sidebar-header.component';
 import { DotValidators } from '@shared/validators/dotValidators';
@@ -44,7 +49,8 @@ interface CreateForm {
         InputTextModule,
         SidebarModule,
         ButtonModule,
-        DotFieldRequiredDirective
+        DotFieldRequiredDirective,
+        DotTrimInputDirective
     ],
     templateUrl: './dot-experiments-create.component.html',
     styleUrls: ['./dot-experiments-create.component.scss'],

core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/ui/dot-experiments-inline-edit-text/dot-experiments-inline-edit-text.component.html

@@ -10,8 +10,7 @@
                 [class]="inplaceSizes[inputSize].button"
                 data-testId="text-input-button"
                 icon="pi pi-pencil"
-                pButton
-            ></button>
+                pButton></button>
         </div>
 
         <ng-template #noTextDefinedTpl>
@@ -31,26 +30,24 @@
                     (keydown.escape)="deactivateInplace()"
                     data-testId="inplace-input"
                     dotAutofocus
+                    dotTrimInput
                     formControlName="text"
-                    pInputText
-                />
+                    pInputText />
                 <i
                     class="pi pi-times cursor-pointer"
                     (click)="deactivateInplace()"
-                    data-testId="variant-inplace-button"
-                ></i>
+                    data-testId="variant-inplace-button"></i>
             </div>
             <button
-                class="p-button-rounded p-button-sm p-button-text"
+                class="p-button-rounded p-button-text"
                 [class]="inplaceSizes[inputSize].button"
                 [disabled]="form.invalid || textControl.pristine"
                 [loading]="isLoading"
                 (click)="saveAction()"
                 data-testId="text-save-btn"
                 icon="pi pi-save"
                 pButton
-                type="button"
-            ></button>
+                type="button"></button>
         </form>
 
         <ng-container *ngIf="form.invalid && showErrorMsg">

core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/ui/dot-experiments-inline-edit-text/dot-experiments-inline-edit-text.component.scss

@@ -17,16 +17,14 @@
     }
 
     &::ng-deep {
-        .p-disabled,
-        .p-component {
-            width: 100%;
-
+        .p-disabled {
             &:disabled {
                 opacity: 0.8;
             }
         }
 
         p-inplace .p-inplace {
+            width: 100%;
             .p-inplace-display {
                 padding: 0;
                 white-space: pre-wrap;

core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/ui/dot-experiments-inline-edit-text/dot-experiments-inline-edit-text.component.spec.ts

@@ -21,7 +21,7 @@ const LONG_TEXT =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum eros sit amet malesuada mattis. Morbi ac congue lectus, ut vestibulum velit. Ut sed ornare metus. Proin a orci lacus. Aenean odio lacus, fringilla eu ipsum non, pellentesque sagittis purus. Integer non.';
 const NEW_EXPERIMENT_DESCRIPTION = 'new experiment description';
 
-describe('DotExperimentsExperimentSummaryComponent', () => {
+describe('DotExperimentsInlineEditTextComponent', () => {
     let spectator: Spectator<DotExperimentsInlineEditTextComponent>;
     const createComponent = createComponentFactory({
         component: DotExperimentsInlineEditTextComponent,
@@ -176,6 +176,17 @@ describe('DotExperimentsExperimentSummaryComponent', () => {
                 expect(deactivate).toHaveBeenCalled();
             });
 
+            it('should deactivate the textControl if isLoading input has `currentValue = true` ', () => {
+                spectator.dispatchMouseEvent(byTestId('text-input'), 'click');
+
+                const input = spectator.query(byTestId('inplace-input')) as HTMLInputElement;
+
+                expect(input.disabled).toBe(false);
+
+                spectator.setInput('isLoading', true);
+                expect(input.disabled).toBe(true);
+            });
+
             it('should show `dot-field-validation-message` message error by default', () => {
                 spectator.setInput('text', SHORT_TEXT);
                 spectator.setInput('required', true);

core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/ui/dot-experiments-inline-edit-text/dot-experiments-inline-edit-text.component.ts

@@ -23,7 +23,7 @@ import { InputTextModule } from 'primeng/inputtext';
 
 import { DotFieldValidationMessageModule } from '@components/_common/dot-field-validation-message/dot-file-validation-message.module';
 import { MAX_INPUT_DESCRIPTIVE_LENGTH } from '@dotcms/dotcms-models';
-import { DotAutofocusDirective, DotMessagePipe } from '@dotcms/ui';
+import { DotAutofocusDirective, DotMessagePipe, DotTrimInputDirective } from '@dotcms/ui';
 import { DotValidators } from '@shared/validators/dotValidators';
 
 type InplaceInputSize = 'small' | 'large';
@@ -50,7 +50,8 @@ const InplaceInputSizeMapPrimeNg: Record<InplaceInputSize, { button: string; inp
         DotFieldValidationMessageModule,
         InplaceModule,
         InputTextModule,
-        SharedModule
+        SharedModule,
+        DotTrimInputDirective
     ],
     templateUrl: './dot-experiments-inline-edit-text.component.html',
     styleUrls: ['./dot-experiments-inline-edit-text.component.scss'],
@@ -97,7 +98,7 @@ export class DotExperimentsInlineEditTextComponent implements OnChanges {
      * Flag to make the text required
      */
     @Input()
-    required: boolean;
+    required = false;
 
     /**
      * Flag to hide the error message
@@ -134,6 +135,10 @@ export class DotExperimentsInlineEditTextComponent implements OnChanges {
             this.deactivateInplace();
         }
 
+        isLoading && isLoading.currentValue
+            ? this.textControl.disable()
+            : this.textControl.enable();
+
         if (maxCharacterLength && maxCharacterLength.currentValue) {
             this.validatorsFn.push(Validators.maxLength(maxCharacterLength.currentValue));
         } else {