add sq selector

docs/src/app/app.component.html

@@ -4,17 +4,22 @@
 <br/>
 <sq-loader></sq-loader>
 <br/>
-<sq-select
-  [id]="'teste'"
-  [name]="'teste'"
-  [label]="'teste'"
-  [placeholder]="'teste'"
-  [value]="title"
-  [required]="true"
-  [options]="[{value: 'teste', label: 'teste'}, {value: 'teste2', label: 'teste2'}]"
-  (sharedValue)="title = $event"
-></sq-select>
 {{ title }}
+<sq-selector
+  [id]="'teste-1'"
+  [name]="'teste-1'"
+  label="teste"
+  type="radio"
+></sq-selector>
+<sq-selector
+  [id]="'teste-2'"
+  [name]="'teste-1'"
+  label="teste"
+  type="radio"
+  [toggle]="true"
+>
+<ng-template let-checked="checked" let-value="value" #leftLabel> Label </ng-template>
+</sq-selector>
 <!-- <sq-progress-bar
   color='pink'
   [value]='100'

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

@@ -0,0 +1,60 @@
+<div
+  class="wrapper-selectors"
+  [ngClass]="{
+    toggle: toggle,
+    checked: thisChecked,
+    indeterminate: !thisChecked ? thisIndeterminate : false,
+    error: error
+  }"
+>
+  <label [for]="id" *ngIf="leftLabel">
+    <ng-container
+      [ngTemplateOutlet]="leftLabel"
+      [ngTemplateOutletContext]="{
+        checked: thisChecked,
+        value: value
+      }"
+    ></ng-container>
+  </label>
+  <input
+    [id]="id"
+    [name]="name"
+    [attr.type]="type"
+    (change)="change($event)"
+    [disabled]="disabled"
+    [readonly]="readonly"
+    [required]="required"
+    [checked]="thisChecked"
+    [indeterminate]="!(checked || thisChecked) ? indeterminate || thisIndeterminate : false"
+    #input
+  />
+  <label
+    [for]="id"
+    [ngClass]="{
+      disabled: disabled,
+      'hide-input': hideInput
+    }"
+    class="checkbox {{ type }}"
+  ></label>
+  <label [for]="id" *ngIf="label" [innerHtml]="label | universalSafe:'html'"></label>
+  <label [for]="id" *ngIf="rightLabel">
+    <ng-container
+      [ngTemplateOutlet]="rightLabel"
+      [ngTemplateOutletContext]="{
+        checked: thisChecked,
+        indeterminate: !thisChecked ? thisIndeterminate : false,
+        value: value
+      }"
+    ></ng-container>
+  </label>
+</div>
+<div
+  class="box-validation box-invalid show"
+  *ngIf="errorSpan"
+>
+  <ng-container *ngIf="externalError || error">
+    <i class="fa-solid fa-triangle-exclamation"></i>
+  </ng-container>
+  {{ externalError ? externalError : '' }}
+  {{ error && !externalError ? error : '' }}
+</div>

src/components/sq-selector/sq-selector.component.md

@@ -0,0 +1,92 @@
+# Checkbox-Squid
+
+> Checkbox
+
+## Inputs/Props
+
+1. name
+
+- description: Set the name attribute HTML
+- type: `string`
+
+2. type (optional)
+
+- description: Set the type of checkbox
+- type: `( 'checkbox' | 'style' | 'tag' )`
+
+3. checked (optional)
+
+- description: Set the checked attribute HTML
+- type: `boolean`
+
+4. label
+
+- description: Set the label
+- type: `string`
+
+5. id
+
+- description: Set the id attribute HTML
+- type: `string`
+
+6. value (optional)
+
+- description: Set the value attribute HTML
+- type: `string`
+
+7. disabled (optional)
+
+- description: Set the disabled attribute HTML
+- type: `string`
+
+8. readonly (optional)
+
+- description: Set the readonly attribute HTML
+- type: `string`
+
+9. required (optional)
+
+- description: Set the required attribute HTML
+- type: `string`
+
+10. colorText (optional)
+
+- description: Set the text inside de the box of input
+- type: `string`
+- default: `white`
+
+11. colorBackground (optional)
+
+- description: Set the background box color
+- type: `string`
+- default: `green`
+
+12. hideInput
+
+- description: Hide box input
+- type: `boolean`
+- default: `false`
+
+13. block
+
+- description: Block element to width 100%
+- type: `boolean`
+- default: `false`
+
+## Outputs
+
+1. sharedValue (optional)
+
+- description: Function that passes the value to where the component is called (like one-way data-binding)
+- type: `EventEmitter<{
+  value: `string`,
+  checked: `boolean`
+}>`
+
+## Example
+
+```html
+<checkbox-squid [id]='"your-id"' [name]='"your-name"'>
+  <ng-template let-checked="checked" let-value="value" #rightLabel> Label </ng-template>
+</checkbox-squid>
+```

