Finish basic components

src/components/sq-tag/sq-tag.component.html

@@ -0,0 +1,14 @@
+<div
+  class='tag-box background-{{ backgroundColor }} {{ color }}'
+  [ngClass]="{
+    'readonly': readonly,
+    'disabled': disabled,
+  }"
+  [ngStyle]="{
+    'color': getColor(),
+    'background-color': getBackgroundColor(),
+  }"
+  (click)="handleClick()"
+>
+  <ng-content></ng-content>
+</div>

src/components/sq-tag/sq-tag.component.ts

@@ -0,0 +1,47 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { ColorsHelper } from '../../helpers/colors.helper'
+import { useMemo } from '../../helpers/memo.helper'
+
+@Component({
+  selector: 'sq-tag',
+  templateUrl: './sq-tag.component.html',
+  styleUrls: ['./sq-tag.component.scss']
+})
+export class SqTagsComponent {
+  @Input() customClass = ''
+  @Input() rounded = false
+  @Input() color = ''
+  @Input() backgroundColor = ''
+  @Input() readonly = false
+  @Input() disabled = false
+
+  @Output() emitClick: EventEmitter<void> = new EventEmitter<void>()
+
+  constructor(public colorsHelper: ColorsHelper) {
+  }
+
+  validatePresetColors() {
+    return !!this.colorsHelper?.getCssVariableValue(this.color)
+  }
+
+  getColor = useMemo(() => {
+    if (this.validatePresetColors()) {
+      return ''
+    }
+    return this.color
+  })
+
+  getBackgroundColor = useMemo(() => {
+    if (this.validatePresetColors()) {
+      return ''
+    }
+    return this.backgroundColor
+  })
+
+  handleClick() {
+    if (this.readonly || this.disabled) {
+      return
+    }
+    this.emitClick.emit()
+  }
+}

src/main.module.ts

@@ -15,6 +15,7 @@ import { SqOverlayComponent } from './components/sq-overlay/sq-overlay.component
 import { SqModalComponent } from './components/sq-modal/sq-modal.component'
 import { SqCollapseComponent } from './components/sq-accordion/sq-collapse/sq-collapse.component'
 import { SqPaginationComponent } from './components/sq-pagination/sq-pagination.component'
+import { SqTagsComponent } from './components/sq-tag/sq-tag.component'
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { SqPaginationComponent } from './components/sq-pagination/sq-pagination.
     SqOverlayComponent,
     SqModalComponent,
     SqCollapseComponent,
-    SqPaginationComponent
+    SqPaginationComponent,
+    SqTagsComponent
   ],
   imports: [
     CommonModule
@@ -52,7 +54,8 @@ import { SqPaginationComponent } from './components/sq-pagination/sq-pagination.
     SqOverlayComponent,
     SqModalComponent,
     SqCollapseComponent,
-    SqPaginationComponent
+    SqPaginationComponent,
+    SqTagsComponent
   ]
 })
 export class SquidCSSModule { }

src/public-api.ts

@@ -15,6 +15,7 @@ export * from './components/sq-modal/sq-modal.component'
 export * from './components/sq-accordion/sq-collapse/sq-collapse.component'
 export * from './components/sq-accordion/sq-accordion.component'
 export * from './components/sq-pagination/sq-pagination.component'
+export * from './components/sq-tag/sq-tag.component'
 
 export * from './directives/sq-tooltip/sq-tooltip.directive'