From 9df9df4b9442247977452bac527fd7c124c48e3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Sat, 2 Oct 2021 23:49:29 +0300
Subject: [PATCH] Icons

---
 src/assets/icons/arrow-right.svg                |  9 +++++++++
 src/assets/icons/plus.svg                       |  8 ++++++++
 src/assets/icons/radio-indeterminate.svg        | 15 +++++++++++++++
 src/assets/icons/radio-selected.svg             | 17 +++++++++++++++++
 .../empty-state/empty-state.component.ts        |  2 +-
 .../popup-filter/popup-filter.component.html    |  8 ++++----
 src/lib/icons/icons.module.ts                   | 14 +++++++-------
 .../round-checkbox.component.html               |  4 ++--
 8 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/icons/arrow-right.svg
 create mode 100644 src/assets/icons/plus.svg
 create mode 100644 src/assets/icons/radio-indeterminate.svg
 create mode 100644 src/assets/icons/radio-selected.svg

diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg
new file mode 100644
index 0000000..a413e58
--- /dev/null
+++ b/src/assets/icons/arrow-right.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="right_expandable" stroke="none" stroke-width="1">
+        <polygon fill="currentColor" id="Fill-1"
+                 points="7 9 10 5 4 5"
+                 transform="translate(7.000000, 7.000000) rotate(-90.000000) translate(-7.000000, -7.000000) "></polygon>
+    </g>
+</svg>
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
new file mode 100644
index 0000000..ec0b73a
--- /dev/null
+++ b/src/assets/icons/plus.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="plus_white" stroke="none" stroke-width="1">
+        <polygon fill-rule="nonzero" id="Path"
+                 points="78 45 55 45 55 22 45 22 45 45 22 45 22 55 45 55 45 78 55 78 55 55 78 55"></polygon>
+    </g>
+</svg>
diff --git a/src/assets/icons/radio-indeterminate.svg b/src/assets/icons/radio-indeterminate.svg
new file mode 100644
index 0000000..35c8b82
--- /dev/null
+++ b/src/assets/icons/radio-indeterminate.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Bulk-Actions" stroke="none" stroke-width="1">
+        <g id="01.-Bulk-Actions" transform="translate(-10.000000, -127.000000)">
+            <rect fill="none" height="980" width="1440" x="0" y="0"></rect>
+            <polygon fill="none" id="Rectangle" points="0 112 1086 112 1086 162 0 162"></polygon>
+            <g fill="currentColor" id="intermediary_selection"
+               transform="translate(10.000000, 127.000000)">
+                <path
+                    d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M14,8.9 L6,8.9 C5.44771525,8.9 5,9.34771525 5,9.9 L5,9.9 L5,10.1 C5,10.6522847 5.44771525,11.1 6,11.1 L6,11.1 L14,11.1 C14.5522847,11.1 15,10.6522847 15,10.1 L15,10.1 L15,9.9 C15,9.34771525 14.5522847,8.9 14,8.9 L14,8.9 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/icons/radio-selected.svg b/src/assets/icons/radio-selected.svg
new file mode 100644
index 0000000..cfef08c
--- /dev/null
+++ b/src/assets/icons/radio-selected.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="Bulk-Actions" stroke="none" stroke-width="1">
+        <g id="01.-Bulk-Actions" transform="translate(-10.000000, -209.000000)">
+            <rect fill="none" height="980" width="1440" x="0" y="0"></rect>
+            <g fill="none" id="Entry" transform="translate(0.000000, 194.000000)">
+                <polygon id="Rectangle" points="0 0 1086 0 1086 50 0 50"></polygon>
+            </g>
+            <g fill="currentColor" id="Radio_selected" transform="translate(10.000000, 209.000000)">
+                <path
+                    d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M13.6545842,6.07220062 L8.50054373,11.3199291 L6.58289039,9.38262084 C6.34328715,9.14059736 5.95224003,9.14059736 5.71263679,9.38262084 L5.06605523,10.0357335 C4.82983344,10.2743414 4.82983344,10.6586767 5.06605523,10.8972846 L8.06804104,13.9295935 C8.30826653,14.1722455 8.70055256,14.1715218 8.93988111,13.9279851 L15.1747747,7.58346184 C15.4094976,7.34461174 15.4087908,6.96150162 15.1731882,6.72351919 L14.5266067,6.07040651 C14.2863095,5.82768204 13.8938806,5.82848943 13.6545842,6.07220062 Z"
+                    id="radio_selected"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/lib/empty-states/empty-state/empty-state.component.ts b/src/lib/empty-states/empty-state/empty-state.component.ts
index 56a99e1..4f2c9cc 100644
--- a/src/lib/empty-states/empty-state/empty-state.component.ts
+++ b/src/lib/empty-states/empty-state/empty-state.component.ts
@@ -14,7 +14,7 @@ export class EmptyStateComponent implements OnInit {
     @Input() @Required() text!: string;
     @Input() icon?: string;
     @Input() showButton = true;
-    @Input() buttonIcon = 'red:plus';
+    @Input() buttonIcon = 'iqser:plus';
     @Input() buttonLabel?: string;
     @Input() horizontalPadding = 100;
     @Input() verticalPadding = 120;
diff --git a/src/lib/filtering/popup-filter/popup-filter.component.html b/src/lib/filtering/popup-filter/popup-filter.component.html
index 3dc2550..614d8e6 100644
--- a/src/lib/filtering/popup-filter/popup-filter.component.html
+++ b/src/lib/filtering/popup-filter/popup-filter.component.html
@@ -1,19 +1,19 @@
 <ng-container *ngIf="primaryFilterGroup$ | async as primaryGroup">
     <iqser-icon-button
         *ngIf="primaryGroup.icon"
+        [attr.aria-expanded]="expanded$ | async"
         [icon]="primaryGroup.icon"
         [label]="primaryGroup.label || ('filter-menu.label' | translate)"
         [matMenuTriggerFor]="filterMenu"
         [showDot]="hasActiveFilters$ | async"
-        [attr.aria-expanded]="expanded$ | async"
     ></iqser-icon-button>
 
     <iqser-chevron-button
         *ngIf="!primaryGroup.icon"
+        [attr.aria-expanded]="expanded$ | async"
         [label]="primaryGroup.label || ('filter-menu.label' | translate)"
         [matMenuTriggerFor]="filterMenu"
         [showDot]="hasActiveFilters$ | async"
-        [attr.aria-expanded]="expanded$ | async"
     ></iqser-chevron-button>
 
     <mat-menu
@@ -25,8 +25,8 @@
         <ng-template matMenuContent>
             <iqser-input-with-action
                 (click)="$event.stopPropagation()"
-                [(value)]="searchService.searchValue"
                 *ngIf="primaryGroup.filterceptionPlaceholder"
+                [(value)]="searchService.searchValue"
                 [placeholder]="primaryGroup.filterceptionPlaceholder"
                 [width]="'full'"
             ></iqser-input-with-action>
@@ -95,7 +95,7 @@
     <div (click)="toggleFilterExpanded($event, filter)" class="mat-menu-item flex">
         <div *ngIf="filter.children?.length > 0" class="arrow-wrapper">
             <mat-icon *ngIf="filter.expanded" color="accent" svgIcon="iqser:arrow-down"></mat-icon>
-            <mat-icon *ngIf="!filter.expanded" color="accent" svgIcon="red:arrow-right"></mat-icon>
+            <mat-icon *ngIf="!filter.expanded" color="accent" svgIcon="iqser:arrow-right"></mat-icon>
         </div>
 
         <div *ngIf="atLeastOneIsExpandable && filter.children?.length === 0" class="arrow-wrapper spacer">&nbsp;</div>
diff --git a/src/lib/icons/icons.module.ts b/src/lib/icons/icons.module.ts
index 58f472a..73adf14 100644
--- a/src/lib/icons/icons.module.ts
+++ b/src/lib/icons/icons.module.ts
@@ -6,13 +6,14 @@ import { DomSanitizer } from '@angular/platform-browser';
 @NgModule({
     imports: [CommonModule, MatIconModule],
     declarations: [],
-    exports: [MatIconModule],
+    exports: [MatIconModule]
 })
 export class IqserIconsModule {
     constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
         const icons: Set<string> = new Set([
             'arrow-down',
             'arrow-down-o',
+            'arrow-right',
             'check',
             'close',
             'edit',
@@ -23,17 +24,16 @@ export class IqserIconsModule {
             'logout',
             'menu',
             'offline',
+            'plus',
+            'radio-indeterminate',
+            'radio-selected',
             'refresh',
             'search',
             'sort-asc',
-            'sort-desc',
+            'sort-desc'
         ]);
         icons.forEach(icon => {
-            _iconRegistry.addSvgIconInNamespace(
-                'iqser',
-                icon,
-                _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`),
-            );
+            _iconRegistry.addSvgIconInNamespace('iqser', icon, _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`));
         });
     }
 }
diff --git a/src/lib/inputs/round-checkbox/round-checkbox.component.html b/src/lib/inputs/round-checkbox/round-checkbox.component.html
index 6599e3c..39efd44 100644
--- a/src/lib/inputs/round-checkbox/round-checkbox.component.html
+++ b/src/lib/inputs/round-checkbox/round-checkbox.component.html
@@ -6,6 +6,6 @@
     [class.with-bg]="type === 'with-bg'"
     class="wrapper"
 >
-    <mat-icon *ngIf="active && !indeterminate" svgIcon="red:radio-selected"></mat-icon>
-    <mat-icon *ngIf="indeterminate" svgIcon="red:radio-indeterminate"></mat-icon>
+    <mat-icon *ngIf="active && !indeterminate" svgIcon="iqser:radio-selected"></mat-icon>
+    <mat-icon *ngIf="indeterminate" svgIcon="iqser:radio-indeterminate"></mat-icon>
 </div>