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

package/form-controls/date-picker/src/date-picker.component.spec.ts

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

package/form-controls/date-picker/src/date-picker.component.ts

@@ -1,177 +0,0 @@
-import {
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    NgZone,
-    Output,
-    Renderer2,
-    RendererStyleFlags2,
-    ViewChild,
-    inject
-} from '@angular/core';
-import { BaseComponent, PositioningService, ComputePositionResult, DomEventsService } from '@updevs/sdk/layout';
-import { DateService } from '@updevs/sdk/core';
-import { OptionalType } from '@updevs/sdk/types';
-import { CalendarRangeStrategyService, CalendarViewType, CalendarUserEventModel, DateRangeModel } from '@updevs/components/calendar';
-
-let datepickerId = 0;
-
-@Component({
-    selector: 'upd-date-picker',
-    templateUrl: './date-picker.component.html',
-    styleUrl: './date-picker.component.scss'
-})
-export class DatePickerComponent extends BaseComponent {
-    @ViewChild('componentBox', { read: ElementRef }) componentBox?: ElementRef;
-    @ViewChild('calendar', { read: ElementRef }) calendar?: ElementRef;
-
-    @Input() shouldCloseOnOutsideClick = true;
-    /**
-     * The minimum selectable date.
-     */
-    @Input() minDate?: Date;
-    /**
-     * The maximum selectable date.
-     */
-    @Input() maxDate?: Date;
-    /**
-     * The date to open the calendar to initially
-     */
-    @Input()
-    get startAt(): OptionalType<Date> {
-        // If an explicit startAt is set we start there, otherwise we start at whatever the currently
-        // selected value is.
-        return this._startAt || this.selectedData.start;
-    }
-    set startAt(value: OptionalType<Date>) {
-        this._startAt = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
-    }
-    /**
-     * The view that the calendar should start in.
-     */
-    @Input() startView: CalendarViewType = 'month';
-    @Input() dateFilter?: (date: Date) => boolean;
-    /**
-     * Whether the user is currently selecting a range of dates.
-     */
-    @Input() isRange = false;
-
-    /**
-     * Emits the year chosen in multiyear view.
-     * This doesn't imply a change on the selected date.
-     */
-    @Output() readonly yearSelected = new EventEmitter<Date>();
-    /**
-     * Emits the month chosen in year view.
-     * This doesn't imply a change on the selected date.
-     */
-    @Output() readonly monthSelected = new EventEmitter<Date>();
-    /**
-     * Emits when the current view changes.
-     */
-    @Output() readonly viewChanged = new EventEmitter<CalendarViewType>(true);
-
-    /**
-     * Whether the dropdown is open.
-     */
-    isDropdownOpen = false;
-    /**
-     * Start of the comparison range.
-     */
-    comparisonStart?: Date;
-    /**
-     * End of the comparison range.
-     */
-    comparisonEnd?: Date;
-    /**
-     * ARIA Accessible name of the `<input matStartDate/>`
-     */
-    startDateAccessibleName?: string;
-    /**
-     * ARIA Accessible name of the `<input matEndDate/>`
-     */
-    endDateAccessibleName?: string;
-    selectedData = new DateRangeModel();
-    get hasSelectedData(): boolean {
-        return !!this.selectedData.start || !!this.selectedData.end;
-    }
-    get startDate(): string {
-        return !!this.selectedData.start ? this.dateService.format(this.selectedData.start) : '';
-    }
-    get endDate(): string {
-        return !!this.selectedData.end ? this.dateService.format(this.selectedData.end) : '';
-    }
-    readonly id = `upd-datepicker-${datepickerId++}`;
-
-    private _startAt?: Date;
-    private readonly rangeSelectionStrategy = inject(CalendarRangeStrategyService);
-    private readonly dateService = inject(DateService);
-    private readonly domEventsService = inject(DomEventsService);
-    private readonly positioningService = inject(PositioningService);
-    private readonly ngZone = inject(NgZone);
-    private readonly renderer = inject(Renderer2);
-
-    clearSelection(): void {
-
-    }
-
-    openDropdown(): void {
-        this.isDropdownOpen = true;
-
-        if (this.shouldCloseOnOutsideClick) {
-            const outsideClickSub = this.domEventsService.startOutsideClickListener(
-                () => this.ngZone.run(() => this.isDropdownOpen = false),
-                this.calendar?.nativeElement,
-                true,
-                this.componentBox?.nativeElement
-            );
-            this.addSubscriptions(outsideClickSub);
-        }
-
-        this.ngZone.runOutsideAngular(() =>
-            this.positioningService
-                .computePosition(this.componentBox!, this.calendar!, { placement: 'bottom' })
-                .subscribe(resp => this.updatePosition(resp))
-        );
-    }
-
-    handleUserSelection(event: CalendarUserEventModel<OptionalType<Date>>): void {
-        const value = event.value;
-
-        // If we're selecting a range and we have a selection strategy, always pass the value through
-        // there. Otherwise don't assign null values to the model, unless we're selecting a range.
-        // A null value when picking a range means that the user cancelled the selection (e.g. by
-        // pressing escape), whereas when selecting a single value it means that the value didn't
-        // change. This isn't very intuitive, but it's here for backwards-compatibility.
-        if (this.isRange) {
-            this.selectedData = this.rangeSelectionStrategy.selectionFinished(value, this.selectedData);
-        } else if (!!value && !this.dateService.areEqual(value, this.selectedData.start)) {
-            this.selectedData = new DateRangeModel(value);
-        }
-
-        // Delegate closing the overlay to the actions.
-        if (this.isRange && !this.selectedData.start || !!this.selectedData.end) {
-            this.isDropdownOpen = false;
-        }
-    }
-
-    handleUserDragDrop(event: CalendarUserEventModel<DateRangeModel>): void {
-        this.selectedData = event.value;
-    }
-
-    updateStartDate(value: any): void {
-        this.selectedData = new DateRangeModel(this.dateService.getValidOrUndefined(new Date(value)), this.selectedData.end);
-    }
-
-    updateEndDate(value: any): void {
-        this.selectedData = new DateRangeModel(this.selectedData.start, this.dateService.getValidOrUndefined(new Date(value)));
-    }
-
-    private updatePosition(result: ComputePositionResult): void {
-        const ddElement = this.calendar!.nativeElement;
-
-        this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'left', 0, RendererStyleFlags2.Important);
-    }
-}

