add chevron button component and required decorator

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>

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'] {

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';

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>

src/lib/buttons/chevron-button/chevron-button.component.scss

@@ -0,0 +1,7 @@
+button {
+    padding: 0 10px 0 14px;
+
+    mat-icon {
+        width: 14px;
+    }
+}

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;
+}

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() @Required() label!: string;
-    @Input() label!: string;
+    @Input() icon?: string;
     @Input() showDot = false;
     @Input() disabled = false;
     @Input() type: IconButtonType = IconButtonTypes.default;

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`));
+        }
+    }
+}

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
+                });
+            }
+        });
+    };
+}