@updevs/components 1.0.0-alpha.8 → 1.0.0-alpha.9

package/form-controls/radio/src/radio.component.html

@@ -0,0 +1,35 @@
+<label class="form-check" [class.form-check-inline]="isInline">
+    @if (!!hintText || !!hintTemplate()) {
+        <div class="row g-2">
+            <div class="col-auto">
+                <ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
+            </div>
+            <div class="col-auto align-self-center">
+                <span class="form-help" [updPopover]="hintText" [updPopoverTemplate]="hintTemplate()"
+                    [updPopoverActAsTooltip]="hintAsTooltip()">
+                    ?
+                </span>
+            </div>
+        </div>
+    } @else {
+        <ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
+    }
+</label>
+
+<ng-template #contentTpl>
+    <input type="radio" (change)="selected.emit()" [disabled]="isDisabled" [ngClass]="classes" [value]="value" [attr.name]="name"
+        [attr.readonly]="isDisabled ? '' : undefined" [checked]="isChecked">
+
+    @if (!!labelText) {
+        <span class="form-check-label">{{ labelText }}</span>
+    }
+
+    @if (!!descriptionText) {
+        <span class="form-check-description">{{ descriptionText }}</span>
+    }
+
+    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {
+        <div class="invalid-feedback">{{ validationStatusTexts }}</div>
+    }
+</ng-template>
+

package/form-controls/radio/src/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();
+  });
+});

package/form-controls/radio/src/radio.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, OnChanges, Input, HostBinding, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
+import { BaseControl } from '@updevs/components/form-controls/abstractions';
+
+@Component({
+    selector: 'upd-radio',
+    templateUrl: './radio.component.html',
+    styleUrls: ['./radio.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class RadioComponent extends BaseControl implements OnInit, OnChanges {
+    @HostBinding('class') @Input() wrapperClasses = '';
+
+    @Input() value?: any;
+    @Input() customClasses?: string;
+    @Input() name?: string;
+    @Input() isDisabled = false;
+    @Input() isChecked = false;
+    @Input() isInline = false;
+
+    @Output() readonly selected = new EventEmitter<void>();
+
+    classes: string[] = [];
+
+    ngOnInit(): void {
+        this.updateClasses();
+    }
+
+    ngOnChanges(): void {
+        this.updateClasses();
+    }
+
+    private updateClasses(): void {
+        const lClasses: string[] = ['form-check-input'];
+
+        if (!!this.validationStatus()) {
+            const statusCls = `is-${this.validationStatus()}`;
+            lClasses.push(statusCls);
+        }
+
+        this.classes = [...lClasses, ...(this.customClasses || '').split(' ')];
+    }
+}

package/form-controls/radio/src/upd-radio.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdPopoverModule } from '@updevs/components/popover';
+
+import { RadioComponent } from './radio.component';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        UpdPopoverModule,
+        ReactiveFormsModule
+    ],
+    declarations: [
+        RadioComponent
+    ],
+    exports: [
+        RadioComponent
+    ]
+})
+export class UpdRadioModule {}

package/form-controls/select/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

package/form-controls/select/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form-controls/select/src/components/multiple/select-multiple.component.html

