tango-app-ui-manage-tickets 3.7.0-beta.6 → 3.7.0-beta.61

package/src/lib/components/footfall-dicview/footfall-dicview.component.scss

@@ -0,0 +1,416 @@
+.card-header,
+.header {
+  color: var(--Gray-900, #101828);
+  font-size: 20px !important;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 30px;
+}
+
+.sub-header {
+  color: var(--Gray-700, #344054);
+  font-size: 14px !important;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.ellipse1 {
+  border-radius: 6px;
+  border-bottom: 2px solid var(--Gray-200, #EAECF0);
+  background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(69, 187, 254, 0.20) 100%), #F2F4F7;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.card-title-foot{
+  color: var(--Gray-800, #1D2939) !important;
+font-size: 18px;
+font-weight: 600;
+line-height: 28px;
+}
+
+.card-title-label{
+  color: var(--Gray-800, #1D2939) !important;
+font-size: 16px;
+font-weight: 600;
+line-height: 28px;
+}
+.card-title-value{
+  color: var(--Gray-800, #1D2939) !important;
+font-size: 16px;
+font-weight: 400;
+line-height: 28px;
+}
+input[type='checkbox'] {
+    width: 16px !important;
+    height: 16px !important;
+    margin: -2px 5px -2px;
+    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'] {
+    outline: 1px solid var(--primary-600, #00A3FF) !important;
+    background-color: var(--primary-50, #EAF8FF);
+}
+
+input[type='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;
+}
+
+.rotate {
+    rotate: 180deg;
+    transition: 1s;
+}
+
+.border-selectall{
+border-radius: 6px;
+border-bottom: 1px solid var(--Gray-200, #EAECF0);
+background: #F9FAFB;
+padding: 8px 12px;
+}
+.border-selectall1{
+  border-radius: 6px !important;
+background: var(--White, #FFF) !important;
+padding: 8px 2px;
+}
+.border-totalfootfall {
+border-radius: 12px;
+padding: 4px;
+border: 1px solid var(--Gray-300, #D0D5DD);
+background: var(--White, #FFF);
+}
+.vl {
+  border-left: 2px solid #000;
+  height: 50px;
+}
+
+.duplicate-head{
+color: var(--Gray-700, #344054);
+font-size: 16px;
+font-weight: 600;
+line-height: 20px;
+}
+.img-border{
+  border-radius: 5px !important;
+border: 2px solid var(--Gray-300, #D0D5DD);
+}
+
+.desc-title{
+  color: var(--Gray-900, #101828);
+font-size: 12px;
+font-weight: 500;
+line-height: 20px; 
+}
+
+.desc-value{
+  color: var(--Gray-900, #475467);
+font-size: 10px;
+font-weight: 500;
+line-height: 10px; 
+}
+
+.img-border {
+  overflow: hidden;
+  position: relative;
+}
+.btn-resize{
+    font-size: 13px !important;
+    height: 29px !important;
+    line-height: 11px !important;
+    padding: 1px !important;
+}
+
+.absolute{
+  top: 5px; right: 5px; z-index: 2;
+}
+
+
+.img-src{
+    width:25%;
+    height:20%
+}
+
+.backButtonright {
+    border-radius: 1000px !important;
+    background: var(--text-primary, #FFF) !important;
+    padding: 12px !important;
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
+    box-shadow: 0px 8.727px 11.636px -2.909px rgba(16, 24, 40, 0.08), 0px 2.909px 4.364px -1.455px rgba(16, 24, 40, 0.03) !important;
+    position: absolute;
+    top: 30px;
+    right: -10px;
+    z-index: 0;
+}
+.backButtonleft{
+    border-radius: 1000px !important;
+    background: #FFF;
+    padding: 14px !important;
+    border: var(--Gray-300, #D0D5DD);
+    box-shadow: 0px 8.727px 11.636px -2.909px rgba(16, 24, 40, 0.08), 0px 2.909px 4.364px -1.455px rgba(16, 24, 40, 0.03);
+    position: absolute;
+    top: 30px;
+    left:-20px;
+    z-index: 5;
+}
+.select-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%; /* Ensure it takes the same width as select */
+  }
+  .placeholder-overlay {
+    position: absolute;
+    color: var(--Gray-500, #667085);
+    font-family: "Inter";
+    font-size: 16px !important;
+    font-style: normal;
+    font-weight: 400;
+    top: 10px; /* Adjust to align text with select component */
+    left: 15px; /* Adjust for horizontal alignment */
+    pointer-events: none; /* Allows interaction with select even if overlay is visible */
+    font-size: 1.1rem;
+    z-index: 1;
+  }
+
+  .card-title{
+    color: var(--Black, #101828) !important;
+font-size: 20px !important;
+font-weight: 700 !important;
+line-height: 30px; 
+  }
+
+   .card-title-sub-header{
+    color: var(--Black, #101828);
+font-size: 14px;
+font-weight: 500;
+line-height: 30px; 
+  }
+
+  .separator.separator-dashed {
+    border-bottom-style: double !important;
+}
+.border-1{
+  border-radius: 4px !important;
+border: 1px solid var(--Gray-300, #D0D5DD) !important;
+// box-shadow: 0 0 0 2.291px #475467 !important;
+}
+
+.store-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+
+.store-item-active {
+  background: #EAF8FF; /* Light blue for active */
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+color: var(--Gray-700, #344054);
+text-overflow: ellipsis;
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: 24px; 
+}
+
+.left .active-text {
+overflow: hidden;
+color: var(--Primary-700, #009BF3);
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: 24px; 
+}
+
+
+.badge-active {
+border-radius: 16px;
+background: var(--Primary-50, #EAF8FF);
+color: var(--Primary-700, #009BF3);
+text-align: center;
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px;
+mix-blend-mode: multiply;
+}
+
+.badge-normal {
+color: var(--Gray-700, #344054);
+text-align: center;
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px;
+
+border-radius: 16px;
+background: var(--Gray-100, #F2F4F7);
+}
+
+:host::ng-deep {
+    .md-drppicker .btn {
+        line-height: 10px !important;
+    }
+    .md-drppicker.shown.drops-down-right {
+        transform-origin: 0 0;
+        width: 560px !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 .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;
+    }
+
+ 
+}
+.row.equal-height {
+  display: flex;
+  align-items: stretch;
+}

package/src/lib/components/footfall-dicview/footfall-dicview.component.spec.ts

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