fix: fix filter tags component scss (#101)

Author: YanaYestr

apps/gauzy/src/app/pages/invoices/invoices/by-role/invoices-by-role.component.html

@@ -184,11 +184,12 @@ <h4>
 													</ga-currency>
 												</div>
 											</div>
-											<div class="col-sm-2">
+											<div class="col-sm-3">
 												<ga-tags-color-input
 													[selectedTags]="searchForm.get('tags').value"
 													(selectedTagsEvent)="selectedTagsEvent($event)"
 													[isOrgLevel]="true"
+													[useNoOfTagsFits]="false"
 												>
 												</ga-tags-color-input>
 											</div>

apps/gauzy/src/app/pages/invoices/invoices/by-role/invoices-by-role.component.scss

@@ -382,7 +382,7 @@ nb-tab {
   ::ng-deep {
     @include card_overrides(auto, $default-card-height, $default-radius);
     @include ga-overrides.ng-select-overrides(
-    ga-overrides.$default-height,
+      ga-overrides.$default-height,
       $default-radius,
       ga-overrides.$default-box-shadow-inset
     );
@@ -402,7 +402,7 @@ nb-tab {
 }
 
 :host nb-accordion {
-  @include ga-overrides.dialog(var(--gauzy-card-1), var(--gauzy-card-1));
+  @include ga-overrides.custom-dialog(auto, var(--gauzy-card-1), var(--gauzy-card-1));
 }
 
 .comments-container {

packages/ui-core/shared/src/lib/tags/tags-color-input/tags-color-input.component.html

@@ -22,21 +22,23 @@
 				<ng-container *ngIf="multiple">
 					<input type="checkbox" [ngModel]="tag$.selected" />
 				</ng-container>
-				<nb-badge
-					[style.background]="background(tag.color)"
-					class="tag-color"
-				></nb-badge>
+				<nb-badge [style.background]="background(tag.color)" class="tag-color"></nb-badge>
 				<span class="text">{{ tag.name }}</span>
 			</div>
 		</ng-template>
 		<ng-template ng-multi-label-tmp let-tags="selectedTags" let-clear="clear">
 			<ng-container *ngIf="!!noOfTagsFits; else notOverflown">
-				<div class="ng-value" *ngFor="
-								let item of selectedTags
-									| slice : 0 : noOfTagsFits || selectedTags.length
-							">
-					<nb-badge class="tag-color tag-label" [style.background]="background(item.color)"
-						[style.color]="backgroundContrast(item.color)" [text]="item.name" (click)="clear(item)"></nb-badge>
+				<div
+					class="ng-value"
+					*ngFor="let item of selectedTags | slice : 0 : noOfTagsFits || selectedTags.length"
+				>
+					<nb-badge
+						class="tag-color tag-label"
+						[style.background]="background(item.color)"
+						[style.color]="backgroundContrast(item.color)"
+						[text]="item.name"
+						(click)="clear(item)"
+					></nb-badge>
 				</div>
 				<div class="ng-value" *ngIf="selectedTags && selectedTags.length > noOfTagsFits">
 					<span class="ng-value-label">...</span>
@@ -45,7 +47,8 @@
 
 			<ng-template #notOverflown>
 				<div class="ng-value" *ngFor="let item of selectedTags">
-					<nb-badge class="tag-color tag-label"
+					<nb-badge
+						class="tag-color tag-label"
 						[style.background]="background(item.color)"
 						[style.color]="backgroundContrast(item.color)"
 						[text]="item.name"

packages/ui-core/shared/src/lib/tags/tags-color-input/tags-color-input.component.scss

@@ -25,10 +25,7 @@ input {
   height: unset;
 }
 :host ::ng-deep {
-  .ng-select.ng-select-multiple
-    .ng-select-container
-    .ng-value-container
-    .ng-value {
+  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
     background-color: transparent;
     margin-right: 0;
   }

packages/ui-core/shared/src/lib/tags/tags-color-input/tags-color-input.component.ts

@@ -103,6 +103,17 @@ export class TagsColorInputComponent extends PictureNameTagsComponent implements
 		this._addTag = value;
 	}
 
+	/*
+	 * Getter & Setter fow flow with noOfTagsFits
+	 */
+	_useNoOfTagsFits = true;
+	get useNoOfTagsFits(): boolean {
+		return this._useNoOfTagsFits;
+	}
+	@Input() set useNoOfTagsFits(value: boolean) {
+		this._useNoOfTagsFits = value;
+	}
+
 	@Output() selectedTagsEvent = new EventEmitter<ITag[]>();
 
 	selectedTagsOverflow = false;
@@ -223,12 +234,14 @@ export class TagsColorInputComponent extends PictureNameTagsComponent implements
 		}
 		const selectedContainer = this.el.nativeElement.querySelector('.ng-value-container');
 		const containerWidth = selectedContainer.offsetWidth;
-		this.noOfTagsFits = 0;
+		if (this.useNoOfTagsFits) this.noOfTagsFits = 0;
 
 		const totalTagWidth = selectedTags.reduce((acc, tag, currentIndex) => {
 			const totalWidth = this.getTagWidth(tag.name) + acc;
 
-			if (totalWidth >= containerWidth && this.noOfTagsFits === 0) this.noOfTagsFits = currentIndex;
+			if (this.useNoOfTagsFits && totalWidth >= containerWidth && this.noOfTagsFits === 0) {
+				this.noOfTagsFits = currentIndex;
+			}
 
 			return totalWidth;
 		}, 30); // 30px is the additional buffer

packages/ui-core/static/styles/gauzy/_gauzy-overrides.scss

@@ -43,6 +43,13 @@ $default-box-shadow: var(--gauzy-shadow);
   }
 }
 
+@mixin custom-dialog($height, $card-background-color, $input-background-color) {
+  @include input-appearance($height, $input-background-color);
+  nb-card {
+    background-color: $card-background-color;
+  }
+}
+
 @mixin input-appearance($height, $input-background-color) {
   ::ng-deep input,
   ::ng-deep nb-select.appearance-outline.status-basic .select-button,