docs(upload): ajusta propriedade com strict ativado

A propriedade strictTemplates já vem configurado como true na versão atual do Angular e desta forma o exemplo apresenta erro de compilação. Fixes #1402
po-ui · Sep 21, 2022 · 635bb45 · 635bb45
1 parent e50742f
commit 635bb45
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 83 deletions.
diff --git a/projects/ui/src/lib/components/po-field/po-upload/po-upload-base.component.ts b/projects/ui/src/lib/components/po-field/po-upload/po-upload-base.component.ts
@@ -255,7 +255,7 @@ export abstract class PoUploadBaseComponent implements ControlValueAccessor, Val
    * two-way binding no componente deve se utilizar da seguinte forma:
    *
    * ```
-   * <po-upload ... [ngModel]="UploadModel" (ngModelChange)="uploadModel = $event"> </po-upload>
+   * <po-upload ... [ngModel]="uploadModel" (ngModelChange)="uploadModel = $event"> </po-upload>
    * ```
    *
    */

diff --git a/projects/ui/src/lib/components/po-field/po-upload/po-upload.component.ts b/projects/ui/src/lib/components/po-field/po-upload/po-upload.component.ts
@@ -43,6 +43,11 @@ import { PoUploadStatus } from './po-upload-status.enum';
  *   <file name="sample-po-upload-resume/sample-po-upload-resume.component.ts"> </file>
  * </example>
  *
+ * <example name="po-upload-resume-drag-drop" title="PO Upload - Resume - Drag & Drop">
+ *   <file name="sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.html"> </file>
+ *   <file name="sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.ts"> </file>
+ * </example>
+ *
  * <example name="po-upload-rs" title="PO Upload - Realize & Show">
  *   <file name="sample-po-upload-rs/sample-po-upload-rs.component.html"> </file>
  *   <file name="sample-po-upload-rs/sample-po-upload-rs.component.ts"> </file>

diff --git a/...nts/po-field/po-upload/samples/sample-po-upload-labs/sample-po-upload-labs.component.html b/...nts/po-field/po-upload/samples/sample-po-upload-labs/sample-po-upload-labs.component.html
@@ -1,6 +1,7 @@
 <po-upload
   name="upload"
-  [(ngModel)]="upload"
+  [ngModel]="upload"
+  (ngModelChange)="upload = $event"
   [p-auto-upload]="properties.includes('autoupload')"
   [p-directory]="properties.includes('directory')"
   [p-disabled]="properties.includes('disabled')"
@@ -68,7 +69,7 @@
       p-clean
       p-help="Height of drag drop area"
       p-label="Drag Drop Height"
-      p-min="160"
+      [p-min]="160"
     >
     </po-number>
 
@@ -135,8 +136,9 @@
     <po-checkbox-group
       class="po-md-12"
       name="properties"
-      [(ngModel)]="properties"
-      p-columns="4"
+      [ngModel]="properties"
+      (ngModelChange)="properties = $event"
+      [p-columns]="4"
       p-help="Select any options"
       p-label="Properties"
       [p-options]="propertiesOptions"

