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

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

@@ -1,23 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,6 +0,0 @@
-{
-    "$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

@@ -1,61 +0,0 @@
-@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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,44 +0,0 @@
-.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

@@ -1,118 +0,0 @@
-@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

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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);
-    }
-}