src/components/sq-selector/sq-selector.component.scss

@@ -0,0 +1,6 @@
+
+.wrapper-selectors {
+  .hide-input {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,95 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+
+@Component({
+  selector: 'sq-selector',
+  templateUrl: './sq-selector.component.html',
+  styleUrls: ['./sq-selector.component.scss'],
+})
+export class SqSelectorComponent implements AfterContentInit, OnChanges {
+  @Input() name = ''
+  @Input() type: 'checkbox' | 'radio' = 'checkbox'
+  @Input() id = ''
+  @Input() value?: any
+  @Input() checked = false
+  @Input() indeterminate = false
+  @Input() disabled?: boolean
+  @Input() readonly?: boolean
+  @Input() required?: boolean
+  @Input() colorText = ''
+  @Input() colorBackground = 'green'
+  @Input() hideInput = false
+  @Input() toggle = false
+  @Input() externalError = ''
+  @Input() useFormErrors = true
+  @Input() label = ''
+  @Input() errorSpan = true
+
+  @Output() sharedValue: EventEmitter<any> = new EventEmitter()
+
+  @ContentChild('rightLabel', { static: true })
+  rightLabel: TemplateRef<HTMLElement> | null = null
+  @ContentChild('leftLabel', { static: true })
+  leftLabel: TemplateRef<HTMLElement> | null = null
+
+  thisChecked = false
+  thisIndeterminate = false
+  error = ''
+
+  constructor(
+    @Optional() public translate: TranslateService
+  ) { }
+
+  ngAfterContentInit(): void {
+    this.thisChecked = this.checked
+  }
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if (changes.hasOwnProperty('checked')) {
+      this.thisChecked = this.checked
+    }
+    if (changes.hasOwnProperty('indeterminate')) {
+      this.thisIndeterminate = this.indeterminate
+    }
+  }
+
+  async validate() {
+    if (this.externalError) {
+      this.error = ''
+    } else if (this.required && !this.value && this.useFormErrors && this.translate) {
+      this.error = this.translate.instant('formErrors.required')
+    } else {
+      this.error = ''
+    }
+  }
+
+  change(event: any): void {
+    if (!this.readonly && !this.disabled) {
+      if (event.target.checked) {
+        this.sharedValue.emit({
+          value: this.value,
+          checked: true,
+        })
+        this.thisChecked = true
+      } else {
+        this.sharedValue.emit({
+          value: this.value,
+          checked: false,
+        })
+        this.thisChecked = false
+      }
+    }
+    this.validate()
+  }
+}

src/main.module.ts

@@ -20,6 +20,7 @@ import { SqAccordionComponent } from './components/sq-accordion/sq-accordion.com
 import { SqTextAreaComponent } from './components/sq-textarea/sq-textarea.component'
 import { FormsModule } from '@angular/forms'
 import { SqSelectComponent } from './components/sq-select/sq-select.component'
+import { SqSelectorComponent } from './components/sq-selector/sq-selector.component'
 
 @NgModule({
   declarations: [
@@ -41,7 +42,8 @@ import { SqSelectComponent } from './components/sq-select/sq-select.component'
     SqTagsComponent,
     SqAccordionComponent,
     SqTextAreaComponent,
-    SqSelectComponent
+    SqSelectComponent,
+    SqSelectorComponent
   ],
   imports: [
     CommonModule,
@@ -66,7 +68,8 @@ import { SqSelectComponent } from './components/sq-select/sq-select.component'
     SqTagsComponent,
     SqAccordionComponent,
     SqTextAreaComponent,
-    SqSelectComponent
+    SqSelectComponent,
+    SqSelectorComponent
   ]
 })
 export class SquidCSSModule { }

src/package.json

@@ -5,8 +5,8 @@
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",
     "@angular/router": ">=15.0.0",
+    "@angular/forms": ">=15.0.0",
     "lodash.isequal": ">=4.0.0",
-    "@ngx-translate/core": ">=14.0.0",
     "@squidit/css": "latest"
   },
   "dependencies": {

src/public-api.ts

@@ -19,6 +19,7 @@ export * from './components/sq-tag/sq-tag.component'
 
 export * from './components/sq-textarea/sq-textarea.component'
 export * from './components/sq-select/sq-select.component'
+export * from './components/sq-selector/sq-selector.component'
 
 export * from './directives/sq-tooltip/sq-tooltip.directive'