tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/task-configure/task-configure.component.scss

@@ -0,0 +1,569 @@
+.c-card {
+    padding: 24px;
+    background: #FFF;
+    border-radius: 16px;
+}
+
+.plain-input {
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+    color: var(--black, #101828);
+    text-overflow: ellipsis;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 28px;
+}
+
+.plain-input:focus {
+    border-radius: 0 !important;
+    border: white !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.checklist-name {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    text-align: left;
+    color: #667085 !important;
+}
+
+.checklist-desc {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: left;
+}
+
+:host::ng-deep {
+    .date-picker {
+        .md-drppicker .btn {
+            line-height: 10px !important;
+        }
+
+        .daterangepicker-input+.ngx-daterangepicker-material .applyBtn {
+            display: none;
+        }
+
+        .md-drppicker.drops-down-right.ltr.show-ranges.shown {
+            top: 65px !important;
+        }
+
+        .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+            top: 65px !important;
+            right: -475px !important;
+            left: unset !important;
+            height: 400px !important;
+        }
+
+        .md-drppicker .btn {
+            border-radius: 8px !important;
+            border: 1px solid var(--Primary-600, #00A3FF) !important;
+            background: var(--Primary-600, #00A3FF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--White, #FFF) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+        }
+
+        .md-drppicker .ranges ul li button {
+            padding: 12px 16px;
+            width: 160px;
+            color: var(--Gray-700, #344054);
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            background: none;
+            border: none;
+            text-align: left;
+            cursor: pointer;
+        }
+
+        .md-drppicker td.active,
+        .md-drppicker td.active:hover {
+            background-color: #029cf4 !important;
+            border-radius: 20px !important;
+            color: var(--White, #FFF) !important;
+            text-align: center !important;
+            font-size: 14px !important;
+            font-weight: 500 !important;
+            line-height: 20px;
+        }
+
+        .md-drppicker.ltr .ranges {
+            float: left;
+            margin-top: 10px !important;
+        }
+
+        .md-drppicker td.in-range {
+            background: var(--Primary-50, #EAF8FF);
+        }
+
+        .md-drppicker .ranges ul li button.active {
+            background: var(--Primary-50, #EAF8FF) !important;
+            border-radius: 8px !important;
+            color: var(--Primary-700, #009BF3);
+            font-size: 14px !important;
+            font-weight: 500 !important;
+            line-height: 20px !important;
+        }
+
+        table th,
+        table td {
+            width: 40px !important;
+            height: 40px !important;
+            padding: 10px 8px !important;
+        }
+
+        .md-drppicker td.available.prev,
+        .md-drppicker th.available.prev {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+            background-repeat: no-repeat !important;
+            background-size: 0.5em !important;
+            background-position: center !important;
+        }
+
+        .md-drppicker td.available.next,
+        .md-drppicker th.available.next {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+            background-repeat: no-repeat !important;
+            background-size: 0.5em !important;
+            background-position: center !important;
+        }
+
+        table th {
+            border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+            background: transparent !important;
+            color: var(--Gray-700, #344054) !important;
+            text-align: center;
+            font-size: 16px !important;
+            font-weight: 500 !important;
+            line-height: 24px;
+        }
+
+        .md-drppicker td.available.invalid-date {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+        }
+
+        .md-drppicker td.available.today:not(.invalid-date) {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+        }
+
+        .md-drppicker .btn.btn-default {
+            border-radius: 8px !important;
+            border: 1px solid var(--Gray-300, #D0D5DD) !important;
+            background: var(--White, #FFF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--Gray-700, #344054) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+            margin-right: 10px !important;
+        }
+
+        .md-drppicker td.available.invalid-date {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+        }
+
+        .md-drppicker td.available.today:not(.invalid-date) {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+        }
+    }
+
+
+}
+
+.assignpadding {
+    padding: 0px 40px;
+}
+
+.uploadpadding {
+    padding: 0px 20% 9px;
+}
+
+.orposition{
+    top:0px;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+}
+
+.storetext {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.storeAssign {
+    color: var(--Gray-700, #344054);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.storeAssign{
+    a:hover{
+        text-decoration: underline !important;
+    }
+}
+
+.border-primary{
+    border: 1px dashed var(--Primary-500, #33B5FF) !important;
+    background: var(--Primary-25, #F6FCFF) !important;
+}
+
+.template-dropdown{
+    background: var(--Gray-100, #F2F4F7);
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px; 
+}
+
+.uploadtext {
+    color: var(--gray-700, #344054);
+    font-family: 'Inter';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    /* 150% */
+    text-transform: capitalize;
+}
+
+.subtext {
+    color: var(--gray-500, #667085);
+    font-family: 'Inter';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+}
+
+.selectstore {
+    color: var(--primary-700, #009BF3);
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    /* 142.857% */
+    text-decoration-line: underline;
+    text-transform: capitalize;
+}
+
+.sub {
+    color: var(--gray-700, #101828);
+    font-family: 'Inter';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+.subopen {
+    color: var(--black, #101828);
+    font-family: 'Inter';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    /* 150% */
+}
+
+.headeralign {
+    color: var(--gray-500, #667085);
+    font-family: 'Inter';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+    /* 150% */
+}
+
+.selected-radio{
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+}
+
+.subtitle {
+    font-family: 'Inter';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #667085;
+
+}
+
+.form-control.form-control-solid {
+    display: flex;
+    padding: 11px 14px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid var(--gray-500, #D0D5DD);
+    background: var(--white, #FFF);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.outer-container {  
+    position: relative;
+
+    .form-control {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .input-container {
+        border: 1px solid black;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        border: 1px solid #D0D5DD;
+
+
+        input {
+            all: unset;
+            flex: 1;
+            min-width: 50px;
+        }
+
+        .chip {
+            border-radius: 20px;
+            margin: 10px 0px 10px 10px;
+            padding: 3px 10px;
+            border-radius: 16px;
+            background: var(--Gray-100, #F2F4F7);
+            color: var(--Gray-700, #344054);
+            font-family: Inter;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20px;
+
+            .initials {
+                color: var(--Primary-600, #00A3FF);
+                font-size: 12px;
+                font-weight: 500;
+                line-height: 18px;
+            }
+        }
+
+        .chip:nth-child(1) {
+            margin-left: 0;
+        }
+
+    }
+}
+
+.toggle-card {
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid #EAECF0;
+    background: #FFF;
+
+    .header {
+        color: #344054;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+    }
+
+    .desc {
+        color: var(--Gray-500, #667085);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+    }
+
+    &.selected {
+        border: 1px solid #6BCAFF;
+
+        .header {
+            color: #008EDF;
+        }
+
+        .desc {
+            color: #00A3FF;
+        }
+    }
+}
+
+.sub-txt {
+    color: #667085;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    gap: 8px;
+}
+
+.cstm-blu-btn {
+    padding: 8px 14px;
+    border-radius: 8px;
+    border: 1px solid #EAF8FF;
+    background: #EAF8FF;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #009BF3;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+}
+
+.schedule-text {
+    color: #344054;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+input[type='checkbox'].c-checkbox {
+    width: 16px !important;
+    height: 16px !important;
+    margin: 5px;
+    border-radius: 4px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--gray-600, #D0D5DD) !important;
+    box-shadow: none;
+    font-size: 0.5em;
+    text-align: center;
+    line-height: 1em;
+    background: white;
+}
+
+input[type='checkbox'].c-checkbox:checked {
+    outline: 1px solid var(--primary-600, #00A3FF) !important;
+    background-color: var(--primary-50, #EAF8FF);
+}
+
+input[type='checkbox'].c-checkbox:checked:after {
+    content: '';
+    transform: rotate(45deg);
+    border-bottom: 2px solid #00A3FF;
+    border-right: 2px solid #00A3FF;
+    display: inline-block;
+    width: 0.5em;
+    padding-left: 3px;
+    padding-top: 10px;
+    padding-right: 0px;
+}
+
+.reminder-header {
+    color: #101828;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+}
+
+.reminder-description {
+    color: #344054;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.reminder-sub {
+    color: #101828;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+.table-header{
+    color: var(--Gray-800, #1D2939);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+}
+.text-error{
+    color: var(--Error-700, #B42318) !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+.excel-error{
+    color: var(--Error-600, #D92D20);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+.error-heading{
+    color: var(--Error-600, #D92D20);
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 30px; 
+}
+.border-error{
+    border: 1px solid var(--Error-300, #FDA29B) !important;
+    background: var(--Error-25, #FFFBFA) !important;
+}
+
+.popup-card{
+    border-radius: 6px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: #FFF;
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+}
+
+.nav {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1 0 0;
+    align-self: stretch;
+    --bs-nav-link-color: none;
+}
+
+.nav-item{
+    .nav-link{
+        color: var(--Gray-500, #667085);
+        font-size: 16px;
+        font-weight: 500;
+    }
+    .nav-link:hover{
+        border-bottom: none !important;
+    }
+    .nav-link.active{
+        border-radius: 10px !important;
+       border-bottom: none !important;
+    }
+    .bg-light-primary{
+        background: var(--Primary-50, #EAF8FF) !important;
+    }
+
+  }

package/src/lib/components/task-configure/task-configure.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskConfigureComponent } from './task-configure.component';
+
+describe('TaskConfigureComponent', () => {
+  let component: TaskConfigureComponent;
+  let fixture: ComponentFixture<TaskConfigureComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TaskConfigureComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TaskConfigureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});