Feature/bug fixes (#43)

* add icon, bug fix * bug fixes * bump version --------- Co-authored-by: sabrefoxx <[email protected]>
Reloadly · Nov 30, 2023 · f9cb922 · f9cb922
1 parent dee800b
commit f9cb922
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "reloadly-ui",
-    "version": "0.0.1-beta.49",
+    "version": "0.0.1-beta.50",
     "description": "Angular UI library",
     "repository": {
         "type": "git",
@@ -66,4 +66,4 @@
         "url": "https://github.com/Reloadly/reloadly-ui/issues"
     },
     "homepage": "https://ui.reloadly.com/"
-}
+}
diff --git a/src/lib/components/breadcrumb-group/breadcrumb-item/breadcrumb-item.component.html b/src/lib/components/breadcrumb-group/breadcrumb-item/breadcrumb-item.component.html
@@ -1,3 +1,5 @@
-<div class="breadcrumb-item" [class.active-item]="isActive">
-    <ng-content></ng-content>
-</div>
+<ng-template>
+    <div class="breadcrumb-item" [class.active-item]="isActive">
+        <ng-content></ng-content>
+    </div>
+</ng-template>
diff --git a/src/lib/components/breadcrumb-group/breadcrumb-item/breadcrumb-item.component.scss b/src/lib/components/breadcrumb-group/breadcrumb-item/breadcrumb-item.component.scss
@@ -3,7 +3,7 @@
 .item-class {
     font-style: normal;
     font-weight: 450;
-    font-size: 12px;
+    font-size: inherit;
     color: $reloadly-black-2;
     cursor: pointer;
     &:hover {

diff --git a/src/lib/components/breadcrumb-group/breadcrumb-item/breadcrumb-item.component.ts b/src/lib/components/breadcrumb-group/breadcrumb-item/breadcrumb-item.component.ts
@@ -1,10 +1,18 @@
-import { Component, Input } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, Component, Input, TemplateRef, ViewChild } from '@angular/core';
 
 @Component({
     selector: 'reloadly-breadcrumb-item',
     templateUrl: './breadcrumb-item.component.html',
     styleUrls: ['./breadcrumb-item.component.scss']
 })
-export class BreadcrumbItemComponent {
+export class BreadcrumbItemComponent implements AfterContentInit {
     @Input() isActive: boolean = false;
+    @ViewChild(TemplateRef) template!: TemplateRef<any>;
+    index!: number;
+
+    constructor(private changeDetection: ChangeDetectorRef) { }
+
+    ngAfterContentInit(): void {
+        this.changeDetection.detectChanges();
+    }
 }
diff --git a/src/lib/components/breadcrumb-group/breadcrumbs/breadcrumbs.component.html b/src/lib/components/breadcrumb-group/breadcrumbs/breadcrumbs.component.html
@@ -1,3 +1,8 @@
 <div class="breadcrumbs">
-    <ng-content></ng-content>
+    <ng-container *ngFor="let content of contents; index as i">
+        <ng-container *ngTemplateOutlet="content.template"></ng-container>
+        <svg *ngIf="i !== maxIndex" class="breadcrumbs-arrow">
+            <use xlink:href="#chevron-right"></use>
+        </svg>
+    </ng-container>
 </div>
diff --git a/src/lib/components/breadcrumb-group/breadcrumbs/breadcrumbs.component.scss b/src/lib/components/breadcrumb-group/breadcrumbs/breadcrumbs.component.scss
@@ -3,20 +3,24 @@
 .breadcrumbs {
     width: 100%;
     display: flex;
+    align-items: center;
     flex-flow: row wrap;
     margin-bottom: $spacing-16;
+    font-size: $font-size-xs;
+
+    &-arrow {
+        margin: 0 $spacing-8;
+        color: $reloadly-black-2;
+        fill: none;
+        stroke: currentColor;
+        width: 0.7em;
+        height: 0.91em;
+    }
+
     ::ng-deep {
         reloadly-breadcrumb-item {
             display: flex;
             align-items: center;
-            &:not(:last-of-type) {
-                margin-right: $spacing-10;
-                &:after {
-                    content: '>';
-                    margin-left: $spacing-10;
-                    color: $reloadly-black-2;
-                }
-            }
         }
     }
 }
diff --git a/src/lib/components/breadcrumb-group/breadcrumbs/breadcrumbs.component.ts b/src/lib/components/breadcrumb-group/breadcrumbs/breadcrumbs.component.ts
@@ -7,18 +7,19 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp
     styleUrls: ['./breadcrumbs.component.scss']
 })
 export class ReloadlyBreadcrumbsComponent implements AfterContentInit, OnDestroy {
-    @ContentChildren(BreadcrumbItemComponent) contents!: QueryList<BreadcrumbItemComponent>;
-    @ContentChildren(BreadcrumbItemComponent, { read: ViewContainerRef }) contentsRef!: QueryList<ViewContainerRef>;
+    @ContentChildren(BreadcrumbItemComponent) private _contents!: QueryList<BreadcrumbItemComponent>;
+    @ContentChildren(BreadcrumbItemComponent, { read: ViewContainerRef }) private contentsRef!: QueryList<ViewContainerRef>;
     private isContentInit = false;
-    private setIndexOnInit: number | null = null;
+    private activeIndex = 0;
+    maxIndex = 0;
+    contents!: Array<BreadcrumbItemComponent>;
 
     constructor() { }
 
     ngAfterContentInit(): void {
         this.isContentInit = true;
-        if (typeof this.setIndexOnInit == 'number') {
-            this.setActiveIndex(this.setIndexOnInit);
-        }
+        this.setActiveIndex(this.activeIndex);
+        this.contents = this._contents.toArray();
     }
 
     ngOnDestroy(): void {
@@ -27,10 +28,14 @@ export class ReloadlyBreadcrumbsComponent implements AfterContentInit, OnDestroy
 
     setActiveIndex(index: number): void {
         if (!this.isContentInit) {
-            this.setIndexOnInit = index;
+            this.activeIndex = index;
         } else {
-            this.contents.forEach(c => c.isActive = false);
-            this.contents.toArray()[index].isActive = true;
+            this._contents.forEach((c, index) => {
+                c.isActive = false;
+                c.index = index;
+                this.maxIndex = index;
+            });
+            this._contents.toArray()[index].isActive = true;
         }
     }
 }
diff --git a/src/lib/components/svg/svg.component.html b/src/lib/components/svg/svg.component.html
@@ -371,7 +371,7 @@
         </symbol>
         <symbol viewBox="0 0 16 24" id="chevron-right">
             <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M 3.2000256,22.56 12.800025,12 3.2000256,1.4399997" />
+                  d="M 1.65886,2.8088027 10.850121,12.00002 1.65886,21.191192 c -0.642485,0.642632 -0.642485,1.684313 0,2.326944 0.642631,0.642485 1.684459,0.642485 2.326944,0 L 14.341545,13.162381 c 0.641944,-0.641959 0.641944,-1.682779 0,-2.324738 L 3.985804,0.48191724 c -0.642485,-0.64255654 -1.684313,-0.64255654 -2.326944,0 -0.642485,0.64254336 -0.642485,1.68432756 0,2.32688546 z" />
         </symbol>
         <symbol viewBox="0 0 16 24" id="facebook">
             <path d="M 14.6,0 H 11 C 9.4086798,0 7.8825198,0.632136 6.7573998,1.757352 5.6321598,2.882568 5.0000002,4.408692 5.0000002,6 v 3.6 h -3.6 v 4.8 h 3.6 V 24 H 9.7999998 V 14.4 H 13.4 L 14.6,9.6 H 9.7999998 V 6 c 0,-0.318264 0.12648,-0.623484 0.3514802,-0.848532 C 10.37648,4.92642 10.68176,4.8 11,4.8 h 3.6 z"