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

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

@@ -0,0 +1,536 @@
+.label-name {
+    color: var(--Gray-700, #344054) !important;
+    font-size: 14px !important;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.form-control{
+    color: var(--Gray-800, #1D2939) !important;
+font-size: 16px !important;
+font-weight: 400 !important;
+line-height: 24px !important;
+}
+
+.btn-light1{
+    padding: 10px 18px !important;
+    border-radius: 8px !important;
+border: 1px solid var(--Primary-50, #EAF8FF) !important;
+background: var(--Primary-50, #EAF8FF) !important;
+
+box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+
+color: var(--Primary-700, #009BF3) !important;
+font-size: 16px !important;
+font-weight: 600 !important;
+line-height: 24px;
+text-transform: capitalize;
+}
+
+.label-name1 {
+    color: var(--Black, #101828) !important;
+    font-size: 16px !important;
+    font-weight: 500;
+    line-height: 24px; 
+}
+
+.scroll-y {
+    overflow-y: auto;
+    position: relative;
+    overflow-x: hidden;
+}
+
+.border-attach{
+    padding: 8px 14px !important;
+    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;
+}
+
+.items:hover,.tems.focus,.items.active,.camera.focus-visible{
+    background: var(--Gray-50, #F9FAFB);
+  }
+.video-size{
+    width: 100%;
+    height: 400px;
+    object-fit: cover !important;
+}
+
+img.img-logo {
+    width: 100%;
+    height: 400px !important;
+}
+
+.recap-img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover !important;
+}
+
+.img-src {
+    width: 30% !important;
+    height: 20% !important;
+}
+.title-ref {
+    color: var(--Gray-900, #101828) !important;
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    line-height: 24px;
+}
+
+img.img-logo {
+    width: 100%;
+    height: 400px !important;
+}
+
+.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;
+}
+.c-card {
+    padding: 24px;
+    background: #FFF;
+    border-radius: 16px;
+}
+
+.question-badge {
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    margin-bottom: 12px;
+    cursor: pointer;
+
+}
+
+.question-badge-selected {
+    color: #009BF3;
+    background: #EAF8FF;
+}
+
+.question-container {
+    border-radius: 8px;
+    border: 1px solid #D0D5DD;
+    // background: #F9FAFB;
+    padding: 24px 16px 16px 16px;
+    position: relative;
+
+    .question-name {
+        position: absolute;
+        top: -15px;
+        left: 15px;
+        padding: 0px 4px;
+        border-radius: 4px;
+        border: 0.5px solid #D0D5DD;
+        background: #FFF;
+        color: #101828;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+    }
+}
+
+.add-reference-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;
+
+}
+
+.ans-header {
+    color: #101828;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+}
+
+.check-label{
+        color: #344054;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+}
+
+.check-desc{
+        color: #667085;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+}
+
+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;
+}
+
+.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 {
+    .md-drppicker .btn {
+        line-height: 10px !important;
+    }
+    .md-drppicker.shown.drops-down-right {
+        transform-origin: 0 0;
+    }
+
+    .daterangepicker-input+.ngx-daterangepicker-material .applyBtn {
+        display: none;
+    }
+
+    .md-drppicker.drops-down-right.ltr.show-ranges.shown {
+        top: 65px !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 .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;
+    }
+    .daterangepicker {
+        position: fixed !important;
+        top: 30% !important; /* Adjust based on where you want it to appear */
+        left: 50% !important;
+        transform: translateX(-50%);
+        z-index: 1050 !important; /* Should be above modal but below other popups */
+      }
+
+      
+}
+  
+  .image-preview {
+    position: relative;
+    width: 150px;
+    height: 150px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .image-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .image-preview .remove-icon {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    background: #df0000;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  
+  .image-preview .remove-icon:hover {
+    background: darkred;
+  }
+  
+
+  .disabled {
+    color: #b0b0b0;
+    pointer-events: none;
+  }
+
+  input[type='checkbox'] {
+    width: 16px !important;
+    height: 16px !important;
+    margin: 0px;
+    border-radius: 4px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--gray-300, #D0D5DD);
+    box-shadow: none;
+    font-size: 0.8em;
+    text-align: center;
+    line-height: 1em;
+    background: white;
+}
+
+
+
+/* Styles for checked state of the 'form-check-input' checkbox */
+input[type='checkbox']:checked {
+    outline: 1px solid var(--primary-600, #00A3FF);
+    background-color: var(--primary-50, #EAF8FF);
+}
+
+/* Styles for the checked state with the specific class */
+input[type='checkbox']:checked:after {
+    content: '';
+    transform: rotate(45deg);
+    border-bottom: 2px solid #00A3FF;
+    border-right: 2px solid #00A3FF;
+    display: inline-block;
+    width: .5em;
+    padding-left: 0px !important;
+    padding-top: 8px;
+    padding-right: 5px;
+}
+
+.custom-scroll {
+    max-height: 450px; 
+    overflow-y: auto;
+  }
+  
+  .modal-header,
+  .modal-footer {
+    position: sticky;
+    top: 0; 
+    bottom: 0; 
+    background-color: #fff; 
+    z-index: 1; 
+    border: none; 
+  }
+
+
+
+  .form-switch {
+    padding-left: 50px !important;
+}
+
+.form-check-label {
+    padding-left: 5px !important;
+}
+::ng-deep {
+
+    .form-switch {
+        .form-check-input {
+            border: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(255, 255, 255, 1)'/%3E%3C/svg%3E") !important;
+            // background: var(--gray-100, #F2F4F7);
+            // &:checked {
+            //     filter: none;
+            //     background-image: escape-svg($form-switch-checked-bg-image);
+            // }
+        }
+
+        .form-check-input:not(:checked) {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(255, 255, 255, 1)'/%3E%3C/svg%3E") !important;
+            background-color: var(--gray-100, #F2F4F7) !important;
+        }
+    }
+}

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

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