package/form-controls/date-picker/src/upd-date-picker.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdButtonModule } from '@updevs/components/button';
-import { UpdCalendarModule } from '@updevs/components/calendar';
-import { UpdInputModule } from '@updevs/components/form-controls/input';
-import { UpdIconsModule } from '@updevs/icons';
-
-import { DatePickerComponent } from './date-picker.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdButtonModule,
-        UpdCalendarModule,
-        UpdIconsModule,
-        UpdInputModule
-    ],
-    exports: [
-        DatePickerComponent
-    ],
-    declarations: [
-        DatePickerComponent
-    ]
-})
-export class UpdDatePickerModule {}

package/form-controls/input/index.ts

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

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

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

package/form-controls/input/src/directives/input-append.directive.spec.ts

@@ -1,8 +0,0 @@
-import { InputAppendDirective } from './input-append.directive';
-
-describe('InputAppendDirective', () => {
-  it('should create an instance', () => {
-    const directive = new InputAppendDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/form-controls/input/src/directives/input-append.directive.ts

@@ -1,8 +0,0 @@
-import { Directive, TemplateRef, inject } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updInputAppend]'
-})
-export class InputAppendDirective {
-    readonly templateRef = inject(TemplateRef<any>);
-}

package/form-controls/input/src/directives/input-prepend.directive.spec.ts

@@ -1,8 +0,0 @@
-import { InputPrependDirective } from './input-prepend.directive';
-
-describe('InputPrependDirective', () => {
-  it('should create an instance', () => {
-    const directive = new InputPrependDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/form-controls/input/src/directives/input-prepend.directive.ts

@@ -1,8 +0,0 @@
-import { Directive, TemplateRef, inject } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updInputPrepend]'
-})
-export class InputPrependDirective {
-    readonly templateRef = inject(TemplateRef<any>);
-}

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

@@ -1,124 +0,0 @@
-@if (!!appendTemplate || !!prependTemplate) {
-    <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
-    <div class="input-group" [class.input-group-flat]="isInputGroupFlat">
-        @if (!!prependTemplate) {
-            @if (!isPrependButton) {
-                <div class="input-group-text">
-                    <ng-template [ngTemplateOutlet]="prependTemplate.templateRef"></ng-template>
-                </div>
-            } @else {
-                <ng-template [ngTemplateOutlet]="prependTemplate.templateRef"></ng-template>
-            }
-        }
-
-        <ng-template [ngTemplateOutlet]="inputTpl"></ng-template>
-
-        @if (!!appendTemplate) {
-            @if (!isAppendButton) {
-                <div class="input-group-text">
-                    <ng-template [ngTemplateOutlet]="appendTemplate.templateRef"></ng-template>
-                </div>
-            } @else {
-                <ng-template [ngTemplateOutlet]="appendTemplate.templateRef"></ng-template>
-            }
-        }
-    </div>
-} @else if (!!prependIconModel || !!appendIconModel || isLoading) {
-    <ng-template [ngTemplateOutlet]="inputIconTpl"></ng-template>
-} @else {
-    <ng-template [ngTemplateOutlet]="inputTpl"></ng-template>
-}
-
-<ng-template #inputTpl>
-    @if (!hintText && !hintTemplate()) {
-        @if (shouldDisplayInnerLabel && !isFloating) {
-            <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
-        }
-
-        <ng-template [ngTemplateOutlet]="basicInputTpl"></ng-template>
-
-        @if (shouldDisplayInnerLabel && isFloating) {
-            <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
-        }
-    } @else {
-        <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
-        <div class="row g-2">
-            <div class="col">
-                <ng-template [ngTemplateOutlet]="basicInputTpl"></ng-template>
-            </div>
-            <div class="col-auto align-self-center">
-                <span class="form-help" [updPopover]="hintText" [updPopoverTemplate]="hintTemplate()"
-                    [updPopoverActAsTooltip]="hintAsTooltip()">
-                    ?
-                </span>
-            </div>
-        </div>
-    }
-</ng-template>
-
-<ng-template #inputIconTpl>
-    <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
-    <div [class.col]="layout === 'horizontal'" [class.input-icon]="layout === 'vertical'">
-        @if (layout === 'horizontal') {
-            <div class="input-icon">
-                <ng-template [ngTemplateOutlet]="inputIconBaseTpl"></ng-template>
-            </div>
-        } @else {
-            <ng-template [ngTemplateOutlet]="inputIconBaseTpl"></ng-template>
-        }
-    </div>
-</ng-template>
-
-<ng-template #inputIconBaseTpl>
-    @if (!!prependIconModel || (isLoading && loaderPosition === 'prepend')) {
-        <span class="input-icon-addon">
-            @if (!!prependIconModel) {
-                <upd-icon [model]="prependIconModel"></upd-icon>
-            } @else {
-                <ng-template [ngTemplateOutlet]="loaderTpl"></ng-template>
-            }
-        </span>
-    }
-
-    <ng-template [ngTemplateOutlet]="inputTpl"></ng-template>
-
-    @if (!!appendIconModel || (isLoading && loaderPosition === 'append')) {
-        <span class="input-icon-addon">
-            @if (!!appendIconModel) {
-                <upd-icon [model]="appendIconModel"></upd-icon>
-            } @else {
-                <ng-template [ngTemplateOutlet]="loaderTpl"></ng-template>
-            }
-        </span>
-    }
-</ng-template>
-
-<ng-template #loaderTpl>
-    <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
-</ng-template>
-
-<ng-template #basicInputTpl>
-    @if (!!mask) {
-        <input [updMask]="mask" [updMaskConfig]="maskConfig" [updateMaskValueSubject]="valueChangedSub" [attr.type]="type"
-            [attr.maxlength]="maxLength" [disabled]="isDisabled" [ngClass]="classes" [placeholder]="placeholderText" [value]="value || ''"
-            [attr.name]="name" [attr.readonly]="isReadOnly ? '' : undefined" (input)="onInputChange($event)" (blur)="blurred.emit()"
-            (keydown)="keyDown.emit($event)" (keydown.escape)="keyDownEsc.emit()" (keyup.enter)="keyUpEnter.emit()" />
-    } @else {
-        <input [attr.type]="type" [attr.maxlength]="maxLength" [disabled]="isDisabled" [ngClass]="classes" [placeholder]="placeholderText"
-            [value]="value || ''" [attr.name]="name" [attr.readonly]="isReadOnly ? '' : undefined" (input)="onInputChange($event)"
-            (blur)="blurred.emit()" (keydown)="keyDown.emit($event)" (keydown.escape)="keyDownEsc.emit()"
-            (keyup.enter)="keyUpEnter.emit()" />
-    }
-
-    @if (validationStatus() === 'invalid' && validationStatusTexts.length > 0) {
-        @for (desc of validationStatusTexts; track desc) {
-            <div class="invalid-feedback">{{ desc }}</div>
-        }
-    }
-</ng-template>
-
-<ng-template #labelTpl>
-    @if (!!labelText) {
-        <label [ngClass]="labelSizeClasses" [class.required]="isRequired">{{ labelText }}</label>
-    }
-</ng-template>

package/form-controls/input/src/input.component.scss

@@ -1,13 +0,0 @@
-.input-group-text .form-check > .form-check-input {
-    margin: 0 !important;
-}
-
-.input-group-text > upd-checkbox {
-    height: 16px !important; // TODO: validate if it won't break other sizes.
-}
-
-.input-group-text .form-check {
-    margin: 0 !important;
-    padding-left: 0 !important;
-    min-height: 16px !important;
-}

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

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

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

@@ -1,161 +0,0 @@
-import {
-    Component,
-    ViewEncapsulation,
-    Input,
-    SimpleChanges,
-    OnInit,
-    OnChanges,
-    ContentChild,
-    HostBinding,
-    Output,
-    EventEmitter
-} from '@angular/core';
-import { IconModel } from '@updevs/icons';
-import { UpdMaskConfig } from '@updevs/sdk/mask';
-import { ComponentSizeType, HorizontalVerticalType, RowColumnSize, ColumnSizeHelper } from '@updevs/components';
-import { BaseControl } from '@updevs/components/form-controls/abstractions';
-import { Subject } from 'rxjs';
-
-import { InputType } from './types/input.type';
-import { InputAppendDirective } from './directives/input-append.directive';
-import { InputPrependDirective } from './directives/input-prepend.directive';
-import { LoaderPositionType } from './types/loader-position.type';
-
-@Component({
-    selector: 'upd-input',
-    templateUrl: './input.component.html',
-    styleUrls: ['./input.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class InputComponent extends BaseControl implements OnInit, OnChanges {
-    @HostBinding('class') hostWrapperClasses = '';
-    @ContentChild(InputAppendDirective) appendTemplate?: InputAppendDirective;
-    @ContentChild(InputPrependDirective) prependTemplate?: InputPrependDirective;
-
-    @Input() type: InputType = 'text';
-    @Input() mask?: string;
-    @Input() maskConfig?: UpdMaskConfig;
-    @Input() value?: any;
-    @Input() size: ComponentSizeType = 'default';
-    @Input() customClasses?: string;
-    @Input() wrapperClasses?: string;
-    @Input() name?: string;
-    @Input() maxLength?: number;
-    @Input() isDisabled = false;
-    @Input() isPlainText = false;
-    @Input() isReadOnly = false;
-    @Input() isLoading = false;
-    @Input() isRound = false;
-    @Input() isFlush = false;
-    @Input() isInputGroupFlat = false;
-    @Input() isPrependButton = false;
-    @Input() isAppendButton = false;
-    @Input() isFloating = false;
-    @Input() isRequired = false;
-    @Input() loaderPosition: LoaderPositionType = 'append';
-    @Input() prependIconModel?: IconModel;
-    @Input() appendIconModel?: IconModel;
-    @Input() isValidationStatusLight = false;
-    @Input() layout: HorizontalVerticalType = 'vertical';
-    @Input() labelColSize?: RowColumnSize;
-
-    @Output() readonly valueChange = new EventEmitter<any>();
-    @Output() readonly blurred = new EventEmitter<void>();
-    /**
-     * Emitted when any key is pressed.
-     */
-    @Output() readonly keyDown = new EventEmitter<any>();
-    /**
-     * Emitted when the ESC key is pressed.
-     */
-    @Output() readonly keyDownEsc = new EventEmitter<void>();
-    /**
-     * Emitted when the ENTER key is released.
-     */
-    @Output() readonly keyUpEnter = new EventEmitter<void>();
-
-    classes: string[] = [];
-    get shouldDisplayInnerLabel(): boolean {
-        return !!this.label
-            && !this.prependIconModel
-            && !this.appendIconModel
-            && !this.isLoading
-            && !this.appendTemplate
-            && !this.prependTemplate;
-    }
-    get labelSizeClasses(): string {
-        if (this.layout !== 'horizontal') {
-            return 'form-label';
-        }
-
-        return ColumnSizeHelper.getClasses(
-            'col-form-label',
-            ColumnSizeHelper.getSizeClasses(this.labelColSize, 3)
-        );
-    }
-
-    readonly valueChangedSub = new Subject<string>();
-
-    ngOnInit(): void {
-        this.updateClasses();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.updateClasses();
-
-        if (changes['value'] && !!this.mask) {
-            this.valueChangedSub.next(changes['value'].currentValue);
-        }
-    }
-
-    onInputChange(evt: Event): void {
-        if (!evt.target) {
-            return;
-        }
-
-        this.valueChange.emit((evt.target as any).value);
-    }
-
-    private updateClasses(): void {
-        const lClasses: string[] = !this.isPlainText ? ['form-control'] : ['form-control-plaintext'];
-
-        if (this.isRound) {
-            lClasses.push('form-control-rounded');
-        }
-
-        if (this.isFlush) {
-            lClasses.push('form-control-flush');
-        }
-
-        if (this.size !== 'default') {
-            lClasses.push(`form-control-${this.size === 'large' ? 'lg' : 'sm'}`);
-        }
-
-        if (!!this.validationStatus()) {
-            const statusCls = `is-${this.validationStatus()}`;
-            lClasses.push(statusCls);
-
-            if (this.isValidationStatusLight) {
-                lClasses.push(`${statusCls}-lite`);
-            }
-        }
-
-        if (this.layout === 'horizontal') {
-            this.hostWrapperClasses = 'row';
-        }
-
-        if (!!this.wrapperClasses) {
-            this.hostWrapperClasses += ` ${this.wrapperClasses}`;
-        }
-
-        if (this.isFloating) {
-            this.hostWrapperClasses += ' form-floating';
-        }
-
-        this.classes = [
-            ...lClasses,
-            ...(this.customClasses || '').split(' '),
-            this.layout === 'horizontal' ? 'col' : ''
-        ];
-    }
-}

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

@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdMaskModule } from '@updevs/sdk/mask';
-import { UpdPopoverModule } from '@updevs/components/popover';
-
-import { InputComponent } from './input.component';
-import { InputAppendDirective } from './directives/input-append.directive';
-import { InputPrependDirective } from './directives/input-prepend.directive';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdIconsModule,
-        UpdMaskModule,
-        UpdPopoverModule
-    ],
-    declarations: [
-        InputComponent,
-        InputAppendDirective,
-        InputPrependDirective
-    ],
-    exports: [
-        InputComponent,
-        InputAppendDirective,
-        InputPrependDirective
-    ]
-})
-export class UpdInputModule {}

package/form-controls/radio/index.ts

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

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

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

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

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