verben-authentication-ui 0.3.3 → 0.3.5

package/src/lib/components/sso/sso.component.html

@@ -1,208 +0,0 @@
-<div class="space-y-8">
-  <verben-data-view
-    #vdv
-    [viewState]="{
-        isSearch: true,
-        isColumn: true,
-        isFilter: true,
-        isSort: true,
-        isExport: true,
-        isSelect: true,
-        isToggle:true
-      }"
-    [buttonClass]="'my-custom-button-class'"
-    [iconClass]="'my-icon-class'"
-    [activeIconClass]="'my-active-icon-class'"
-    [selectedSortCount]="selectedSortCount"
-    [selectedColumnCount]="selectedColumnCount"
-    [selectedFilterTableCount]="selectedFilterTableCount"
-    [showColumnChild]="showColumn"
-    [showSortChild]="showSort"
-    [showFilterChild]="showFilter"
-    [isTableView]="false"
-    [selectedFilterTableCount]="0"
-    [cardIcon]="'list-view'"
-    [tableIcon]="'table-view'"
-    (viewChange)="onViewChange($event)"
-    (stateChange)="onStateChange($event)"
-  >
-    <div table-content>
-      <lib-data-table
-        [data]="data"
-        [columns]="filteredColumns"
-        [styleConfig]="styles"
-        (selectionChange)="onSelectionChange($event)"
-      >
-        <ng-container libColumn="createdAt">
-          <ng-template #cell let-value>
-            {{ value | date }}
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="logo">
-          <ng-template #cell let-value>
-            <img class="logo-width" [src]="value"/>
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="actions">
-          <ng-template #cell let-value let-deleteRow let-rowIndex>
-            <div class="flex space-x-8" style="display: flex; gap: 24px">
-              <verben-svg
-                (click)="openDetailView(value)"
-                icon="edit"
-                [width]="15"
-                [height]="15"
-                stroke="#3479E9"
-                fill="white"
-                class="cursor-pointer"
-              ></verben-svg>
-              <verben-svg
-                icon="delete"
-                [width]="15"
-                [height]="15"
-                stroke="#E20000"
-                (click)="deleteRow()"
-                class="cursor-pointer"
-              ></verben-svg>
-            </div>
-          </ng-template>
-          <ng-template #header>
-            <strong>Actions</strong>
-          </ng-template>
-        </ng-container>
-      </lib-data-table>
-    </div>
-    <div card-content>
-      <verben-card-data-view
-        borderRadius="12px"
-        (loadMoreClick)="loadMore()"
-        #vdcv
-        dataId="Link"
-        border="5px"
-        [cardDataList]="cardData"
-        rbgColor="#f5f6f9"
-      >
-        <verben-left-card-data-view class="">
-          <verben-left-card-data
-            #vlcd
-            [parent]="vdcv"
-            dataId="Link"
-            class="bg-secondary-100 rounded-xl border-primary border-[1px]"
-            [cardDataList]="cardData"
-          >
-            <ng-template #card let-item>
-              <div (click)="currentData = vdcv.onItemClick(item)" class="flex">
-                <verben-svg
-                  [width]="15"
-                  [height]="15"
-                  (click)="vlcd.showChildren(item)"
-                  [ngClass]="vlcd.showToggle(item) ? 'visible' : 'invisible'"
-                  class="items-center flex pr-1 cursor-pointer"
-                  [icon]="item.isChildrenExpanded ? 'minus' : 'plus'"
-                />
-                <div
-                  (click)="currentData = vdcv.onItemClick(item)"
-                  class="flex cursor-pointer w-full bg-secondary rounded-xl"
-                >
-                  <div
-                    class="w-3 rounded-xl rounded-tr-none rounded-br-none"
-                    [ngClass]="
-                      item.selected ? 'bg-primary' : 'bg-secondary-200'
-                    "
-                  ></div>
-                  <div class="flex flex-col py-2 px-4 w-full">
-                    <div class="flex">
-                      <span class="font-bold text-sm">{{ item.data.Name }}</span>
-                    </div>
-                    @for (ciItem of item.body; track ciItem.value) {
-                    <div class="flex items-center justify-between gap-2">
-                      <div>
-                        <span class="text-muted font-light text-xs"
-                          >{{ ciItem.title }}:</span
-                        >
-                        <span class="text-black text-xs font-semibold">{{ item.data.Description }}</span>
-                      </div>
-                      <img class="logo-width" [alt]="ciItem.title" [src]="item.data.Logo"/>
-                    </div>
-                    }
-                  </div>
-                </div>
-              </div>
-            </ng-template>
-          </verben-left-card-data>
-        </verben-left-card-data-view>
-
-        <verben-right-card-data-view>
-          <ng-template #parent>
-            <lib-sso-form
-              [currentData]="currentData"
-              (switchView)="vdv.toggleView()"
-            ></lib-sso-form>
-          </ng-template>
-        </verben-right-card-data-view>
-
-        <verben-card-data-view-footer class="float-right">
-          <div class="flex gap-2 mt-1">
-            <span class="paginator-text"
-              >{{ cardData.length }} records loaded</span
-            >
-            <button (click)="loadMore()" class="load-more">Load more</button>
-          </div>
-        </verben-card-data-view-footer>
-      </verben-card-data-view>
-    </div>
-    <div column-content>
-      <verben-visible-column
-        (columnsUpdated)="onColumnsUpdated($event)"
-        [border]="'1px solid rgba(212, 160, 7, 1)'"
-        borderRadius="10px"
-        boxShadow="2px 2px 2px 0px silver"
-        bgColor="white"
-        width="400px"
-        textColor="black"
-        pd="1rem"
-        primaryColor="#FFE681"
-        secondaryColor="#3479E9"
-        [columns]="visibleColumns"
-        [displayedColumns]="5"
-      ></verben-visible-column>
-    </div>
-    <div filter-content>
-      <verben-table-filter
-      (filtersApplied)="onFilterApplied($event)"
-        [border]="'1px solid rgba(212, 160, 7, 1)'"
-        borderRadius="10px"
-        boxShadow="2px 2px 2px 0px silver"
-        bgColor="white"
-        width="420px"
-        textColor="black"
-        pd="1rem"
-        primaryColor="#FFE681"
-        secondaryColor="#3479E9"
-        tertiaryColor="#404040"
-        [filterOptions]="filterArray"
-        [maxFilterLength]="3"
-      ></verben-table-filter>
-    </div>
-    <div sort-content>
-      <verben-sort-table
-        (selectedOptions)="onSortUpdated($event)"
-        [border]="'1px solid rgba(212, 160, 7, 1)'"
-        borderRadius="10px"
-        boxShadow="2px 2px 2px 0px silver"
-        bgColor="white"
-        width="400px"
-        textColor="black"
-        pd="1rem"
-        primaryColor="#FFE681"
-        secondaryColor="#3479E9"
-        tertiaryColor="#404040"
-        [enableDragAndDrop]="true"
-        [sortOptions]="sortOptions"
-      ></verben-sort-table>
-    </div>
-    <div export-content>
-      <lib-data-export [data]="data" (exportDataEvent)="handleExport($event)">
-      </lib-data-export>
-    </div>
-  </verben-data-view>
-</div>

