@cityway/bo-ui 1.0.0 → 1.0.1

package/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/ng-package.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/bo-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@ng-bootstrap/ng-bootstrap",
+    "@ng-select/ng-select",
+    "bootstrap",
+    "@angular-slider/ngx-slider",
+    "ngx-toastr"
+  ],
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "src/lib/assets",
+      "output": "lib/assets"
+    }
+  ]
+}

package/package.json

@@ -1,32 +1,21 @@
-{
-  "name": "@cityway/bo-ui",
-  "version": "1.0.0",
-  "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0",
-    "@angular/forms": "^20.3.0",
-    "@angular/animations": "^20.3.0",
-    "@angular/cdk": "^20.3.0",
-    "@angular/platform-browser": "^20.3.0"
-  },
-  "dependencies": {
-    "@ng-bootstrap/ng-bootstrap": "19.0.1",
-    "@ng-select/ng-select": "20.0.1",
-    "bootstrap": "5.3.0",
-    "@angular-slider/ngx-slider": "20.0.0",
-    "ngx-toastr": "19.1.0",
-    "tslib": "^2.8.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/cityway-bo-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/cityway-bo-ui.mjs"
-    }
-  }
-}
+{
+  "name": "@cityway/bo-ui",
+  "version": "1.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/forms": "^20.3.0",
+    "@angular/animations": "^20.3.0",
+    "@angular/cdk": "^20.2.2",
+    "@angular/platform-browser": "^20.3.0"
+  },
+  "dependencies": {
+    "@ng-bootstrap/ng-bootstrap": "19.0.1",
+    "@ng-select/ng-select": "20.0.1",
+    "bootstrap": "5.3.0",
+    "@angular-slider/ngx-slider": "20.0.0",
+    "ngx-toastr": "19.1.0",
+    "tslib": "^2.8.0"
+  },
+  "sideEffects": false
+}

package/src/lib/bo-ui.config.ts

@@ -0,0 +1,8 @@
+export const BO_UI_VERSION = '1.0.0';
+export const INCLUDED_LIBS = {
+  'ng-bootstrap': '19.0.1',
+  'ng-select': '20.0.1',
+  'bootstrap': '5.3.0',
+  'ngx-slider': '20.0.0',
+  'ngx-toastr': '9.1.0'
+};

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

@@ -0,0 +1,16 @@
+<div ngbAccordion [closeOthers]="closeOthers" [destroyOnHide]="destroyOnHide">
+   @for (accordion of accordions.toArray(); track $index) {
+    <div ngbAccordionItem [disabled]="accordion.disabled" [collapsed]="accordion.collapsed">
+      <h2 ngbAccordionHeader>
+        <button ngbAccordionButton [attr.data-test-ctw]="'button-accordion-' + id + '-' + $index">
+          {{ accordion.title | translate }}
+        </button>
+      </h2>
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-container *ngTemplateOutlet="accordion.templateRef"></ng-container>
+        </div>
+      </div>
+    </div>
+  }
+</div>

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

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

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

@@ -0,0 +1,27 @@
+import { Component, ContentChildren, Input, QueryList } from '@angular/core';
+import { AccordionsContentComponent } from './components/accordions-content.component';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-accordions',
+  templateUrl: './accordions.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    NgbAccordionModule
+  ]
+})
+export class AccordionsComponent {
+
+  @Input() title?: string;
+  @Input() closeOthers = false;
+  @Input() id = 'classic';
+  @Input() destroyOnHide = true;
+  @ContentChildren(AccordionsContentComponent) accordions!: QueryList<AccordionsContentComponent>;
+
+  constructor() { }
+
+}

package/src/lib/components/accordions/components/accordions-content.component.spec.ts

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

package/src/lib/components/accordions/components/accordions-content.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-accordions-content',
+  template: '<ng-template #content><ng-content></ng-content></ng-template>',
+  standalone: true
+})
+export class AccordionsContentComponent {
+  @Input() title!: string;
+  @Input() disabled = false;
+  @Input() collapsed = true;
+
+  @ViewChild('content', { static: true }) templateRef!: TemplateRef<any>;
+
+  get fragment(): string {
+    return this.slugify(this.title);
+  }
+
+  private slugify(text: string): string {
+    return text
+      .toLowerCase()
+      .trim()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+}

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

@@ -0,0 +1,15 @@
+@if (isVisible) {
+  <div [class]="'alert alert-' + type + ' '+ cssClass" [ngClass]="{ 'alert-dismissible fade show': isDismissible }"
+    [attr.data-test-ctw]="dataTest ?? null">
+
+    @if (title) {
+      <div class="fw-bold">{{ title }}</div>
+    }
+
+    <ng-content></ng-content>
+
+    @if (isDismissible) {
+      <button type="button" class="btn-close" (click)="closeAlert()" [attr.aria-label]="'_COMMON._ACTION.CLOSE' | translate"></button>
+    }
+  </div>
+}

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

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

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

@@ -0,0 +1,36 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { UiTypeEnum } from '../../enum/ui-type.enum';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-alert',
+  templateUrl: './alert.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule
+  ]
+})
+export class AlertComponent implements OnInit {
+
+  @Input() type: UiTypeEnum;
+  @Input() title?: string;
+  @Input() isDismissible = false;
+  @Input() cssClass = '';
+  @Input() dataTest: string;
+
+  @Output() btnAction = new EventEmitter<string>();
+
+  public isVisible = true;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  public closeAlert() {
+    this.isVisible = false;
+  }
+
+}

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

