@sachin9822/reports-lib 0.0.210 → 0.0.212

package/src/lib/shared/search-filter/search-filter.component.scss

@@ -0,0 +1,203 @@
+
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  grid-column: span 3;
+  /* spans columns 1-3 */
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  padding: 0 4px 0 0 !important;
+  min-width: 0;
+}
+
+
+/* This will make it take up the space equivalent of 1.5 grid columns */
+.col-custom-10-5 {
+  flex: 0 0 87.5% !important;
+  max-width: 87.5% !important;
+}
+
+.col-custom-1-5 {
+  flex: 0 0 12.5% !important;
+  max-width: 12.5% !important;
+  padding: 0px !important;
+}
+
+// for widht of textbox should not be stretches
+::ng-deep .ng-select .ng-select-container .ng-value-container {
+  overflow: hidden;
+  flex-wrap: nowrap;
+}
+
+::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+
+
+//for font size and height of dropdown = 32px
+::ng-deep .ng-select .ng-select-container {
+  height: 32px !important;
+  min-height: 32px !important;
+  font-size: 12px !important;
+  align-items: center;
+}
+
+.form-label {
+  margin-bottom: 0px !important;
+}
+
+.date-group {
+  height: 32px !important;
+}
+
+::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+  padding: 4px 0px !important;
+}
+
+::ng-deep .ng-select .ng-select-container .ng-value-container {
+  padding-top: 0;
+}
+
+::ng-deep .ng-dropdown-panel .ng-option {
+  font-size: 12px;
+}
+
+/* Button Report */
+.btn-report{
+    border-radius: 4px;
+    background-color: #8091a5;
+    color: #fff !important;
+    font-size: 14px !important;
+    height: 32px;
+    padding: 4px 15px !important;
+    margin-left: 15px !important;
+    width: auto !important;
+    margin-right: 7px !important;
+}
+
+::ng-deep .ng-select .ng-select-container:focus-within {
+  box-shadow: 0 0 5px 3px rgba(24, 119, 242, 1.000) !important;
+}
+
+::ng-deep .ng-select .ng-select-container:focus {
+  box-shadow: 0 0 5px 3px rgba(24, 119, 242, 1.000) !important;
+}
+
+
+/* Date Picker */
+.fa-calendar {
+  --fa: "\f073" !important;
+}
+
+.dpicker {
+  border: 1px solid #ccc !important;
+  // font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  height: 32px !important;
+}
+
+.dpicker:focus {
+  box-shadow: 0 0 5px 3px rgba(24, 119, 242, 1.000) !important;
+}
+
+.cal {
+  height: 32px !important;
+  background-color: #1877F2;
+  margin-left: 0px !important;
+}
+
+.cal:focus {
+  box-shadow: none !important;
+}
+
+.label-data {
+  font-weight: 600 !important;
+  font-size: 0.7rem !important;
+  line-height: 1rem;
+}
+
+
+/*
+ * SOLUTION FOR RESPONSIVENESS
+ * On smaller screens (like mobile), stack the form fields into a single column.
+ */
+@media (max-width: 768px) {
+  .filter-grid {
+    grid-template-columns: 1fr;
+    /* Switch to a single column layout */
+    gap: 12px;
+    /* You might want a smaller gap on mobile */
+  }
+}
+
+.input-group-button {
+  background: none !important;
+  border: 1px solid #1877F2 !important;
+  background-color: #1877F2 !important;
+  border-radius: 0 3px 3px 0 !important;
+  min-width: 35px;
+  margin-left: 1px;
+  height: 32px !important;
+  cursor: pointer;
+
+  .fa {
+    color: #fff;
+  }
+
+  &:focus {
+    box-shadow: 0 0 5px 3px rgba(0, 158, 224, .33);
+  }
+}
+
+.input-group-button:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.Breadcrumb h1 {
+  font-weight: bold;
+}
+
+.Breadcrumb h2 {
+  font-weight: bold;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: 0px;
+  margin-left: 0px;
+}
+
+.col-2{
+  padding-left: 0px;
+}
+
+.col-10{
+  padding-right: 0px;
+}
+.col-custom-10-5 {
+    padding-right: 0px !important;
+    padding-left: 0px;
+}
+
+//Invalid state red border
+::ng-deep .invalid-select.ng-select > .ng-select-container {
+  background-color: rgba(213, 33, 33, 0.1);
+  border: 2px solid red !important;
+}
+
+.invalid-date {
+  background-color: rgba(213, 33, 33, 0.1);
+  border: 2px solid red !important;
+}

package/src/lib/shared/search-filter/search-filter.component.spec.ts

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