diff --git a/...nents/po-field/po-upload/samples/sample-po-upload-labs/sample-po-upload-labs.component.ts b/...nents/po-field/po-upload/samples/sample-po-upload-labs/sample-po-upload-labs.component.ts
@@ -7,23 +7,24 @@ import { PoCheckboxGroupOption, PoUploadFileRestrictions, PoUploadLiterals } fro
   templateUrl: './sample-po-upload-labs.component.html'
 })
 export class SamplePoUploadLabsComponent implements OnInit {
-  allowedExtensions: string;
-  customLiterals: PoUploadLiterals;
-  dragDropHeight: number;
-  event: string;
-  formField: string;
-  help: string;
-  label: string;
-  literals: string;
-  maxFiles: number;
-  maxSize: number;
-  minSize: number;
-  properties: Array<string>;
-  restrictions: PoUploadFileRestrictions;
-  upload: Array<any>;
-  url: string;
-  headers: { [name: string]: string | Array<string> };
-  headersLabs: string;
+  allowedExtensions!: string;
+  customLiterals!: PoUploadLiterals;
+  dragDropHeight!: number | undefined;
+  event!: string;
+  formField!: string;
+  help!: string;
+  label!: string;
+  literals!: string;
+  maxFiles!: number | undefined;
+  maxSize!: number | undefined;
+  minSize!: number | undefined;
+  properties!: Array<string>;
+  restrictions!: PoUploadFileRestrictions;
+  upload!: Array<any> | undefined;
+  url!: string;
+  headers!: { [name: string]: string | Array<string> };
+  headersLabs!: string;
+
   public readonly propertiesOptions: Array<PoCheckboxGroupOption> = [
     { value: 'autoupload', label: 'Automatic upload' },
     { value: 'directory', label: 'Directory' },
@@ -37,6 +38,8 @@ export class SamplePoUploadLabsComponent implements OnInit {
     { value: 'sendButton', label: 'Hide Send Files Button' }
   ];
 
+  constructor() {}
+
   ngOnInit() {
     this.restore();
   }
@@ -78,13 +81,13 @@ export class SamplePoUploadLabsComponent implements OnInit {
   }
 
   restore() {
-    this.allowedExtensions = undefined;
-    this.customLiterals = undefined;
+    this.allowedExtensions = '';
+    this.customLiterals = {};
     this.dragDropHeight = undefined;
-    this.event = undefined;
-    this.formField = undefined;
-    this.label = undefined;
-    this.help = undefined;
+    this.event = '';
+    this.formField = '';
+    this.label = '';
+    this.help = '';
     this.literals = '';
     this.maxFiles = undefined;
     this.maxSize = undefined;
@@ -93,8 +96,8 @@ export class SamplePoUploadLabsComponent implements OnInit {
     this.restrictions = {};
     this.upload = undefined;
     this.url = 'https://po-sample-api.herokuapp.com/v1/uploads/addFile';
-    this.headers = undefined;
-    this.headersLabs = undefined;
+    this.headers = {};
+    this.headersLabs = '';
   }
 
   private getValueInBytes(value: number) {

diff --git a/...amples/sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.html b/...amples/sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.html
@@ -4,7 +4,8 @@
   </div>
 
   <div class="po-row">
-    <po-textarea class="po-md-12" name="biograph" [(ngModel)]="biograph" p-label="Biograph" p-required> </po-textarea>
+    <po-textarea class="po-md-12" name="biograph" [(ngModel)]="biograph" p-label="Biograph" [p-required]="true">
+    </po-textarea>
   </div>
 
   <div class="po-row">
@@ -15,15 +16,16 @@
     <po-upload
       class="po-md-12"
       name="resume"
-      [(ngModel)]="resume"
-      p-drag-drop
-      p-drag-drop-height="160"
+      [ngModel]="resume"
+      (ngModelChange)="resume = $event"
+      [p-drag-drop]="true"
+      [p-drag-drop-height]="160"
       p-label="Resume"
-      p-required
+      [p-required]="true"
       p-url="https://po-sample-api.herokuapp.com/v1/uploads/addFile"
-      p-restrictions="{maxFileSize: '204800'}"
-      (p-error)="resumeUploadError()"
-      (p-success)="resumeUploadSuccess()"
+      [p-restrictions]="{ maxFileSize: 204800 }"
+      (p-error)="resumeUploadError($event)"
+      (p-success)="resumeUploadSuccess($event)"
     >
     </po-upload>
   </div>

diff --git a/.../samples/sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.ts b/.../samples/sample-po-upload-resume-drag-drop/sample-po-upload-resume-drag-drop.component.ts
@@ -10,11 +10,11 @@ import { PoNotificationService } from '@po-ui/ng-components';
 export class SamplePoUploadResumeDragDropComponent implements OnInit {
   @ViewChild('formOpportunity', { static: true }) formOpportunity: UntypedFormControl;
 
-  biograph: string;
-  linkedin: string;
-  name: string;
-  resume: string;
-  uploadedResume: boolean;
+  biograph!: string;
+  linkedin!: string;
+  name!: string;
+  resume!: string;
+  uploadedResume!: boolean;
 
   constructor(private poNotification: PoNotificationService) {}
 
@@ -29,11 +29,11 @@ export class SamplePoUploadResumeDragDropComponent implements OnInit {
     this.poNotification.success('You were applied successfully');
   }
 
-  resumeUploadError() {
+  resumeUploadError(event: any) {
     this.uploadedResume = false;
   }
 
-  resumeUploadSuccess() {
+  resumeUploadSuccess(event: any) {
     this.uploadedResume = true;
   }
 }
diff --git a/...po-field/po-upload/samples/sample-po-upload-resume/sample-po-upload-resume.component.html b/...po-field/po-upload/samples/sample-po-upload-resume/sample-po-upload-resume.component.html
@@ -4,7 +4,8 @@
   </div>
 
   <div class="po-row">
-    <po-textarea class="po-md-12" name="biograph" [(ngModel)]="biograph" p-label="Biograph" p-required> </po-textarea>
+    <po-textarea class="po-md-12" name="biograph" [(ngModel)]="biograph" p-label="Biograph" [p-required]="true">
+    </po-textarea>
   </div>
 
   <div class="po-row">
@@ -15,20 +16,21 @@
     <po-upload
       class="po-md-12"
       name="resume"
-      [(ngModel)]="resume"
+      [ngModel]="resume"
+      (ngModelChange)="resume = $event"
       p-label="Resume"
-      p-required
+      [p-required]="true"
       p-url="https://po-sample-api.herokuapp.com/v1/uploads/addFile"
-      [p-restrictions]="{ maxFileSize: '204800' }"
-      (p-error)="resumeUploadError()"
-      (p-success)="resumeUploadSuccess()"
+      [p-restrictions]="{ maxFileSize: 204800 }"
+      (p-error)="resumeUploadError($event)"
+      (p-success)="resumeUploadSuccess($event)"
     >
     </po-upload>
   </div>
 
   <div class="po-row">
     <po-button
-      class="po-md-4"
+      class="po-md-4 po-mt-2"
       p-label="Apply"
       [p-disabled]="formOpportunity.invalid || !uploadedResume"
       (p-click)="apply()"

diff --git a/...s/po-field/po-upload/samples/sample-po-upload-resume/sample-po-upload-resume.component.ts b/...s/po-field/po-upload/samples/sample-po-upload-resume/sample-po-upload-resume.component.ts
@@ -8,13 +8,13 @@ import { PoNotificationService } from '@po-ui/ng-components';
   templateUrl: 'sample-po-upload-resume.component.html'
 })
 export class SamplePoUploadResumeComponent implements OnInit {
-  @ViewChild('formOpportunity', { static: true }) formOpportunity: UntypedFormControl;
+  @ViewChild('formOpportunity', { static: true }) formOpportunity!: UntypedFormControl;
 
-  biograph: string;
-  linkedin: string;
-  name: string;
-  resume: string;
-  uploadedResume: boolean;
+  biograph!: string;
+  linkedin!: string;
+  name!: string;
+  resume!: string;
+  uploadedResume!: boolean;
 
   constructor(private poNotification: PoNotificationService) {}
 
@@ -29,11 +29,11 @@ export class SamplePoUploadResumeComponent implements OnInit {
     this.poNotification.success('You were applied successfully');
   }
 
-  resumeUploadError() {
+  resumeUploadError(event: any) {
     this.uploadedResume = false;
   }
 
-  resumeUploadSuccess() {
+  resumeUploadSuccess(event: any) {
     this.uploadedResume = true;
   }
 }
diff --git a/...ponents/po-field/po-upload/samples/sample-po-upload-rs/sample-po-upload-rs.component.html b/...ponents/po-field/po-upload/samples/sample-po-upload-rs/sample-po-upload-rs.component.html
@@ -2,20 +2,20 @@
   <po-stepper
     #stepper
     class="po-lg-10 po-offset-lg-2 po-offset-xl-2"
-    p-orientation="vertical"
-    p-step-icons
-    p-step-size="42"
+    [p-orientation]="orientation"
+    [p-step-icons]="true"
+    [p-step-size]="42"
   >
     <po-step p-label="Welcome">
       <po-widget class="po-lg-8 po-mt-2" p-title="Realize & Show">
-        <div class="tht-row">
+        <div class="po-row">
           <div class="po-sm-12">
             <h1 class="po-font-title">Welcome, TOTVER!</h1>
             <p class="po-font-text-large">Let's submit your project?</p>
           </div>
         </div>
 
-        <div class="tht-row">
+        <div class="po-row">
           <po-button class="po-sm-12 po-mt-2" p-label="Yes!" p-kind="primary" (p-click)="stepper.next()"> </po-button>
         </div>
       </po-widget>
@@ -51,12 +51,14 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
               #upload
               class="po-sm-12"
               name="project"
-              [(ngModel)]="project"
-              p-hide-select-button
-              p-hide-send-button
-              p-required
+              [ngModel]="project"
+              (ngModelChange)="project = $event"
+              [p-hide-select-button]="true"
+              [p-hide-send-button]="true"
+              [p-required]="true"
               p-url="https://po-sample-api.herokuapp.com/v1/uploads/addFile"
               [p-restrictions]="restrictions"
+              (p-success)="eventSuccess($event)"
             >
             </po-upload>
           </div>
@@ -69,7 +71,7 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
               p-label="Title"
               p-placeholder="Be creative"
               p-required
-              [p-disabled]="project.length < 1"
+              p-disabled="{{ project.length < 1 }}"
             >
             </po-input>
           </div>
@@ -80,19 +82,19 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
               name="description"
               [(ngModel)]="description"
               p-label="Description"
-              p-maxlength="140"
+              [p-maxlength]="140"
               p-placeholder="Resume on few words"
-              p-required
+              [p-required]="true"
               [p-disabled]="project.length < 1"
             >
             </po-textarea>
           </div>
 
-          <div class="tht-row">
+          <div class="po-row">
             <po-button
               class="po-sm-12 po-mt-2"
               p-label="Done"
-              [p-disabled]="canSubmitProject()"
+              [p-disabled]="!canSubmitProject()"
               (p-click)="submitProject()"
             >
             </po-button>
@@ -103,7 +105,7 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
 
     <po-step p-label="Confirm">
       <po-widget class="po-lg-8 po-mt-2" p-title="Realize & Show">
-        <div class="tht-row" *ngIf="canSubmitProject()">
+        <div class="po-row" *ngIf="canSubmitProject()">
           <div class="po-sm-12">
             <p class="po-font-text-large">Confirm informations</p>
           </div>