@@ -0,0 +1,61 @@
+@if (!!labelText) {
+    @if (!!hintText || !!hintTemplate()) {
+        <div class="row g-2">
+            <div class="col-auto">
+                <label [ngClass]="labelSizeClasses">{{ labelText }}</label>
+            </div>
+            <div class="col-auto">
+                <span class="form-help" [updPopover]="hintText" [updPopoverTemplate]="hintTemplate()"
+                    [updPopoverActAsTooltip]="hintAsTooltip()">
+                    ?
+                </span>
+            </div>
+        </div>
+    } @else {
+        <label [ngClass]="labelSizeClasses">{{ labelText }}</label>
+    }
+}
+
+<div class="dropdown" [attr.id]="name()">
+    <div #componentBox class="input-group input-group-flat">
+        <div class="form-control" [class.remove-bottom-radius]="isDropdownOpen" [class.disabled]="isDisabled()"
+            [class.pe-none]="isDisabled()" [attr.disabled]="isDisabled() ? 'disabled' : undefined" (click)="openDropdown()">
+            @for (sel of currentSelection; track sel) {
+                <span class="badge bg-primary select-multiple-value">{{ sel.text }}
+                    <upd-button [isIcon]="true" [shouldIgnoreBtnClass]="true" (clicked)="onRemoveItem(sel)">
+                        <upd-icon tablerIcon="x"></upd-icon>
+                    </upd-button></span>&nbsp;
+            }
+        </div>
+        <div class="input-group-text" [class.remove-bottom-radius]="isDropdownOpen">
+            @if (currentSelection.length > 0) {
+                <upd-button [shouldIgnoreBtnClass]="true" [isDisabled]="isDisabled()" (clicked)="clearSelection()"
+                    customClasses="link-secondary">
+                    <upd-icon tablerIcon="x"></upd-icon>
+                </upd-button>
+            }
+            @if (!isLoading) {
+                <upd-button [shouldIgnoreBtnClass]="true" [isDisabled]="isDisabled()" (clicked)="openDropdown()"
+                    customClasses="link-secondary ms-2">
+                    <upd-icon tablerIcon="chevron-down"></upd-icon>
+                </upd-button>
+            } @else {
+                <div class="select-loader-wrapper">
+                    <div class="spinner-border spinner-border-sm text-muted select-loader" role="status"></div>
+                </div>
+            }
+        </div>
+    </div>
+    <div #searchBox>
+        <div #searchBoxChild [style.visibility]="isDropdownOpen ? 'visible' : 'hidden'" class="select-search-box">
+            <upd-input [placeholder]="placeholder()" [isInputGroupFlat]="true" (valueChange)="search($event)">
+                <ng-template updInputPrepend>
+                    <upd-icon tablerIcon="search"></upd-icon>
+                </ng-template>
+            </upd-input>
+        </div>
+    </div>
+    <upd-list #list [items]="listItems" [maxHeight]="dropdownMaxHeight() + 'px'" (selectedItem)="onSelectItem($event)"
+        [wrapperClasses]="dropdownClasses" [isVisible]="isDropdownOpen" [shouldOverflow]="true" [shouldDisplayItemsCounter]="true">
+    </upd-list>
+</div>

package/form-controls/select/src/components/multiple/select-multiple.component.scss

@@ -0,0 +1,6 @@
+@import "../shared";
+
+.select-multiple-value {
+    display: inline-flex;
+    align-items: center;
+}

package/form-controls/select/src/components/multiple/select-multiple.component.spec.ts

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

package/form-controls/select/src/components/multiple/select-multiple.component.ts

