@dev-tcloud/tcloud-ui 0.1.23 → 2.0.0

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.html

@@ -0,0 +1,184 @@
+<div class="tcloud-ui-multiples-values tc-dropdown" id="area-{{ id }}" [class.tc-parent-validation]="use_validation_required">
+
+
+    <form #_formulario="ngForm">
+
+        <!-- {{ input_items }} -->
+
+        <div class="dropdown-toggle" id="{{id}}" [attr.aria-haspopup]="'true'" [attr.aria-expanded]="'false'">
+
+            <table style="width: 100%;">
+                <tr>
+                    <td>
+                        <table class="group-input-action">
+                            <tr>
+                                <td class="box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l">
+                                    <ng-container *ngIf="listItems && (listItems).length > 0">
+                                        <div class="input" (click)="show_itens = false">
+                                            <tcloud-ui-data-list [placeholder]="placeholder_list" [border]="false" [loading]="loading" [disabled]="disabled" name="items" [listItems]="listItems" [(ngModel)]="input_items" (onChange)="toEnterKey(input_items)"></tcloud-ui-data-list>
+                                        </div>
+                                    </ng-container>
+            
+                                    <ng-container *ngIf="!listItems || !(listItems && (listItems).length > 0)">
+                                        <div class="input">
+                                            <input 
+                                                required
+                                                [pattern]="pattern"
+                                                (keydown.enter)="toEnterKey(input_items)"
+                                                [disabled]="disabled"
+                                                [class.text-lowercase]="lowercase"
+                                                [class.text-uppercase]="uppercase"
+                                                type="text" name="items" class="tc-form-control" [(ngModel)]="input_items" [placeholder]="placeholder_list" required [title]="placeholder_list">
+                                        
+                                        </div>
+                                    </ng-container>
+                                </td>
+                                <td class="count-list" *ngIf="(items && items.length > 0)">
+                                    <div class="input">
+                                        <input type="text" value="{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}" disabled readonly>                            
+                                    </div>
+                                </td>
+                                <td class="count-list" *ngIf="!items || (items && items.length === 0)">
+                                    <div class="input"><input type="text" class="info-no-value" value="Vazio" disabled readonly></div>                       
+                                </td>
+                                <td class="action-input-arrow  bc-r">
+                                    <button (click)="toOpen()" title="Lista de valores" [disabled]="disabled">
+                                        <i class="fas fa-angle-up" *ngIf="show_itens"></i>
+                                        <i class="fas fa-angle-down" *ngIf="!show_itens"></i>
+                                    </button>
+                                </td>
+                                
+                            </tr>
+                        </table> 
+                    </td>
+                    <td style="width: 45px;">
+                        <table>
+                            <tr>
+                                <td class="action-input" *ngIf="!disabled">
+                                    <ng-container *ngIf="!listItems || !(listItems && (listItems).length > 0)">
+                                        <button [disabled]="!_formulario.valid" class="tc-btn tc-btn-primary" (click)="add_items()" title="Adicionar item">
+                                            <i class="fas fa-plus"></i>
+                                        </button>
+                                    </ng-container>
+                                    <ng-container *ngIf="listItems && (listItems).length > 0">
+                                        <button [disabled]="!_formulario.valid" class="tc-btn tc-btn-primary" (click)="add_items_by_data_list(input_items)" title="Adicionar item">
+                                            <i class="fas fa-plus"></i>
+                                        </button>
+                                    </ng-container>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>
+            </table>
+
+            <!-- <table class="group-input-action">
+                <tr>
+                    <td class="box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l">
+                        <ng-container *ngIf="listItems && (listItems).length > 0">
+                            <div class="input" (click)="show_itens = false">
+                                <tcloud-ui-data-list [border]="false" [loading]="loading" [disabled]="disabled" name="items" [listItems]="listItems" [(ngModel)]="input_items"></tcloud-ui-data-list>
+                            </div>
+                        </ng-container>
+
+                        <ng-container *ngIf="!listItems || !(listItems && (listItems).length > 0)">
+                            <div class="input">
+                                <input 
+                                    (keydown.enter)="add_items();toOpen()"
+                                    [disabled]="disabled"
+                                    [class.text-lowercase]="lowercase"
+                                    [class.text-uppercase]="uppercase"
+                                    type="text" name="items" class="tc-form-control" [(ngModel)]="input_items" [placeholder]="placeholder_list" required [title]="placeholder_list">
+                            
+                            </div>
+                        </ng-container>
+                    </td>
+                    <td class="count-list" *ngIf="(items && items.length > 0)">
+                        <div class="input">
+                            <input type="text" value="{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}" disabled readonly>                            
+                        </div>
+                    </td>
+                    <td class="count-list" *ngIf="!items || (items && items.length === 0)">
+                        <div class="input"><input type="text" value="Vazio" disabled readonly></div>                       
+                    </td>
+                    <td class="action-input-arrow  bc-r">
+                        <button (click)="toOpen()" title="Lista de valores" [disabled]="disabled">
+                            <i class="fas fa-angle-up" *ngIf="show_itens"></i>
+                            <i class="fas fa-angle-down" *ngIf="!show_itens"></i>
+                        </button>
+                    </td>
+                    <td class="action-input" *ngIf="!disabled">
+                        <ng-container *ngIf="!listItems || !(listItems && (listItems).length > 0)">
+                            <button [disabled]="!_formulario.valid" class="tc-btn tc-btn-primary btn-new-green" (click)="add_items()" title="Adicionar item">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </ng-container>
+                        <ng-container *ngIf="listItems && (listItems).length > 0">
+                            <button [disabled]="!_formulario.valid" class="tc-btn tc-btn-primary btn-new-green" (click)="add_items_by_data_list(input_items)" title="Adicionar item">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </ng-container>
+                    </td>
+                </tr>
+            </table> -->
+        </div>
+        
+        <!-- <pre>
+            {{ items | json }}
+        </pre> -->
+
+    </form> 
+
+    <!-- box-itens-selected  -->
+    <div class="tc-dropdown-menu box-itens-selected  {{ menu_on_top }}" id="box-{{ id }}" [attr.aria-labelledby]="id" [class.to-hide]="!show_itens" [style]="box_style">
+        
+
+        <div class="line-search" *ngIf="search">
+            <table class="box-search" *ngIf="items && (items).length > 5">
+              <tr>
+      
+                <td class="area-input">
+                  <input type="text" class="tc-form-control" [(ngModel)]="search_text" (input)="toSearch($event)" placeholder="Buscar..." >            
+                </td>
+      
+                <td class="area-icon">
+                  <i *ngIf="search_text === ''" class="fas fa-search icon-search"></i>
+                  <button class="box-action" type="button" *ngIf="search_text !== ''" (click)="clearTextSearch()"><i class="fas fa-times"></i></button>
+                </td>
+                
+              </tr>
+            </table>
+        </div>
+
+        <div class="area-options" id="{{ id }}-options">
+            <ng-container *ngFor="let item of items; let i = index">
+            
+                <label class="box-label">
+                    <div class="box-value" [title]="item"  >
+                    {{ item }}          
+                    </div>
+                    <div class="box-action">
+                        <button
+                            class="box-action"
+                            [disabled]="items === undefined || (items && items.length === 0) || disabled || loading"
+                            title="Remover"
+                            type="button"
+                            (click)="removeItem(item, i)">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </label>
+
+            </ng-container>
+        </div>
+
+        <div class="mt-5" *ngIf="items && (items).length > 5">
+            <div class="btn-remove-all">
+                <button class="box-action" type="button" (click)="remove_all()">
+                    Limpar toda a lista
+                </button>
+            </div>
+        </div>
+
+    </div>
+</div>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component.scss