package/src/lib/components/sso/sso.component.spec.ts

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

package/src/lib/components/sso/sso.component.ts

@@ -1,261 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { columns } from './sso.columns';
-import { mockData } from './helper';
-import { baseStyle } from './base-table-style';
-import {
-  CardData,
-  CardDataViewComponent,
-  ColumnDefinition,
-  DataFilterType,
-  DataViewComponent,
-  IDataFilter,
-} from 'verben-ng-ui';
-import { SingleSignOn } from '../../models/single-sign-on';
-
-
-
-@Component({
-  selector: 'lib-sso',
-  templateUrl: './sso.component.html',
-  styleUrl: './sso.component.css',
-})
-export class SsoComponent {
-  @ViewChild('vdcv') cardDataView!: CardDataViewComponent;
-  @ViewChild('vdv') dataView!: DataViewComponent;
-
-  columns = columns;
-  data = mockData;
-  filteredColumns: ColumnDefinition<SingleSignOn>[] =columns
-  styles = baseStyle;
-  currentData: CardData | null = null;
-  isGridView = true;
-  selected: CardData | null = null;
-
-  cardData: CardData[] = mockData.map(({ Name, Description, Link,Logo }) => ({
-    selected: false,
-    title: Name,
-    data: { Name, Description,Link,Logo } as Partial<SingleSignOn>,
-    body: [
-      { title: 'Description', value:Description??''  },
-    ],
-    children: [],
-  }));
-
-  openDetailView(name: string) {
-    const cardItem = this.getCardDataByMailAddress(name);
-    if (cardItem && this.cardDataView) {
-      this.dataView.toggleView();
-      this.cardData.forEach((item) => {
-        item.selected = false;
-        if (item.children) {
-          item.children.forEach((child) => (child.selected = false));
-        }
-      });
-
-      cardItem.selected = true;
-      this.currentData = this.cardDataView.onItemClick(cardItem);
-    }
-  }
-
-  getCardDataByMailAddress(name: string): CardData | undefined {
-    return this.cardData.find(({ data }) => data.Name === name);
-  }
-
-  onViewChange(isGridView: boolean): void {
-  isGridView=isGridView
-    
-    if (this.currentData) {
-      this.cardDataView?.clearData();
-      this.currentData = null;
-    }
-
-    if (this.selected) {
-      this.cardDataView.onItemClick(this.selected);
-    }
-  }
-
-  openFormView(index: number) {
-    const item = this.cardData[index];
-    console.log('ITEM = ', item);
-  }
-
-  handleExport(exportedData: Partial<any>[]) {
-    console.log('Exported data:', exportedData);
-    this.downloadCSV(exportedData);
-  }
-
-  /**
-   *
-   * @param data Simple csv export for testing
-   */
-  private downloadCSV(data: Partial<any>[]) {
-    const headers = Object.keys(data[0]);
-    const csvContent = [
-      headers.join(','),
-      ...data.map((row) => headers.map((header) => row[header]).join(',')),
-    ].join('\n');
-
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-    const link = document.createElement('a');
-    if (link.download !== undefined) {
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', 'export.csv');
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    }
-  }
-
-  onSelectionChange(selectedRows:SingleSignOn[]) {
-    console.log('Selection changed:', selectedRows);
-    // Handle the selection change
-  }
-
-  /**
-   * Copied over from card view doc until I understand usage
-   */
-  selectedColumnCount: number = 0;
-  selectedFilterTableCount: number = 0;
-  isOPen: boolean = true;
-  selectedSortCount: number = 0;
-  showColumn: boolean = false;
-  showSort: boolean = false;
-  showExport: boolean = false;
-  selectedAll: boolean = false;
-  showFilter: boolean = false;
-  visibleColumns: IDataFilter[] = columns.map((col) => ({
-    checked: false,
-    name: typeof col.header === 'string' ? col.header : col.id,
-    type: DataFilterType.Bool,
-  }));
-  filterArray: IDataFilter[] = [
-    {
-      name: 'Name',
-      type: DataFilterType.String,
-      checked: false,
-    },
-    {
-      name: 'Description',
-      type: DataFilterType.String,
-      checked: false,
-    },
-    {
-      name: 'Logo',
-      type: DataFilterType.String,
-      checked: false,
-    },
-    {
-      name: 'Link',
-      type: DataFilterType.String,
-      checked: false,
-    },
-    {
-      name: 'CreatedAt',
-      type: DataFilterType.Date,
-      checked: false,
-    },
-  ];
-  sortOptions: IDataFilter[] = [
-    {
-      name: 'Name',
-      type: DataFilterType.String,
-      checked: false,
-    },
-    {
-      name: 'Description',
-      type: DataFilterType.String,
-      checked: false,
-    },
-    {
-      name: 'Link',
-      type: DataFilterType.String,
-      checked: false,
-    },
-    {
-      name: 'Logo',
-      type: DataFilterType.String,
-      checked: false,
-    },
-    {
-      name: 'CreatedAt',
-      type: DataFilterType.Date,
-      checked: false,
-    },
-  ];
-  clearData() {
-    this.currentData = {} as CardData;
-  }
-  loadMore() {
-    this.cardData = this.cardData.concat(this.cardData);
-  }
-  onColumnChange(event: boolean) {
-    this.showColumn = event;
-  }
-  onSortChange(event: boolean) {
-    this.showSort = false
-    console.log(event);
-  }
-
-  
-  onColumnsUpdated(updatedColumns: IDataFilter[]) {
-    this.showColumn = false;
-    this.selectedColumnCount = updatedColumns.length;
-  
-    if (updatedColumns) {
-      // Filter columns to include only visible ones
-      this.filteredColumns = this.columns.filter((col) =>
-        this.visibleColumns.find(
-          (filter) => filter.name === col.header && filter.checked
-        )
-      );
-  
-      // Reorder columns based on the order in visibleColumns
-      const visibleColumnOrder = this.visibleColumns
-        .filter((filter) => filter.checked)
-        .map((filter) => filter.name);
-  
-      this.columns.sort((a, b) => {
-        const indexA = visibleColumnOrder.indexOf(a.header as string);
-        const indexB = visibleColumnOrder.indexOf(b.header as string);
-        return indexA - indexB;
-      });
-    }
-  }
-  
-  onFilterApplied(appliedFilter: IDataFilter[]) {
-     this.showFilter=false
-    if (Array.isArray(appliedFilter)) {
-      this.selectedFilterTableCount = appliedFilter.length;
-    } else {
-      console.log('appliedFilter is not an array');
-    }
-  }
-  
-  onSortUpdated(updatedSorts: IDataFilter[]) {
-    this.onSortChange(false);
-    this.selectedSortCount = updatedSorts.length;
-    console.log(updatedSorts);
-    
-  }
-
-  onStateChange(event: { key: string; value: boolean }): void {
-    switch (event.key) {
-      case 'column':
-        this.showColumn=event.value
-        break;
-        case 'sort':
-          this.showSort=event.value
-          break;
-          case 'export':
-            this.showExport=event.value
-            break;
-            case 'filter':
-              this.showFilter=event.value
-              break;
-      default:
-        break;
-    }
-  }
-}

