From e8de4ccdf9a4d97e8fd6a6a08eb3be06b7e2c11e Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 29 Jul 2021 16:16:30 +0300
Subject: [PATCH] add chevron button component and required decorator

---
 src/assets/icons/arrow-down.svg                  | 13 +++++++++++++
 src/assets/styles/_buttons.scss                  |  4 ++--
 src/index.ts                                     |  1 +
 .../chevron-button/chevron-button.component.html |  5 +++++
 .../chevron-button/chevron-button.component.scss |  7 +++++++
 .../chevron-button/chevron-button.component.ts   | 14 ++++++++++++++
 .../buttons/icon-button/icon-button.component.ts |  5 +++--
 src/lib/common-ui.module.ts                      | 16 +++++++++++++---
 src/lib/utils/decorators/required.decorator.ts   | 15 +++++++++++++++
 9 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/icons/arrow-down.svg
 create mode 100644 src/lib/buttons/chevron-button/chevron-button.component.html
 create mode 100644 src/lib/buttons/chevron-button/chevron-button.component.scss
 create mode 100644 src/lib/buttons/chevron-button/chevron-button.component.ts
 create mode 100644 src/lib/utils/decorators/required.decorator.ts

diff --git a/src/assets/icons/arrow-down.svg b/src/assets/icons/arrow-down.svg
new file mode 100644
index 0000000..2dc89f6
--- /dev/null
+++ b/src/assets/icons/arrow-down.svg
@@ -0,0 +1,13 @@
+<?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="Styleguide" stroke="none" stroke-width="1">
+        <g id="Styleguide-Buttons" transform="translate(-469.000000, -757.000000)">
+            <rect height="906" width="904" x="0" y="0"></rect>
+            <rect height="34" id="Rectangle" rx="17" width="134" x="359" y="747"></rect>
+            <g fill="currentColor" id="right" transform="translate(469.000000, 757.000000)">
+                <polygon id="Fill-1" points="7 9 10 5 4 5"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
index 2d6e7ea..a8d605c 100644
--- a/src/assets/styles/_buttons.scss
+++ b/src/assets/styles/_buttons.scss
@@ -56,7 +56,7 @@ $dark-bg-hover: #e2e4e9 !default;
 }
 
 iqser-icon-button,
-redaction-chevron-button,
+iqser-chevron-button,
 redaction-user-button,
 redaction-circle-button {
     position: relative;
@@ -96,7 +96,7 @@ redaction-circle-button {
     }
 }
 
-redaction-chevron-button,
+iqser-chevron-button,
 redaction-circle-button,
 iqser-icon-button {
     &[aria-expanded='true'] {
diff --git a/src/index.ts b/src/index.ts
index b2e3142..a611942 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,3 +2,4 @@ export * from './lib/common-ui.module';
 export * from './lib/buttons/icon-button/icon-button.component';
 export * from './lib/buttons/icon-button/icon-button-type.model';
 export * from './lib/base/auto-unsubscribe.component';
+export * from './lib/utils/decorators/required.decorator';
diff --git a/src/lib/buttons/chevron-button/chevron-button.component.html b/src/lib/buttons/chevron-button/chevron-button.component.html
new file mode 100644
index 0000000..efea7c1
--- /dev/null
+++ b/src/lib/buttons/chevron-button/chevron-button.component.html
@@ -0,0 +1,5 @@
+<button [class.overlay]="showDot" [class.primary]="primary" mat-button>
+    <span>{{ label }}</span>
+    <mat-icon class="chevron-icon" svgIcon="iqser:arrow-down"></mat-icon>
+</button>
+<div *ngIf="showDot" class="dot"></div>
diff --git a/src/lib/buttons/chevron-button/chevron-button.component.scss b/src/lib/buttons/chevron-button/chevron-button.component.scss
new file mode 100644
index 0000000..d92b062
--- /dev/null
+++ b/src/lib/buttons/chevron-button/chevron-button.component.scss
@@ -0,0 +1,7 @@
+button {
+    padding: 0 10px 0 14px;
+
+    mat-icon {
+        width: 14px;
+    }
+}
diff --git a/src/lib/buttons/chevron-button/chevron-button.component.ts b/src/lib/buttons/chevron-button/chevron-button.component.ts
new file mode 100644
index 0000000..590c901
--- /dev/null
+++ b/src/lib/buttons/chevron-button/chevron-button.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Required } from '../../utils/decorators/required.decorator';
+
+@Component({
+    selector: 'iqser-chevron-button',
+    templateUrl: './chevron-button.component.html',
+    styleUrls: ['./chevron-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChevronButtonComponent {
+    @Input() @Required() label!: string;
+    @Input() showDot = false;
+    @Input() primary = false;
+}
diff --git a/src/lib/buttons/icon-button/icon-button.component.ts b/src/lib/buttons/icon-button/icon-button.component.ts
index 7a3756b..994cb2a 100644
--- a/src/lib/buttons/icon-button/icon-button.component.ts
+++ b/src/lib/buttons/icon-button/icon-button.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { IconButtonType, IconButtonTypes } from './icon-button-type.model';
+import { Required } from '../../utils/decorators/required.decorator';
 
 @Component({
     selector: 'iqser-icon-button',
@@ -10,8 +11,8 @@ import { IconButtonType, IconButtonTypes } from './icon-button-type.model';
 export class IconButtonComponent {
     readonly iconButtonTypes = IconButtonTypes;
 
-    @Input() icon!: string;
-    @Input() label!: string;
+    @Input() @Required() label!: string;
+    @Input() icon?: string;
     @Input() showDot = false;
     @Input() disabled = false;
     @Input() type: IconButtonType = IconButtonTypes.default;
diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts
index b7ecde0..9df30f7 100644
--- a/src/lib/common-ui.module.ts
+++ b/src/lib/common-ui.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IconButtonComponent } from './buttons/icon-button/icon-button.component';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { ChevronButtonComponent } from './buttons/chevron-button/chevron-button.component';
+import { DomSanitizer } from '@angular/platform-browser';
 
-const buttons = [IconButtonComponent];
+const buttons = [IconButtonComponent, ChevronButtonComponent];
 
 const matModules = [MatIconModule, MatButtonModule];
 
@@ -13,4 +15,12 @@ const matModules = [MatIconModule, MatButtonModule];
     imports: [CommonModule, ...matModules],
     exports: [...buttons, ...matModules]
 })
-export class CommonUiModule {}
+export class CommonUiModule {
+    constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
+        const icons = ['arrow-down'];
+
+        for (const icon of icons) {
+            _iconRegistry.addSvgIconInNamespace('iqser', icon, _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`));
+        }
+    }
+}
diff --git a/src/lib/utils/decorators/required.decorator.ts b/src/lib/utils/decorators/required.decorator.ts
new file mode 100644
index 0000000..4f3bf4b
--- /dev/null
+++ b/src/lib/utils/decorators/required.decorator.ts
@@ -0,0 +1,15 @@
+export function Required(message?: string) {
+    return function (target: Object, propertyKey: PropertyKey) {
+        Object.defineProperty(target, propertyKey, {
+            get() {
+                throw new Error(message || `Attribute ${String(propertyKey)} is required`);
+            },
+            set(value) {
+                Object.defineProperty(this, propertyKey, {
+                    value,
+                    writable: true
+                });
+            }
+        });
+    };
+}