@dev-tcloud/tcloud-ui 1.0.0 → 2.0.1

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

@@ -1,184 +0,0 @@
-<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

@@ -1,288 +0,0 @@
-
-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;
-  }