Radio Component

projects/ng-tw/src/modules/radio/radio-button-item.interface.ts

@@ -0,0 +1,4 @@
+export default interface RadioButtonItem {
+    name: string,
+    value: any
+}

projects/ng-tw/src/modules/radio/radio.component.html

@@ -0,0 +1,9 @@
+<fieldset class="mt-4">
+    <legend class="sr-only">{{label}}</legend>
+    <div class="space-y-4">
+        <div class="flex items-center" *ngFor="let item of items" (click)="change(item.value)">
+            <input type="radio" [value]="item.value" [checked]="item.value === value" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
+            <label for="email" class="ml-3 block text-sm font-medium leading-6 text-gray-900">{{item.name}}</label>
+        </div>
+    </div>
+</fieldset>

projects/ng-tw/src/modules/radio/radio.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RadioComponent } from './radio.component';
+
+describe('RadioComponent', () => {
+  let component: RadioComponent;
+  let fixture: ComponentFixture<RadioComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RadioComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RadioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ng-tw/src/modules/radio/radio.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import RadioButtonItem from './radio-button-item.interface';
+
+@Component({
+  selector: 'tw-radio',
+  templateUrl: './radio.component.html',
+  styleUrls: ['./radio.component.css'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => RadioComponent),
+    multi: true
+  }]
+})
+export class RadioComponent implements ControlValueAccessor {
+
+  @Input() label!: string;
+  @Input() items!: Array<RadioButtonItem>;
+
+  private _value!: string | number | boolean;
+
+  get value(): string | number | boolean {
+    return this._value;
+  }
+
+  set value(v: string | number | boolean) {
+    if (v !== this._value) {
+      this._value = v;
+      this.change(v);
+    }
+  }
+
+  onChange: Function = (value: boolean) => {};
+  onTouched: Function = () => {};
+
+  writeValue(value: string | number | boolean) {
+    if (value !== this._value) {
+      this._value = value;
+    }
+  }
+
+  registerOnChange(fn: Function): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: Function): void {
+    this.onTouched = fn;
+  }
+
+  change(value: string | number | boolean) {
+    console.log(value);
+    this._value = value;
+    this.onChange(value);
+    this.onTouched(value);
+  }
+}

projects/ng-tw/src/modules/radio/radio.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RadioComponent } from './radio.component';
+
+
+
+@NgModule({
+  declarations: [RadioComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [RadioComponent]
+})
+export class TwRadioModule { }

projects/ng-tw/src/public-api.ts

@@ -31,3 +31,7 @@ export * from './modules/dropdown/dropdown.component';
 export * from './modules/dropdown/dropdown.module';
 export * from './modules/dropdown/dropdown-config.interface';
 export * from './modules/dropdown/dropdown-config.service';
+
+export * from './modules/radio/radio-button-item.interface';
+export * from './modules/radio/radio.component';
+export * from './modules/radio/radio.module';

projects/sandbox/src/app/app.component.ts

@@ -70,6 +70,10 @@ export class AppComponent {
                     label: 'Select',
                     link: '/components/select',
                 },
+                {
+                    label: 'Radio',
+                    link: '/components/radio'
+                }
             ],
         },
     ];

projects/sandbox/src/app/routes/c-radio-route/c-radio-route.component.html

@@ -0,0 +1,95 @@
+<article class="prose max-w-none lg:px-8">
+    <h1 id="notification">
+        Radio
+    </h1>
+
+    <markdown [data]="markdownLoad"></markdown>
+
+    <h2>Demo</h2>
+    <h3 id="basic-usage">Basic usage</h3>
+
+    <div class="demo-container">
+
+        <div class="demo-row">
+            <div class="demo-row-title">Radio group</div>
+
+            <div class="demo-row-content">
+                <tw-radio label="Example Radio" [items]="radioOptions"></tw-radio>
+            </div>
+        </div>
+
+    </div>
+
+    <h3>Usage</h3>
+
+    <div class="markdown-with-tabs dark">
+        <div class="tabs-container bg-[#3C3D37] p-4 rounded-t flex space-x-4">
+            <button
+                tw-button
+                size="xs"
+                class="dark:disabled:text-gray-200 dark:hover:bg-gray-50 dark:hover:bg-opacity-10 dark:text-gray-50"
+                [ngClass]="{'dark:bg-gray-50 dark:bg-opacity-10': markdownUsageSegment === 'html'}"
+                (click)="markdownUsageSegment = 'html'"
+            >
+                page.html
+            </button>
+            <button
+                tw-button
+                size="xs"
+                class="dark:disabled:text-gray-200 dark:hover:bg-gray-50 dark:hover:bg-opacity-10 dark:text-gray-50"
+                [ngClass]="{'dark:bg-gray-50 dark:bg-opacity-10': markdownUsageSegment === 'ts'}"
+                (click)="markdownUsageSegment = 'ts'"
+            >
+                page.ts
+            </button>
+        </div>
+        <markdown
+            [data]="markdownUsageSegment === 'html' ? markdownUsageHTML : markdownUsageTS"
+            class="has-tabs"
+        ></markdown>
+    </div>
+</article>
+
+<div class="content-footer">
+    <div class="bottom-navigation-container">
+        <span [hidden]="bottomNavigation?.first !== null"></span>
+
+        <a
+            *ngIf="bottomNavigation?.first as first"
+            [routerLink]="[first.link]"
+            class="first"
+        >
+            <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                    clip-rule="evenodd"
+                ></path>
+            </svg>
+            <span class="truncate">{{first.label}}</span>
+        </a>
+
+        <span [hidden]="bottomNavigation?.last !== null"></span>
+
+        <a
+            *ngIf="bottomNavigation?.last as last"
+            [routerLink]="[last.link]"
+            class="last"
+        >
+            <span class="truncate">{{last.label}}</span>
+            <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                ></path>
+            </svg>
+        </a>
+    </div>
+</div>