package/src/lib/components/sso/sso.module.ts

@@ -1,40 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
-import {
-  DataViewModule,
-  TableFilterModule,
-  SortTableModule,
-  DataExportModule,
-  VisibleColumnModule,
-  VerbenaButtonModule,
-  CardDataViewModule,
-  SvgModule,
-  VerbenaInputModule,
-  DataTableModule,
-  VerbenaTextareaModule,
-} from 'verben-ng-ui';
-import { SsoComponent } from './sso.component';
-import { SsoFormComponent } from './sso-form/sso-form.component';
-@NgModule({
-  declarations: [SsoComponent,SsoFormComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    DataViewModule,
-    TableFilterModule,
-    SortTableModule,
-    DataExportModule,
-    VisibleColumnModule,
-    VerbenaButtonModule,
-    CardDataViewModule,
-    VerbenaInputModule,
-    SvgModule,
-    VerbenaTextareaModule,
-    DataTableModule,
-  ],
-  exports: [SsoComponent],
-})
-export class SsoModule {}

package/src/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.css

@@ -1,8 +0,0 @@
-.otpWrapper{
-    margin-bottom: 20px;
-    margin-top: 15px;
-}
-.resendWrapper{ 
-    margin-top: 10px;
-    margin-bottom: 0px !important;
-}

package/src/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.html

@@ -1,30 +0,0 @@
-<section
-[ngStyle]="styles"
-class="{{ customClass }}"
->
-  <h3 class="{{headlingClass}}">{{headlingText}}</h3>
-  <div class="otpWrapper"> 
-    <p class="{{paragraphClass}}">Enter the {{length}} digit code sent to you</p>
-    <verben-otp-input 
-    [length]="length" 
-    (otpChange)="onOtpChange($event)"
-    [otpClass]="otpClass"
-    ></verben-otp-input>
-  </div>
-  <lib-button  
-  [buttonClass]="btnClass"
-  [color]="btnColor"
-  [border]="btnBorder"
-  [borderRadius]="btnBorderRadius"
-  [bgColor]="btnBgColor"
-  [pd]="btnPd"
-  [text]="btnText"  
-  (buttonClick)="submitData()"
-  [disabled]="!otpForm.valid"
-  ></lib-button>
-  <p class="resendWrapper">
-    Didn’t get a code?
-    <a class="{{resendClass}}" (click)="resendOtp()">Resend</a>
-  </p>
-   
-</section>

package/src/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.spec.ts

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