@@ -0,0 +1,7 @@
+<div [class]="'badge badge-' + type + ' '+ cssClass" [attr.data-test-ctw]="dataTest ? dataTest : null">
+  @if (withIcon) {
+    <app-icon [icon]="withIcon" [label]="label"></app-icon>
+  } @else {
+    {{ label }}
+  }
+</div>

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

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

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

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { UiTypeEnum } from '../../enum/ui-type.enum';
+import { IconComponent } from '../icon/icon.component';
+
+@Component({
+  selector: 'app-badge',
+  templateUrl: './badge.component.html',
+  standalone: true,
+  imports: [IconComponent]
+})
+export class BadgeComponent implements OnInit {
+
+  @Input() type: UiTypeEnum;
+  @Input() label: string;
+  @Input() withIcon: string;
+  @Input() cssClass = '';
+  @Input() dataTest: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,43 @@
+@if (!isDropdown) {
+  <button type="button" class="btn"
+    [class]="'btn-' + type"
+    [ngClass]="{ 'btn-min-width': isMinWidth, 'btn-sm': small }"
+    [disabled]="isDisabled"
+    (click)="onBtnAction()"
+    [attr.data-test-ctw]="dataTest ?? null">
+
+    @if (isLoading) {
+      <span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
+      <span class="visually-hidden" role="status">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</span>
+    }
+
+    @if (withIcon) {
+      <app-icon [icon]="withIcon" [label]="label" [withOnlyIcon]="withOnlyIcon"></app-icon>
+    }
+    @else {
+      {{ label | translate }}
+    }
+  </button>
+}
+@else {
+  <div ngbDropdown class="d-inline-block">
+    <button class="btn"
+      [class]="'btn-' + type"
+      ngbDropdownToggle
+      type="button"
+      [ngClass]="{ 'btn-min-width': isMinWidth, 'spinner-border': isLoading }"
+      [disabled]="isDisabled"
+      [attr.data-test-ctw]="dataTest ?? null">
+
+      @if (withIcon) {
+        <app-icon class="me-2"></app-icon>
+      }
+
+      {{ label | translate }}
+    </button>
+
+    <ul ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
+      <ng-content></ng-content>
+    </ul>
+  </div>
+}

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

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

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

@@ -0,0 +1,47 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { UiTypeEnum } from '../../enum/ui-type.enum';
+import { IconComponent } from '../icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    NgbDropdownModule,
+    IconComponent
+  ]
+})
+export class ButtonComponent implements OnInit {
+
+  @Input() type: UiTypeEnum;
+  @Input() isDropdown = false;
+  @Input() withIcon: string;
+  @Input() withOnlyIcon = false;
+  @Input() isMinWidth = false;
+  @Input() isDisabled = false;
+  @Input() withSpinner = false;
+  @Input() label: string;
+  @Input() small = false;
+  @Input() dataTest: string;
+
+  @Output() btnAction = new EventEmitter<string>();
+  public isLoading = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  public onBtnAction() {
+    this.btnAction.emit();
+    if (this.withSpinner) {
+      this.isLoading = !this.isLoading;
+    }
+  }
+
+}

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

@@ -0,0 +1,15 @@
+<div class="card">
+  @if (title) {
+    <h2 class="card-header">{{ title }}</h2>
+  }
+
+  <div class="card-body">
+    <ng-content></ng-content>
+  </div>
+
+  @if (showFooter) {
+    <div class="card-footer" #cardFooter>
+      <ng-content select="[card-footer]"></ng-content>
+    </div>
+  }
+</div>

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

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

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

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, Input, OnInit,  AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+  standalone: true,
+  imports: [
+    CommonModule
+  ]
+})
+
+export class CardComponent implements OnInit, AfterViewInit {
+
+  @Input() title: string;
+  @ViewChild('cardFooter') cardFooter: ElementRef<any>;
+
+  public showFooter = true;
+
+  constructor(private cdRef: ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void  {
+    this.showFooter = this.cardFooter.nativeElement && this.cardFooter.nativeElement.children.length > 0;
+    this.cdRef.detectChanges();
+  }
+
+}

package/src/lib/components/custom-list/custom-list.component.html

@@ -0,0 +1,31 @@
+<div class="custom-card-light">
+  @for (group of customListData; track group.title) {
+    @if (group.title) {
+      <h3>{{ group.title | translate }}</h3>
+    }
+
+    <dl class="custom-description-list">
+      @for (field of group.fields; track field.label) {
+        @if (!field.hideIfEmpty || hasValue(field.value)) {
+          <dt [innerHTML]="'_LABEL.COLON' | translate: { label: (field.label | translate) }"></dt>
+          <dd>
+            @switch (field.type) {
+              @case ('date') {
+                {{ field.value | date: 'short' }}
+              }
+              @case ('boolean') {
+                {{ (field.value ? '_COMMON._PRO_SENTENCE.YES' : '_COMMON._PRO_SENTENCE.NO') | translate }}
+              }
+              @case ('html') {
+                <span [innerHTML]="field.value"></span>
+              }
+              @default {
+                {{ field.translateValue ? (field.value | translate) : field.value }}
+              }
+            }
+          </dd>
+        }
+      }
+    </dl>
+  }
+</div>

package/src/lib/components/custom-list/custom-list.component.spec.ts

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

package/src/lib/components/custom-list/custom-list.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DataCustomListGroup } from '../../models/ui/custom-list.model';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-custom-list',
+  templateUrl: './custom-list.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule
+  ]
+})
+
+export class CustomListComponent implements OnInit {
+
+  @Input() customListData: DataCustomListGroup[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  hasValue(value: any): boolean {
+    if (value === null || value === undefined) {
+      return false;
+    };
+    if (typeof value === 'string' && value.trim() === '') {
+      return false;
+    };
+    if (Array.isArray(value) && value.length === 0) {
+      return false;
+    };
+    if (typeof value === 'object' && Object.keys(value).length === 0) {
+      return false;
+    };
+
+    return true;
+  }
+
+}