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

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

@@ -0,0 +1,26 @@
+.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%);
+    width: 350px !important;
+}
+
+.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;
+}
+
+::ng-deep .date-input {
+    padding: 0 !important;
+    width: 80px !important;
+}
+
+

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

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

@@ -0,0 +1,177 @@
+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/public-api.ts

@@ -0,0 +1,2 @@
+export * from './date-picker.component';
+export * from './upd-date-picker.module';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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