@@ -0,0 +1,288 @@
+
+table {
+    border-collapse: collapse;
+  }
+  
+  td, th {
+    padding: 0;
+    margin: 0;
+  }
+
+::placeholder {
+  font-style: italic;
+  color: #999999;
+  text-transform: none !important;
+}
+
+.box-input{
+  border-radius: 5px 0 0 5px;
+    .input{
+        background-color: #fff;
+        border-radius: 5px 0 0 5px;
+    }
+    .ng-invalid{
+      border-color: transparent !important;
+    }
+}
+
+.bc-l{
+  background-color: #fff;
+  border-left: 1px solid var(--tc-gray-300);;
+}
+
+.bc-r{
+  background-color: #fff;
+  border-right: 1px solid var(--tc-gray-300);;
+}
+
+.box-input-data-list{
+  background-color: #fff;
+  border-left: 1px solid var(--tc-gray-300);;
+  border-top: 1px solid var(--tc-gray-300);;
+  border-bottom: 1px solid var(--tc-gray-300);;
+  border-radius: 5px 0 0 5px;
+  height: 42px;
+  padding-left: 5px;
+}
+
+.group-input-action{
+    width: 100%;
+    background-color: #fff;
+
+    input{
+        height: 40px;
+        border: none;
+    }
+
+    td{
+      height: 40px;
+      border-top: 1px solid var(--tc-gray-300);
+      border-bottom: 1px solid var(--tc-gray-300);;
+      background-color: transparent !important;
+    }
+}
+
+.count-list{
+    width: 90px;
+    text-align: center;
+    background: #fff;
+    .input{
+      background-color: transparent;
+        input{
+            height: 40px;
+            border: none;
+            text-align: center;
+            width: 100px;   
+            background-color: transparent;
+        }
+    }
+}
+
+.action-input-arrow{
+    width: 30px;
+    background: transparent;  
+    position: relative;
+    z-index: 0;   
+    button{
+        cursor: pointer;
+        background-color: transparent;
+        text-align: center;
+        font-size: 15px;
+        border-top: none;
+        border-right: none;
+        border-bottom: none;
+        border-left: none;
+        width: 30px;
+        border-radius: 0 3px 3px 0;
+        position: relative;
+        bottom: 1px;
+        color: #666;
+
+        i{
+            position: relative;
+            z-index: -1;
+        }
+    }
+}
+
+.action-input{
+    width: 50px;
+    padding-left: 3px;
+
+    .tc-btn{
+        width: 100% !important;
+        padding: 0;
+        text-align: center;
+        border-radius: 4px 16px 16px 3px;
+        display: block;
+        margin: 0;
+        height: 40px;
+        border: 1px solid var(--tc-primary) !important;
+
+        i{
+            width: 100%;
+            text-align: center;
+            padding: 0 !important;
+            margin: 0 !important;
+            font-size: 18px;
+            position: relative;
+            top: 1px;
+        }
+    }
+}
+
+
+.box-itens-selected{
+    display: block;
+    padding: 9px;
+    background-color: #ededed;
+    border-radius: 4px;
+    width: 100%;
+
+    .box-label{
+
+        position: relative;
+        display: inline-block;
+        height: 35px;
+        min-width: 60px;
+        background-color: var(--white);
+        
+        color: var(--tc-gray-500);
+        padding: 8px 15px 10px 15px;
+        border: 1px solid var(--tc-primary);
+        border-radius: 5px;
+        margin: 2px;
+        width: auto;
+        padding-right: 24px;
+        max-width: 100%;
+    
+        .box-value{
+            width: 100%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    
+        div.box-action{
+          
+            position: absolute;
+            right: 4px;
+            top: 7px;
+    
+            button{
+                color: var(--tc-primary);
+                background-color: transparent;
+                border: none;
+                font-weight: bold;
+                cursor: pointer;
+    
+                i{
+                font-size: 12px;
+                }
+                &:hover{
+                  color: var(--red);
+                }
+            }
+        }
+    }
+
+}
+
+.to-hide{
+    display: none;
+}
+
+/** DROPDOW **/ 
+
+.dropdown-toggle::after{
+    display: none !important;
+}
+  
+.tc-dropdown{
+  
+    position: relative;
+    
+    .tc-dropdown-menu{
+      width: 100%;
+      border: 1px solid var(--tc-gray-300);
+      position: absolute;
+      z-index: 1;
+      background-color: #f9f9f9;
+    }
+  
+    .area-options{
+      padding-right: 8px;
+      max-height: 200px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  
+    .menu-on-top{
+      position: absolute;
+    }
+}
+
+
+
+
+.line-search{
+
+    padding: 3px;
+  
+    .box-search{
+      width: 100%;
+      border-collapse: collapse;
+      td.area-icon{
+        padding: 4px 0px 2px 8px;
+        width: 35px;
+        .icon-search{
+          color: #666;
+        }
+  
+        button{
+          border: none;
+          background-color: transparent;
+          color: #999;
+  
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+  
+      }
+      td.area-input{ 
+        input{
+          width: 100%; 
+        }          
+        border: none;
+      }
+  
+      input{
+        width: 100%;
+        font-size: 13px;
+        height: 33px;
+        border: 1px solid var(--tc-gray-300);
+        padding: 10px;
+  
+      }
+    }
+  
+  }
+
+
+  .btn-remove-all{
+    text-align: right;
+    button{
+        background-color: transparent;
+        border: none;
+        color: #dd5353;
+        cursor: pointer;
+        &:hover{
+            color: #ff0000 !important;
+        }
+    }
+  }
+
+  .info-no-value{
+    color: #dd5353;
+  }