@@ -0,0 +1,80 @@
+import { Component, ViewEncapsulation, EventEmitter, Output } from '@angular/core';
+import { ListItem } from '@updevs/components/list';
+
+import { BaseSelectComponent } from '../../models/abstractions/base-select.component';
+import { SelectItem } from '../../models/select-item';
+
+@Component({
+    selector: 'upd-select-multiple',
+    templateUrl: './select-multiple.component.html',
+    styleUrls: ['./select-multiple.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class SelectMultipleComponent extends BaseSelectComponent {
+    /**
+     * Returns the selected items.
+     * Triggered when items are selected.
+     */
+    @Output() readonly selectedItems = new EventEmitter<SelectItem[]>();
+    /**
+     * Returns the selected Ids.
+     * Triggered when items are selected.
+     */
+    @Output() readonly selectedIds = new EventEmitter<any[]>();
+
+    currentSelection: SelectItem[] = [];
+
+    constructor() {
+        super();
+    }
+
+    clearSelection(): void {
+        this.currentSelection = [];
+        this._currentTerm = undefined;
+
+        this.updateActiveItemsOnList();
+    }
+
+    onSelectItem(item: ListItem): void {
+        const selectedItem = this.currentSelection.find(cs => cs.value === item.id);
+
+        if (!!selectedItem) {
+            this.onRemoveItem(selectedItem);
+            return;
+        }
+
+        for (const localBackupItem of this._localBackupItems) {
+            if ((localBackupItem.children?.length || 0) > 0) {
+                const child = localBackupItem.children?.find(c => c.value === item.id);
+
+                if (!!child) {
+                    this.currentSelection.push(child);
+                    break;
+                }
+            } else if (localBackupItem.value === item.id) {
+                this.currentSelection.push(localBackupItem);
+                break;
+            }
+        }
+
+        this.updateActiveItemsOnList();
+        this.selectedItems.emit(this.currentSelection);
+        this.selectedIds.emit(this.currentSelection.map(cs => cs.value));
+    }
+
+    onRemoveItem(item: SelectItem): void {
+        const idx = this.currentSelection.findIndex(cs => cs.value === item.value);
+
+        this.currentSelection.splice(idx, 1);
+        this.updateActiveItemsOnList();
+    }
+
+    private updateActiveItemsOnList(): void {
+        for (const backupItem of this._localBackupItems) {
+            const selectedItem = this.currentSelection.find(cs => cs.value === backupItem.value);
+            backupItem.listItem!.isActive = !!selectedItem;
+        }
+
+        this._setupLocalItems(this._localBackupItems);
+    }
+}

package/form-controls/select/src/components/shared.scss

@@ -0,0 +1,44 @@
+.select-dropdown-content {
+    position: absolute !important;
+    background-color: var(--upd-card-bg);
+    z-index: 1;
+    border: var(--upd-card-border-width) solid var(--upd-card-border-color) !important;
+    border-radius: var(--upd-card-border-radius) !important;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 18%);
+}
+
+.select-dropdown-content-open {
+    display: block !important;
+}
+
+.select-loader-wrapper {
+    height: 24px;
+
+    .select-loader {
+        height: 24px;
+        width: 24px;
+    }
+}
+
+.select-search-box {
+    position: absolute;
+    z-index: 1;
+    padding: 0.5rem;
+    margin-top: -1px;
+    background: var(--upd-body-bg);
+    border: var(--upd-border-width) var(--upd-border-style) var(--upd-border-color);
+}
+
+.remove-bottom-radius {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.remove-top-radius {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+}
+
+.compact {
+    padding: 0.25rem 2rem 0.25rem 0.75rem !important;
+}

package/form-controls/select/src/components/single/select.component.html

@@ -0,0 +1,118 @@
+@if (!!labelText) {
+    @if (!!hintText || !!hintTemplate()) {
+        <div class="row g-2">
+            <div class="col-auto">
+                <label [ngClass]="labelSizeClasses">{{ labelText }}</label>
+            </div>
+            <div class="col-auto">
+                <span class="form-help" [updPopover]="hintText" [updPopoverTemplate]="hintTemplate()"
+                    [updPopoverActAsTooltip]="hintAsTooltip()">
+                    ?
+                </span>
+            </div>
+        </div>
+    } @else {
+        <label [ngClass]="labelSizeClasses">{{ labelText }}</label>
+    }
+}
+
+@if (!useSystemStyle) {
+    <div class="dropdown" [attr.id]="name()" [ngClass]="layoutClasses()">
+        @if (!labelText && (!!hintText || !!hintTemplate())) {
+            <div class="row g-2">
+                <div class="col">
+                    <ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
+                </div>
+                <div class="col-auto align-self-center">
+                    <span class="form-help" [updPopover]="hintText" [updPopoverTemplate]="hintTemplate()"
+                        [updPopoverActAsTooltip]="hintAsTooltip()">
+                        ?
+                    </span>
+                </div>
+            </div>
+        } @else {
+            <ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
+        }
+
+        <div #searchBox>
+            <div #searchBoxChild [style.visibility]="isDropdownOpen ? 'visible' : 'hidden'" class="select-search-box">
+                <upd-input [placeholder]="placeholder()" [isInputGroupFlat]="true" (valueChange)="search($event)">
+                    <ng-template updInputPrepend>
+                        <upd-icon tablerIcon="search"></upd-icon>
+                    </ng-template>
+                </upd-input>
+            </div>
+        </div>
+        <upd-list #list [items]="listItems" [maxHeight]="dropdownMaxHeight() + 'px'" (selectedItem)="onSelectItem($event)"
+            [wrapperClasses]="dropdownClasses" [isVisible]="isDropdownOpen" [shouldOverflow]="true" [shouldDisplayItemsCounter]="true">
+        </upd-list>
+    </div>
+} @else {
+    @if (!labelText && (!!hintText || !!hintTemplate())) {
+        <div class="row g-2">
+            <div class="col">
+                <ng-template [ngTemplateOutlet]="contentDefaultStyleTpl"></ng-template>
+            </div>
+            <div class="col-auto align-self-center">
+                <span class="form-help" [updPopover]="hintText" [updPopoverTemplate]="hintTemplate()"
+                    [updPopoverActAsTooltip]="hintAsTooltip()">
+                    ?
+                </span>
+            </div>
+        </div>
+    } @else {
+        <ng-template [ngTemplateOutlet]="contentDefaultStyleTpl"></ng-template>
+    }
+}
+
+<ng-template #contentTpl>
+    <div #componentBox class="input-group input-group-flat">
+        <div class="form-control" [class.remove-bottom-radius]="isDropdownOpen" [class.disabled]="isDisabled()"
+            [class.pe-none]="isDisabled()" [attr.disabled]="isDisabled() ? 'disabled' : undefined" (click)="openDropdown()">
+            @if (!!currentSelection) {
+                <span>{{ currentSelection.text }}</span>
+            }
+        </div>
+        <div class="input-group-text" [class.remove-bottom-radius]="isDropdownOpen">
+            @if (!!currentSelection && shouldShowClearButton) {
+                <upd-button [shouldIgnoreBtnClass]="true" [isDisabled]="isDisabled()" (clicked)="clearSelection()"
+                    customClasses="link-secondary">
+                    <upd-icon [model]="{tablerIcon:'x'}"></upd-icon>
+                </upd-button>
+            }
+            @if (!isLoading) {
+                <upd-button [shouldIgnoreBtnClass]="true" [isDisabled]="isDisabled()" (clicked)="openDropdown()"
+                    customClasses="link-secondary ms-2">
+                    <upd-icon [model]="{tablerIcon:'chevron-down'}"></upd-icon>
+                </upd-button>
+            } @else {
+                <div class="select-loader-wrapper">
+                    <div class="spinner-border spinner-border-sm text-muted select-loader" role="status"></div>
+                </div>
+            }
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #contentDefaultStyleTpl>
+    <select class="form-select" [class.compact]="isCompact" [attr.placeholder]="placeholder()" [attr.name]="name()"
+        [attr.disabled]="isDisabled() ? 'disabled' : undefined" (change)="onSystemSelect($event)">
+        @for (item of localItems; track item) {
+            @if ((item.children?.length || 0) > 0) {
+                <optgroup [label]="item.text">
+                    @for (child of item.children; track child) {
+                        <option [attr.selected]="!!currentSelection && child.value === currentSelection.value ? true : undefined"
+                            [value]="child.value">
+                            {{ child.text }}
+                        </option>
+                    }
+                </optgroup>
+            } @else {
+                <option [attr.selected]="!!currentSelection && item.value === currentSelection.value ? true : undefined"
+                    [value]="item.value">
+                    {{ item.text }}
+                </option>
+            }
+        }
+    </select>
+</ng-template>

package/form-controls/select/src/components/single/select.component.scss

@@ -0,0 +1,3 @@
+@import "../shared";
+
+

package/form-controls/select/src/components/single/select.component.spec.ts

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

package/form-controls/select/src/components/single/select.component.ts

@@ -0,0 +1,75 @@
+import {
+    Component,
+    Input,
+    ViewEncapsulation,
+    Output,
+    EventEmitter
+} from '@angular/core';
+import { OptionalType } from '@updevs/sdk/types';
+import { ListItem } from '@updevs/components/list';
+
+import { BaseSelectComponent } from '../../models/abstractions/base-select.component';
+import { SelectItem } from '../../models/select-item';
+
+@Component({
+    selector: 'upd-select',
+    templateUrl: './select.component.html',
+    styleUrls: ['./select.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class SelectComponent extends BaseSelectComponent {
+    /**
+     * If true, it'll use the default style of the OS, no search capabilities.
+     */
+    @Input() useSystemStyle = false;
+    @Input() shouldShowClearButton = true;
+    @Input() isCompact = false;
+    @Input() set selected(item: OptionalType<SelectItem>) {
+        this.currentSelection = item;
+    }
+
+    /**
+     * Triggered when an item is selected.
+     */
+    @Output() readonly selectedItem = new EventEmitter<OptionalType<SelectItem>>();
+
+    currentSelection?: SelectItem;
+
+    constructor() {
+        super();
+    }
+
+    onSelectItem(item: ListItem): void {
+        this._currentTerm = item.text;
+        this.isDropdownOpen = false;
+
+        for (const localBackupItem of this._localBackupItems) {
+            if ((localBackupItem.children?.length || 0) > 0) {
+                this.currentSelection = localBackupItem.children?.find(c => c.value === item.id);
+
+                if (!!this.currentSelection) {
+                    break;
+                }
+            } else if (localBackupItem.value === item.id) {
+                this.currentSelection = localBackupItem;
+                break;
+            }
+        }
+
+        this.selectedItem.emit(this.currentSelection);
+    }
+
+    onSystemSelect(event: any): void {
+        // eslint-disable-next-line eqeqeq
+        this.currentSelection = this.localItems.find(c => c.value == event.target.value);
+        this.selectedItem.emit(this.currentSelection);
+    }
+
+    clearSelection(): void {
+        this.currentSelection = undefined;
+        this._currentTerm = undefined;
+
+        this.search();
+        this.selectedItem.emit(undefined);
+    }
+}