select component testing

projects/arc-lib/src/lib/components/auth/auth-routing.module.ts

@@ -9,10 +9,10 @@ const routes: Routes = [
     path: '',
     component: AuthComponent,
     children: [
-      {
-        path: 'login',
-        component: LoginComponent,
-      },
+      // {
+      //   path: 'login',
+      //   component: LoginComponent,
+      // },
     ],
   },
 ];

projects/arc-lib/src/lib/components/auth/auth.module.ts

@@ -36,5 +36,6 @@ import { LoginPageComponent } from './login-page/login-page.component';
       forms: {},
     }),
   ],
+  exports:[LoginPageComponent]
 })
 export class AuthModule {}

projects/arc-lib/src/lib/components/auth/home-page/home-page.component.html

@@ -0,0 +1 @@
+<p>home-page works!</p>

projects/arc-lib/src/lib/components/auth/home-page/home-page.component.spec.ts

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

projects/arc-lib/src/lib/components/auth/home-page/home-page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-home-page',
+  templateUrl: './home-page.component.html',
+  styleUrls: ['./home-page.component.css']
+})
+export class HomePageComponent {
+
+}

projects/arc-lib/src/lib/components/auth/login-page/login-page.component.html

@@ -0,0 +1,23 @@
+
+  <div class="main-section">
+    <div class="first">
+      <nb-card class="h-100 m-0">
+        <nb-card-body class="p-0">
+          <!-- Include the Login Component here -->
+          <login></login>
+
+
+        </nb-card-body>
+      </nb-card>
+    </div>
+
+    <div class="first">
+      <nb-layout>
+        <nb-layout-column>
+          <div class="login-img">
+            <img width="90%" src="http://localhost:4200/assets/images/auth/login-img.png" alt="loginImg" />
+          </div>
+        </nb-layout-column>
+      </nb-layout>
+    </div>
+  </div>

projects/arc-lib/src/lib/components/auth/login-page/login-page.component.scss

@@ -0,0 +1,9 @@
+.main-section {
+    display: flex;
+}
+.first {
+    width: 50%;
+}
+.main-section .first .nb-card{
+   margin: 0;
+}

projects/arc-lib/src/lib/components/auth/login-page/login-page.component.spec.ts

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

projects/arc-lib/src/lib/components/auth/login-page/login-page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-login-page',
+  templateUrl: './login-page.component.html',
+  styleUrls: ['./login-page.component.scss']
+})
+export class LoginPageComponent {
+
+
+}

projects/arc-lib/src/lib/components/auth/login/login.component.html

@@ -1,7 +1,7 @@
 <nb-card class="h-100">
   <nb-card-body>
     <div class="align-center logo">
-      <img width="20%" src= "{{image}}" alt="logo" draggable="false"
+      <img width="20%" src= "assets/images/auth/angular.png" alt="logo" draggable="false"
         height="126px" width="120px" />
 
       <!-- src="baseHref + 'images/auth/angular.png'"  -->

projects/arc-lib/src/lib/components/selector/list/list.component.ts

@@ -151,7 +151,7 @@ export class ListComponent<
    * It initializes the removed set, the visible list, and the search control
    */
   ngOnInit(): void {
-    debugger
+
     console.log(this.options)
     this.removed = new Set();
     this.visibleList = Object.assign([], this.options);

projects/arc-lib/src/lib/components/selector/select/select.component.html

@@ -88,10 +88,11 @@
   [cdkConnectedOverlayScrollStrategy]="overlay.scrollStrategies.block()"
   [cdkConnectedOverlayOpen]="state === states.Open"
   [cdkConnectedOverlayPositions]="positions"
-  [cdkConnectedOverlayWidth]="0"
+  [cdkConnectedOverlayWidth]="width"
   (backdropClick)="close()"
   (detach)="close()"
   >
+  <div>Hello</div>
   <!-- <app-list
     class="dropdown-panel"
     [options]="options"

projects/arc-lib/src/lib/components/selector/select/select.component.ts

@@ -340,7 +340,7 @@ ngOnChanges(changes: SimpleChanges): void {
   }
   this._dropdownHeight();
   this.updateSelectedItems();
-  // this.updateTagsCount();
+  this.updateTagsCount();
 }
 
 /**
@@ -506,7 +506,7 @@ handleAutocompleteSelect(item: InputType) {
  */
 open() {
   this.state = SelectState.Open;
-  // this._updateWidth();
+  this._updateWidth();
 }
 
 /**
@@ -536,51 +536,51 @@ emitNewValue() {
  * It calculates the width of the tags and the input box and then decides which tags to show and which
  * to hide
  */
