vc-create-dashboard 2.9.7 → 2.9.8

package/src/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.less

@@ -1,381 +0,0 @@
-@import url('https://cdn.v-comply.com/design-system/css/mixin/mixin.css');
-@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
-@import url('https://cdn.v-comply.com/design-system/css/color/color.css');
-@import url('https://cdn.v-comply.com/design-system/css/text/text.css');
-@import url('https://cdn.v-comply.com/design-system/css/display/display.css');
-@import url('https://cdn.v-comply.com/design-system/css/alignment/alignment.css');
-@import url('https://cdn.v-comply.com/design-system/css/width/width.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin-top.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin-left.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin-right.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding-top.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding-left.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding-right.css');
-
-
-::ng-deep .configure-widgets {
-    width      : calc(100vw - 3rem);
-    height     : 100vh;
-    margin-left: 3rem;
-    background : #fff;
-    
-    @media screen and (max-width:1280px){
-        width      : 100vw;
-        margin-left: 0;
-    }
-
-    &-head {
-        height         : 2.75rem;
-        background     : #FBFBFB;
-        border-bottom  : 1px solid #F1F1F1;
-    }
-
-    &-back {
-        border     : none;
-        outline    : none;
-        background : transparent;
-
-        i {
-            margin-right: 6px;
-        }
-    }
-
-    &-body {
-        padding: 2rem;
-        position: relative;
-        height: calc(100vh - 2.75rem);
-
-        app-no-data {
-            .no-data-wrapper {
-                height: calc(100vh - 13.875rem) !important;
-            }
-        }
-
-        .floating-option {
-            position  : absolute;
-            right     : 0;
-            bottom    : 0;
-            left      : 0;
-            background: #fff;
-            padding   : 16px 12px;
-            z-index   : 3;
-            box-shadow: 0 -6px 12px #1E5DD31A;
-
-            app-cs-checkbox {
-                display: flex;
-
-                label {
-                    span.value {
-                        color      : #161B2F !important;
-                        font-size  : 11px !important;
-                        line-height: 16px !important;
-                        margin-left: 8px !important;
-                        white-space: nowrap;
-                    }
-                }
-
-                &+app-cs-checkbox {
-                    margin-left: 20px;
-                }
-            }
-        }
-    }
-
-    &-tab {
-        ul {
-            padding      : 0;
-            margin       : 0 0 8px;
-            display      : flex;
-            border-bottom: 1px solid #DBDBDB;
-
-            li {
-                list-style: none;
-                display   : flex;
-                width     : auto;
-                padding   : 0;
-
-                button {
-                    color         : #747576;
-                    display       : inline-block;
-                    font-size     : 11px;
-                    line-height   : 16px;
-                    font-weight   : 600;
-                    text-transform: uppercase;
-                    border        : none;
-                    outline       : none;
-                    background    : transparent;
-                    padding       : 0 0 8px;
-                    position      : relative;
-                    margin: 0;
-
-                    span {
-                        display    : inline-block;
-                        margin-left: 8px;
-                        color      : #74757680;
-                    }
-                }
-
-                &+li {
-                    padding-left: 28px;
-                }
-
-                &.active {
-                    button {
-                        color: #1E5DD3;
-
-                        span {
-                            color: #1E5DD3;
-                        }
-
-                        &:after {
-                            content         : "";
-                            right           : 0;
-                            bottom          : 0;
-                            left            : 0;
-                            height          : 2px;
-                            border-radius   : 2px;
-                            position        : absolute;
-                            background-color: #1E5DD3;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    &-search {
-        position     : relative;
-        margin-bottom: 24px;
-
-        i {
-            position: absolute;
-            top     : 16px;
-            left    : 16px;
-            color   : #DBDBDB;
-        }
-
-        input {
-            border       : 1px solid #DBDBDB;
-            border-radius: 4px;
-            height       : 44px;
-            padding      : 10px 180px 10px 40px;
-            width        : 100%;
-            font-size    : 14px;
-            color        : #747576;
-            outline      : none;
-
-            &:focus {
-                border-color: #1E5DD3;
-                box-shadow  : 0 0 5px #1e5dd345;
-            }
-        }
-    }
-
-    &-list {
-        margin   : 0 -1rem .5rem;
-        height   : calc(100vh - 15.5rem);
-        overflow : hidden;
-        overflow-y : auto;
-
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
-        }
-    }
-
-    &-item {
-        width        : 50%;
-        padding      : 0 16px;
-        margin-bottom: 32px;
-
-        .block {
-            background   : #F8F8F8;
-            border-radius: 4px;
-            padding-left: 44px;
-            padding-right: 44px;
-            padding-top: 16px;
-            padding-bottom: 4px;
-            cursor       : pointer;
-            position     : relative;
-            display      : block;
-
-            .check-icon {
-                position       : absolute;
-                top            : 8px;
-                left           : 0;
-                height         : 36px;
-                width          : 36px;
-                border-radius  : 0 4px 4px 0;
-                display        : flex;
-                justify-content: center;
-                align-items    : center;
-                background     : #34AA44;
-                opacity        : 0;
-                pointer-events : none;
-
-                .check {
-                    display          : none;
-                    width            : 27px;
-                    height           : 27px;
-                    background       : transparent;
-                    border-radius    : 50%;
-                    stroke-width     : 4;
-                    stroke           : #ffffff;
-                    stroke-miterlimit: 10;
-                    box-shadow       : inset 0px 0px 0px #ffffff;
-                    animation        : fillCheck 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
-                    margin-top       : 0;
-
-                    &-circle {
-                        stroke-dasharray : 166;
-                        stroke-dashoffset: 166;
-                        stroke-width     : 4;
-                        stroke-miterlimit: 10;
-                        stroke           : #ffffff;
-                        fill             : none;
-                        animation        : strokeCheck 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
-                    }
-
-                    &-check {
-                        transform-origin : 50% 50%;
-                        stroke-dasharray : 48;
-                        stroke-dashoffset: 48;
-                        animation        : strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
-                    }
-                }
-            }
-
-            input[type=checkbox] {
-                opacity : 0;
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                z-index: 1;
-                cursor: pointer;
-
-                &:checked {
-                    &+.check-icon {
-                        opacity: 1;
-
-                        .check {
-                            display: block;
-                        }
-                    }
-
-                    &~.configure-widgets-item-body .image-wrapper {
-                        opacity: 0.5;
-                    }
-
-                    &~.configure-widgets-item-head {
-                        button.add {
-                            display: none;
-                        }
-
-                        button.remove {
-                            display: flex;
-                        }
-                    }
-                }
-            }
-        }
-
-        &-head {
-            padding : 0 0 16px 0;
-            position: relative;
-        }
-
-        &-title {
-            margin        : 0 0 12px;
-            font-size     : 14px;
-            line-height   : 20px;
-            text-transform: uppercase;
-            color         : #161B2F;
-            max-width     : calc(100% - 72px);
-            font-weight   : 500;
-        }
-
-        &-description {
-            font-size  : 12px;
-            line-height: 20px;
-            color      : #747576;
-            margin     : 0;
-            font-weight: 400;
-            height: 60px;
-        }
-
-        &-button {
-            width          : 72px;
-            height         : 28px;
-            cursor         : pointer;
-            display        : flex;
-            position       : absolute;
-            top            : 0;
-            right          : -24px;
-            font-size      : 11px;
-            font-weight    : 500;
-            border         : none;
-            outline        : none;
-            justify-content: center;
-            align-items    : center;
-            border-radius  : 2px;
-            text-transform: uppercase;
-            padding: 0;
-            margin: 0;
-
-            &.add {
-                color     : #FFFFFF;
-                background: #1E5DD3;
-            }
-
-            &.remove {
-                background: #FFFFFF;
-                border: 1px solid #f1f1f1;
-                color     : #C7381B;
-                display   : none;
-            }
-        }
-
-        &-body {
-            overflow: hidden;
-            height: 220px;
-            border: 1px solid #f1f1f1;
-            border-bottom: none;
-            border-radius: 2px 2px 0 0;
-            box-shadow   : 0 -4px 8px #161b2f10;
-
-            .image-wrapper {
-                box-shadow   : 0px -6px 12px #0000001A;
-                border-radius: 2px;
-                overflow     : hidden;
-                background   : #FFFFFF;
-            }
-
-            img {
-                width: 100%;
-            }
-        }
-    }
-}
-
-@keyframes strokeCheck {
-    100% {
-        stroke-dashoffset: 0;
-    }
-}
-
-@keyframes fillCheck {
-    100% {
-        box-shadow: inset 0px 0px 0px 2px #FFFFFF;
-    }
-}
-
-.disabled{
-    pointer-events: none;
-    opacity: 0.7;
-}

package/src/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.spec.ts

@@ -1,48 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ConfigureWidgetsComponent } from './configure-widgets.component';
-import { HttpClientModule } from '@angular/common/http';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ConfigureWidgetsService } from '../../services/configure-widgets.service';
-import { FloatingBarModule } from '../../../ui-kit/floating-bar/floating-bar.module';
-import { FormgroupModule } from '../../../ui-kit/formgroup/formgroup.module';
-import { DialogRef } from '../../../ui-kit/dialog/dialog-ref';
-import { SearchPipe } from '../../pipes/search.pipe';
-import { of } from 'rxjs';
-import { AuthService } from 'src/app/services/auth.service';
-
-
-describe('ConfigureWidgetsComponent', () => {
-  let component: ConfigureWidgetsComponent;
-  let fixture: ComponentFixture<ConfigureWidgetsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ConfigureWidgetsComponent, SearchPipe ],
-      imports: [
-        HttpClientTestingModule, 
-        HttpClientModule, 
-        CommonModule,
-        FloatingBarModule,
-        FormgroupModule,
-        FormsModule,
-      ],
-      providers:[DialogRef, ConfigureWidgetsService, {provide: AuthService, useValue: {isLoggedIn: () => of(true), getUserList: of(), getInfo: () => of(), _ID: () => of(), getUserInformation: () => of()}}],
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ConfigureWidgetsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-
-
-});