changes in selectComponent

Author: Deepika516

projects/arc-lib/documentation.json

@@ -6,7 +6,7 @@
   </nb-layout-column>
   <nb-layout-column>
     <div class="login-img">
-      <img width="90%" src="http://localhost:4200/assets/images/auth/login-img.png" src=""alt="loginImg" />
+      <img width="90%" src="http://localhost:4200/assets/images/auth/login-img.png" alt="loginImg" />
     </div>
   </nb-layout-column>
 </nb-layout>

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

@@ -11,15 +11,17 @@ import {ThemeModule} from '@project-lib/theme/theme.module';
 import {AuthRoutingModule} from './auth-routing.module';
 import {AuthComponent} from './auth.component';
 import {LoginComponent} from './login/login.component';
+import { HomePageComponent } from './home-page/home-page.component';
+import { LoginPageComponent } from './login-page/login-page.component';
 
 @NgModule({
-  declarations: [LoginComponent, AuthComponent],
+  declarations: [LoginComponent, AuthComponent, HomePageComponent, LoginPageComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     CommonModule,
     FormsModule,
     RouterModule,
-    // ThemeModule,
+    ThemeModule,
     AuthRoutingModule,
     HttpClientModule,
     NbLayoutModule,

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

@@ -1,35 +1,29 @@
 <nb-card class="h-100">
   <nb-card-body>
     <div class="align-center logo">
-      <img
-        width="20%"
-       
-      
-        src="http://localhost:4200/assets/images/auth/angular.png"
-        alt="logo"
-        draggable="false"
-      />
+      <img width="20%" src= "{{image}}" alt="logo" draggable="false"
+        height="126px" width="120px" />
+
+      <!-- src="baseHref + 'images/auth/angular.png'"  -->
     </div>
     <div class="align-center description text-center">
       <h2>Hello and Welcome! to the Angular Boiler Plate</h2>
     </div>
     <div class="align-center text-center">
-      <span class="w-60"
-        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas
+      <span class="w-60">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas
         dui sit amet purus consequat, sed ornare nulla imperdiete tiam egestas
-        dui sit amet.</span
-      >
+        dui sit amet.</span>
     </div>
     <div class="align-center login-btn">
       <button (click)="loginViaGoogle()" class="google-btn">
         Continue with Google
       </button>
     </div>
     <div class="align-center footer">
-      <span class="w-50 text-center">
+      <span class=" text-center">
         By continuing with Google, you agree to our Terms of Service and Privacy
         Policy.
       </span>
     </div>
   </nb-card-body>
-</nb-card>
+</nb-card>

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

@@ -1,23 +1,27 @@
 @use "sass:map";
-@use  "projects/arc-lib/src/lib/theme/styles/_variables.scss" as *;
+@use "../../../theme/styles/variables" as *;
+@use "../../../../styles.scss" as *;
+@use "../../../../../../arc/src/themes.scss"  as *;
+
 
 :host {
   .logo {
-    padding-top: 15%;
+    padding-top: 10%;
   }
 
   .description {
     padding-top: 10%;
   }
 
   .login-btn {
-    padding-top: 10%;
+    padding-top: 7%;
   }
 
   .footer {
-    padding-top: 15%;
+    padding-top: 7%;
   }
 }
+*{font-family: 'Montserrat,Open Sans,sans-serif',}
 
 .google-btn {
   width: 24.125rem;
@@ -38,4 +42,4 @@
   &:active {
     border-color: map-get($font, "primary");
   }
-}
+}

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

@@ -1,9 +1,11 @@
 import {Location} from '@angular/common';
-import {Component} from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {AuthService} from '@project-lib/core/auth';
 import {RouteComponentBaseDirective} from '@project-lib/core/route-component-base';
 
+// import { APP_BASE_HREF } from '@angular/common';
+
 @Component({
   selector: 'login',
   templateUrl: './login.component.html',
@@ -14,10 +16,14 @@ export class LoginComponent extends RouteComponentBaseDirective {
     override readonly route: ActivatedRoute,
     override readonly location: Location,
     private readonly authService: AuthService,
+  //   @Inject(APP_BASE_HREF)
+  //   private baseHref: string
   ) {
     super(route, location);
   }
-
+ image="../../../assets/images/auth/angular.png"
+//  ""
+//  projects/arc-lib/src/lib/assets/images/auth/angular.png
   loginViaGoogle() {
     this.authService.loginViaGoogle();
   }

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

@@ -22,7 +22,7 @@ import { ITEM_HEIGHT, PLACEHOLDER_ITEM } from '../constants';
 import { GroupConfig } from '../types';
 
 @Component({
-  selector: 'list',
+  selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -151,6 +151,8 @@ 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);
     this.sortByGroups();

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

@@ -8,7 +8,9 @@ import {
   NbFormFieldModule,
   NbIconModule,
   NbInputModule,
+  NbLayoutModule,
   NbTagModule,
+  NbThemeModule,
 } from '@nebular/theme';
 import { TranslateModule } from '@ngx-translate/core';
 import { ResizeModule } from '../resize/resize.module';
@@ -25,6 +27,7 @@ import {ListComponent} from './list/list.component';
     NbFormFieldModule,
     NbIconModule,
     NbTagModule,
+    NbLayoutModule,
     NbInputModule,
     NbCheckboxModule,
     ReactiveFormsModule,

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

@@ -1,12 +1,9 @@
-<nb-form-field
+<div
   class="select-container"
-  [class.disabled]="disabled"
-  (bizbookResize)="multiple && updateTagsCount()"
+  [class.disabled]="disabledDropdown"
   cdk-overlay-origin
-  
-  (click)="!disabled && toggleDropdown()"
+  (click)="!disabledDropdown && toggleDropdown()"
 >
-<!--6 #overlayOrigin="cdkOverlayOrigin" -->
   <div
     *ngIf="multiple && invisibleTags.length"
     nbSuffix
@@ -19,16 +16,17 @@
     nbSuffix
     class="close-icon"
     icon="close-outline"
-    *ngIf="!disabled && !isEmpty && showClearAll"
+    *ngIf="!disabledDropdown && !isEmpty && showClearAll"
     (click)="clearAll(); $event.stopPropagation()"
   ></nb-icon>
   <nb-icon
     [@rotate]="state"
-    *ngIf="!disabled"
+    *ngIf="!disabledDropdown"
     nbSuffix
-    (click)="toggleDropdown(); $event.stopPropagation()"
+    (click)="toggleDropdown()"
     icon="chevron-down"
   ></nb-icon>
+
   <nb-tag-list
     [ngStyle]="{padding}"
     *ngIf="multiple; else single"
@@ -38,26 +36,29 @@
     <nb-tag
       *ngFor="let item of visibleTags"
       [text]="asString(item && item[nameField])"
-      [ngStyle]="{
-        maxWidth: 'calc(100% - ' + suffixCount * suffixWidth + 'px)'
-      }"
-      [removable]="!disabled"
+      [ngStyle]="{maxWidth: 'calc(100% - ' + suffixCount * suffixWidth + 'px)'}"
+      [removable]="!disabledDropdown"
       (remove)="toggle(item); toggleDropdown()"
     ></nb-tag>
     <input
       type="text"
+      class="tag-input"
       nbTagInput
       fullWidth
       [placeholder]="placeholder"
       (keyup.enter)="selectOnEnter && autocompleteEnter(autoCompleteInput)"
       [hidden]="
-        (!allowInput && visibleTags.length !== 0) || (disabled && multiple)
+        (!allowInput && visibleTags.length !== 0) ||
+        (disabledDropdown && multiple && visibleTags.length !== 0)
       "
-      [readonly]="!allowInput"
+      [readonly]="!allowInput || disabledDropdown"
       #autoCompleteInput
       [class.cursor-pointer]="!allowInput"
       (input)="updateAutocompleteOptions(autoCompleteInput.value)"
-      (click)="$event.stopPropagation(); !allowInput && toggleDropdown()"
+      (click)="
+        $event.stopPropagation();
+        !disabledDropdown && !allowInput && toggleDropdown()
+      "
       [ngStyle]="{
         minWidth: inputMinWidth + 'px',
         marginRight: suffixCount * suffixWidth + 'px'
@@ -68,31 +69,30 @@
     <input
       type="text"
       class="cursor-pointer"
-      [class.no-disable-style]="!disabled"
+      [class.no-disable-style]="!disabledDropdown"
       nbInput
       fullWidth
       [value]="selectedItems.selected[0]?.[nameField] ?? ''"
       [placeholder]="placeholder"
       readonly
     />
   </ng-template>
-</nb-form-field>
+</div>
+
 <ng-template
   cdk-connected-overlay
   cdkConnectedOverlayLockPosition
   cdkConnectedOverlayHasBackdrop
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
-  cdkConnectedOverlayPanelClass="cdk-panel-bizbook-select"
+  cdkConnectedOverlayPanelClass="cdk-panel-select"
   [cdkConnectedOverlayScrollStrategy]="overlay.scrollStrategies.block()"
-  
   [cdkConnectedOverlayOpen]="state === states.Open"
   [cdkConnectedOverlayPositions]="positions"
-  [cdkConnectedOverlayWidth]="width"
+  [cdkConnectedOverlayWidth]="0"
   (backdropClick)="close()"
   (detach)="close()"
->
-<!--87 [cdkConnectedOverlayOrigin]="overlayOrigin" -->
-  <list
+  >
+  <!-- <app-list
     class="dropdown-panel"
     [options]="options"
     [nameField]="nameField"
@@ -106,30 +106,31 @@
     [searchPlaceholder]="searchPlaceholder"
     [disabledField]="disabledField"
     [selectOnEnter]="selectOnEnter"
-    [ngStyle]="{ height: dropdownHeight + 'px' }"
+    [ngStyle]="{height: dropdownHeight + 'px'}"
     [groupConfig]="groupConfig"
     [showIcon]="showIcon"
-  ></list>
+    
+   
+  ></app-list> -->
 </ng-template>
 <ng-template
   cdk-connected-overlay
   cdkConnectedOverlayLockPosition
   cdkConnectedOverlayHasBackdrop
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
-  cdkConnectedOverlayPanelClass="cdk-panel-bizbook-select"
+  cdkConnectedOverlayPanelClass="cdk-panel-select"
   [cdkConnectedOverlayScrollStrategy]="overlay.scrollStrategies.block()"
-  
   [cdkConnectedOverlayOpen]="
     !!currentPanel && currentPanel.state === states.Open
   "
   [cdkConnectedOverlayPositions]="positions"
-  [cdkConnectedOverlayWidth]="currentPanel?.width ?? 0"
+  [cdkConnectedOverlayWidth]="10"
   (backdropClick)="closePanel()"
   (detach)="closePanel()"
 >
-  <list
+  
+  <!-- <app-list
     class="dropdown-panel"
-    *ngIf="currentPanel?.list?.length"
     [options]="currentPanel?.list"
     [nameField]="nameField"
     [idField]="idField"
@@ -147,9 +148,9 @@
     [multiple]="false"
     [search]="false"
     [removal]="currentPanel?.removal ?? false"
-    [ngStyle]="{ height: (currentPanel?.height ?? 0) + 'px' }"
+    [ngStyle]="{height: (currentPanel?.height ?? 0) + 'px'}"
     (closed)="closePanel()"
     [groupConfig]="groupConfig"
-  ></list>
+    
+  ></app-list> -->
 </ng-template>
-<!-- 119 [cdkConnectedOverlayOrigin]="overlayOrigin" -->

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

@@ -1,5 +1,5 @@
 .select-container {
-  width: 100%;
+  width: 100px !important;
   nb-icon[icon="chevron-down"] {
     cursor: pointer;
   }