-// updateTagsCount() {
-//   // for cross and chevron if not disabled
-//   this.suffixCount = this.disabledDropdown ? 0 : DIGITS.TWO;
-//   if (this.invisibleTags.length) {
-//     // for the counter box
-//     this.suffixCount += 1;
-//   }
-//   this.invisibleTags = [];
-//   this.visibleTags = Object.assign([], this.selectedItems.selected);
-//   this._cdr.detectChanges();
-//   const inputBuffer =
-//     this.allowInput && !this.disabledDropdown
-//       ? this.inputMinWidth + DIGITS.TWO * this.tagMargin
-//       : 0;
-//   const width = this.elementRef.nativeElement.getBoundingClientRect().width;
-//   const rightPadding = this.suffixWidth * this.suffixCount;
-//   const allowedWidth =
-//     width - (this.padding * DIGITS.TWO + rightPadding + inputBuffer);
-//   let combinedWidth = 0;
-//   let i;
-//   for (i = 0; i < this.tags.length; i++) {
-//     const tag = this.tags.get(i);
-//     if (!tag) {
-//       break;
-//     }
-//     combinedWidth =
-//       combinedWidth +
-//       tag._hostElement.nativeElement.getBoundingClientRect().width +
-//       DIGITS.TWO * this.tagMargin;
-//     if (combinedWidth > allowedWidth) {
-//       break;
-//     }
-//   }
-//   if (i === 0) {
-//     i = 1;
-//   }
-//   this.visibleTags = this.selectedItems.selected.slice(0, i);
-//   this.invisibleTags = this.selectedItems.selected.slice(i);
-//   // this required again to ensure proper width of input element
-//   if (this.invisibleTags.length) {
-//     // for the counter box
-//     this.suffixCount += 1;
-//   }
-//   this._cdr.detectChanges();
-// }
+updateTagsCount() {
+  // for cross and chevron if not disabled
+  this.suffixCount = this.disabledDropdown ? 0 : DIGITS.TWO;
+  if (this.invisibleTags.length) {
+    // for the counter box
+    this.suffixCount += 1;
+  }
+  this.invisibleTags = [];
+  this.visibleTags = Object.assign([], this.selectedItems.selected);
+  this._cdr.detectChanges();
+  const inputBuffer =
+    this.allowInput && !this.disabledDropdown
+      ? this.inputMinWidth + DIGITS.TWO * this.tagMargin
+      : 0;
+  const width = this.elementRef.nativeElement.getBoundingClientRect().width;
+  const rightPadding = this.suffixWidth * this.suffixCount;
+  const allowedWidth =
+    width - (this.padding * DIGITS.TWO + rightPadding + inputBuffer);
+  let combinedWidth = 0;
+  let i;
+  for (i = 0; i < this.tags.length; i++) {
+    const tag = this.tags.get(i);
+    if (!tag) {
+      break;
+    }
+    combinedWidth =
+      combinedWidth +
+      tag._hostElement.nativeElement.getBoundingClientRect().width +
+      DIGITS.TWO * this.tagMargin;
+    if (combinedWidth > allowedWidth) {
+      break;
+    }
+  }
+  if (i === 0) {
+    i = 1;
+  }
+  this.visibleTags = this.selectedItems.selected.slice(0, i);
+  this.invisibleTags = this.selectedItems.selected.slice(i);
+  // this required again to ensure proper width of input element
+  if (this.invisibleTags.length) {
+    // for the counter box
+    this.suffixCount += 1;
+  }
+  this._cdr.detectChanges();
+}
 
 /**
  * It takes an item of type T and returns it as a string
@@ -683,17 +683,18 @@ private _initSelectionModel() {
 /**
  * It updates the width of the dropdown overlay element.
  */
-// private _updateWidth() {
-//   this.width = this.elementRef.nativeElement.getBoundingClientRect().width;
-//   this._cdr.detectChanges();
-// }
+private _updateWidth() {
+
+  this.width = 100;
+  this._cdr.detectChanges();
+}
 
 /**
  * It updates the width of the panel overlay element.
  */
 private _panelWidth(type: PanelType) {
-  this.panels[type].width =
-    this.elementRef.nativeElement.getBoundingClientRect().width;
+  this.panels[type].width =100;
+
   this._cdr.detectChanges();
 }
 

projects/arc-lib/src/stories/components/Login.stories.ts

@@ -0,0 +1,46 @@
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { NbLayoutModule, NbCardModule, NbStatusService, NbThemeService } from '@nebular/theme';
+import { Meta, Story } from '@storybook/angular';
+import { LoginComponent } from '@project-lib/components/auth/login/login.component';
+
+// Import your components
+// Replace with the actual path
+
+export default {
+  title: 'Main Section',
+  decorators: [
+    moduleMetadata({
+      declarations: [], // Add your components here
+      imports: [CommonModule, NbLayoutModule, NbCardModule],
+      providers:[NbStatusService,NbThemeService]
+    }),
+  ],
+} as Meta;
+
+const Template: Story = () => ({
+  template: `
+    <div class="main-section">
+      <div class="first">
+        <nb-card class="h-100 m-0">
+          <nb-card-body class="p-0">
+            <!-- Include the Login Component here -->
+            <app-login></app-login>
+          </nb-card-body>
+        </nb-card>
+      </div>
+      <div class="first">
+        <nb-layout>
+          <nb-layout-column>
+            <div class="login-img">
+              <img width="90%" src="http://localhost:4200/assets/images/auth/login-img.png" alt="loginImg" />
+            </div>
+          </nb-layout-column>
+        </nb-layout>
+      </div>
+    </div>
+  `,
+});
+
+export const MainSection = Template.bind({});
+

projects/arc-lib/src/stories/components/LoginPage.stories.ts

@@ -44,4 +44,17 @@ export default {
   });
 
   export const Default = Template.bind({});
-  Default.args = {};
+  Default.args = {};
+
+//   export const WithImage = Template.bind({});
+
+// WithImage.args:Story  = {
+
+//     render: () => {<img src="/images/Illustration.svg" alt="my image" />},
+//     loggedInUserDM: {
+//         /* Set your user data here if needed */
+//     },
+
+//     greeting: 'Hello, World!',
+// };
+