projects/sandbox/src/app/routes/c-radio-route/c-radio-route.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CRadioRouteComponent } from './c-radio-route.component';
+
+describe('CNotificationRouteComponent', () => {
+  let component: CRadioRouteComponent;
+  let fixture: ComponentFixture<CRadioRouteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CRadioRouteComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CRadioRouteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/sandbox/src/app/routes/c-radio-route/c-radio-route.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { TwNotification, TwNotificationData, TwNotificationType } from 'ng-tw';
+
+@Component({
+    selector: 'app-c-notification-route',
+    templateUrl: './c-radio-route.component.html',
+    styleUrls: ['./c-radio-route.component.scss'],
+})
+export class CRadioRouteComponent implements OnInit {
+    public radioOptions: Array<any> = [
+        {
+            name: "Hello",
+            value: 1
+        },
+        {
+            name: "World",
+            value: 2
+        },
+        {
+            name: "!",
+            value: 3
+        }
+    ]
+
+    public bottomNavigation: any = {
+        first: {
+            label: 'Dropdown',
+            link: '/components/dropdown',
+        },
+        last: {
+            label: 'Progress Bar',
+            link: '/components/progress-bar',
+        },
+    };
+
+    public markdownLoad = `
+        \`\`\`typescript
+        import { TwRadioModule } from 'ng-tw';
+
+        @NgModule({
+            imports: [..., TwRadioModule],
+        });
+        \`\`\`
+    `;
+
+    public markdownUsageSegment: string = 'html';
+    public markdownUsageHTML = `
+        \`\`\`html
+        <tw-radio label="Example Radio" [items]="radioOptions"></tw-radio>
+        \`\`\`
+    `;
+
+    public markdownUsageTS = `
+        \`\`\`ts
+        public radioOptions: Array<any> = [
+            {
+                name: "Hello",
+                value: 1
+            },
+            {
+                name: "World",
+                value: 2
+            },
+            {
+                name: "!",
+                value: 3
+            }
+        ]
+        \`\`\`
+    `;
+
+    constructor(private readonly notification: TwNotification) {}
+
+    ngOnInit(): void {}
+}

projects/sandbox/src/app/routes/c-radio-route/c-radio-route.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CRadioSideRouteComponent } from '../c-radio-side-route/c-radio-side-route.component';
+import { CRadioRouteComponent } from './c-radio-route.component';
+import { Routes, RouterModule } from '@angular/router';
+import { MarkdownModule } from 'ngx-markdown';
+import { TwRadioModule } from 'ng-tw';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: CRadioRouteComponent,
+    },
+    {
+        path: '',
+        component: CRadioSideRouteComponent,
+        outlet: 'side',
+    },
+];
+
+@NgModule({
+    declarations: [CRadioSideRouteComponent, CRadioRouteComponent],
+    imports: [CommonModule, RouterModule.forChild(routes), MarkdownModule, TwRadioModule],
+})
+export class CRadioRouteModule {}

projects/sandbox/src/app/routes/c-radio-side-route/c-radio-side-route.component.html

@@ -0,0 +1,15 @@
+<nav class="side-navigation-container">
+    <p class="title">On this page</p>
+    <ul>
+        <li *ngFor="let item of navigation">
+            <a
+                [routerLink]="[item.link]"
+                [routerLinkActive]="'active'"
+                [routerLinkActiveOptions]="{ matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact' }"
+                [fragment]="item.fragment || null"
+            >
+                {{ item.label }}
+            </a>
+        </li>
+    </ul>
+</nav>