document

src/app/_modules/form-fields/types/document/form-field-document.component.scss

@@ -1,72 +1 @@
-.area {
-  position: relative;
-  display: flex;
-  height: 100px;
-  padding: 16px;
-  border: var(--prime) dashed 1px;
-  border-radius: 4px;
-  overflow: hidden;
-  font-size: 20px;
-  &.hover {
-    background-color: #e0e0e0;
-  }
-  p {
-    margin: auto;
-    color: var(--second-dis);
-    text-align: center;
-    span {
-      color: var(--orange-2);
-      cursor: pointer;
-    }
-  }
-  input {
-    display: none;
-  }
-  .indicator {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 16px;
-    background-color: #f7f7f7;
-    .label {
-      margin-bottom: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .progress {
-      height: 4px;
-      background-color: #dfdfdf;
-      overflow: hidden;
-      .fill {
-        width: 0;
-        height: 100%;
-        background-color: #3ca128;
-      }
-    }
-  }
-}
 
-.values {
-
-  .item {
-    background: transparent url('~src/assets/images/icons/document/document_60dp.svg') 0 0 no-repeat;
-    background-size: contain;
-    height: 60px;
-    padding-left: 72px;
-    font-size: 20px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-top: 10px;
-    button{
-      margin-left: 10px;
-    }
-  
-  }
-}

src/app/_modules/form-fields/types/document/form-field-document.module.ts

@@ -5,11 +5,13 @@ import {FormFieldDocumentComponent} from "@app/_modules/form-fields/types/docume
 import {FieldDocumentReadonlyComponent} from "@app/_modules/form-fields/types/document/readonly/field-document-readonly.component";
 import {FieldDocumentSingleComponent} from "@app/_modules/form-fields/types/document/single/field-document-single.component";
 import {FieldDocumentMultipleComponent} from "@app/_modules/form-fields/types/document/multiple/field-document-multiple.component";
+import { WidjetModule } from '@app/_modules/widjet/widjet.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    WidjetModule
   ],
   declarations: [
     FormFieldDocumentComponent,

src/app/_modules/form-fields/types/document/multiple/field-document-multiple.component.html

@@ -11,8 +11,8 @@
 </div>
 <div class="values">
   <div class="item" *ngFor="let asset of assets">
-    <pre>{{asset.extension|json}}</pre>
+    <file-ico [type]="asset.extension"></file-ico>
     <a href="{{asset.links?.open}}" target="_blank">{{asset.name}}</a>
-    <button type="button" class="clear trash" (click)="removeValue(asset)"></button>
+    <ico ico="delete_24" (click)="removeValue(asset)"></ico>
   </div>
 </div>

src/app/_modules/pages/sections/types/basic/documents/documents-section.component.html

@@ -1,5 +1,8 @@
 <div class="documents list default">
   <div class="items">
-    <div class="item" *ngFor="let item of items"><a [href]="item.links?.open" target="_blank">{{item.name}}</a></div>
+    <div class="item" *ngFor="let item of items">
+      <file-ico [type]="item.extension"></file-ico>
+      <a [href]="item.links?.open" target="_blank">{{item.name}}</a>
+    </div>
   </div>
 </div>

src/app/_modules/widjet/file-ico/file-ico.component.html

@@ -0,0 +1 @@
+<img [src]="url">

src/app/_modules/widjet/file-ico/file-ico.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'file-ico',
+  templateUrl: './file-ico.component.html',
+  styleUrls: ['./file-ico.component.scss']
+})
+export class FileIcoComponent {
+  typeList = {
+    PDF:'PDF',
+    DOC:'DOC',
+    DOCX:'DOC',
+    DOTM:'DOC',
+    DOTX:'DOC',
+    TXT:'DOC',
+    RTF:'DOC',
+    ODT:'DOC',
+    JPG:'JPG',
+    JPEG:'JPG',
+    JPE:'JPG',
+    JFIF :'JPG',
+    PPT:'PPT',
+    PPTX:'PPT',
+    XLS:'XLS',
+    XLSM:'XLS',
+    XLSB:'XLS',
+    XLSX:'XLS',
+    CSV:'XLS',
+    XML:'XLS',
+  }
+
+  @Input() type: 'string';
+
+  get url(){
+    let type = this.type.toUpperCase()
+    let svg = this.typeList[type]?
+    this.typeList[type]+'.svg':
+    'document_60dp.svg';
+    return `assets/images/icons/document/${svg}`
+  }
+}

src/app/_modules/widjet/widjet.module.ts

@@ -8,6 +8,7 @@ import {DropDownComponent } from "./drop-down/drop-down.component";
 import { SliderComponent } from './slider/slider.component';
 import { SwitchComponent } from './switch/switch.component';
 import { LocaleComponent } from './locale/locale.component';
+import { FileIcoComponent } from './file-ico/file-ico.component';
 
 
 @NgModule({
@@ -23,6 +24,7 @@ import { LocaleComponent } from './locale/locale.component';
         SliderComponent,
         SwitchComponent,
         LocaleComponent,
+        FileIcoComponent,
     ],
     exports: [
         IcoComponent,
@@ -30,7 +32,8 @@ import { LocaleComponent } from './locale/locale.component';
         DropDownComponent,
         SliderComponent,
         SwitchComponent,
-        LocaleComponent
+        LocaleComponent,
+        FileIcoComponent
     ]
 })
 export class WidjetModule {

src/assets/css/_basics.scss

@@ -435,3 +435,10 @@ html-section ul{
   }
 
 }
+
+
+file-ico{
+  width: 52px;
+  height: 60px;
+  display: inline-flex;
+}

src/assets/css/_documents-lists.scss

@@ -1,7 +1,4 @@
 .documents.list.default {
-  background: transparent url('~src/assets/images/icons/document/document_pdf_60dp.svg') 0 0 no-repeat;
-  min-height: 60px;
-  padding-left: 72px;
   font-size: 20px;
   .title {
     margin: 0 0 16px;
@@ -9,6 +6,8 @@
   }
   .items {
     .item {
+      display: flex;
+      gap: 8px;
       margin: 0 0 16px;
       a {
         display: inline-block;        

src/assets/css/_forms.scss

@@ -137,4 +137,77 @@ input, select, textarea {
 }
 .checkbox:disabled:not(:checked)+label::before {
   background-image: url("~/src/assets/images/icons/checkbox/checbox_none_disabled_24dp.svg");
+}
+
+
+
+
+form-field-document{
+  .area {
+    position: relative;
+    display: flex;
+    height: 100px;
+    padding: 16px;
+    border: var(--prime) dashed 1px;
+    border-radius: 4px;
+    overflow: hidden;
+    font-size: 20px;
+    &.hover {
+      background-color: #e0e0e0;
+    }
+    p {
+      margin: auto;
+      color: var(--second-dis);
+      text-align: center;
+      span {
+        color: var(--orange-2);
+        cursor: pointer;
+      }
+    }
+    input {
+      display: none;
+    }
+    .indicator {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 16px;
+      background-color: #f7f7f7;
+      .label {
+        margin-bottom: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .progress {
+        height: 4px;
+        background-color: #dfdfdf;
+        overflow: hidden;
+        .fill {
+          width: 0;
+          height: 100%;
+          background-color: #3ca128;
+        }
+      }
+    }
+  }
+  
+  .values {
+  
+    .item {
+      height: 60px;
+      font-size: 20px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 10px;
+      gap:8px;
+    
+    }
+  }
 }