@updevs/components 1.0.0-alpha.3 → 1.0.0-alpha.31

package/README.md

@@ -1,7 +1,8 @@
-# After updating tabler
+# UpDevs Components Library for Angular
 
+After updating tabler
 Replace all "tblr" to "upd"
 
-LOCAL:
-"@updevs/icons": "file:../icons",
-"@updevs/sdk": "file:../sdk",
+LOCAL: "@updevs/icons": "file:../icons", "@updevs/sdk": "file:../sdk",
+
+PUBLISHED: "@updevs/icons": "^1.0.4", "@updevs/sdk": "^1.0.0-alpha.15",

package/assets/styles/_bootstrap-components.scss

@@ -33,6 +33,23 @@
 
 // Helpers
 @import "bootstrap/scss/helpers";
+@import "bootstrap/scss/utilities";
 
-// Utilities
+// extend `text-align` utility
+$utilities: map-merge(
+        $utilities,
+        (
+            "text-align": map-merge(
+                    map-get($utilities, "text-align"),
+                    (
+                        values: map-merge(
+                                map-get(map-get($utilities, "text-align"), "values"),
+                                (justify: justify),
+                        ),
+                    ),
+            ),
+        )
+);
+
+// include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import "bootstrap/scss/utilities/api";

package/assets/styles/_seven-columns.scss

@@ -0,0 +1,73 @@
+@media (min-width: 768px) {
+    .seven-cols .col-1 {
+        width: 100%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+}
+
+@media (min-width: 992px) {
+    .seven-cols .col-1 {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .seven-cols .col-2 {
+        width: 28.5714285714%;
+    }
+
+    .seven-cols .col-3 {
+        width: 42.8571428571%;
+    }
+
+    .seven-cols .col-4 {
+        width: 57.1428571429%;
+    }
+
+    .seven-cols .col-5 {
+        width: 71.4285714286%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+
+    .seven-cols .col-7 {
+        width: 100%;
+    }
+}
+
+/**
+ *  The following is not really needed in this case
+ *  Only to demonstrate the usage of @media for large screens
+ */
+@media (min-width: 1200px) {
+    .seven-cols .col-1 {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .seven-cols .col-2 {
+        width: 28.5714285714%;
+    }
+
+    .seven-cols .col-3 {
+        width: 42.8571428571%;
+    }
+
+    .seven-cols .col-4 {
+        width: 57.1428571429%;
+    }
+
+    .seven-cols .col-5 {
+        width: 71.4285714286%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+
+    .seven-cols .col-7 {
+        width: 100%;
+    }
+}

package/assets/styles/_updevs.scss

@@ -7,3 +7,7 @@
 .upd-right-login-image {
     content: var(--upd-right-login-image-src);
 }
+
+.upd-right-login-cover-image {
+    background-image: var(--upd-right-login-cover-image-bg);
+}

package/assets/styles/_variables.scss

@@ -684,7 +684,7 @@ $modal-inner-padding: 1.5rem !default;
 
 $modal-footer-border-width: var(--#{$prefix}border-width) !default;
 $modal-footer-margin-between: 0.75rem !default;
-$modal-footer-bg: var(--#{$prefix}bg-surface-tertiary) !default;
+$modal-footer-bg: var(--#{$prefix}bg-surface-secondary) !default;
 
 $modal-status-size: $border-width-wide !default;
 

package/assets/styles/utils/_colors.scss

@@ -13,7 +13,7 @@
     }
 
     .border-#{"" + $color} {
-        border-color: $value !important;
+        border-color: rgba(var(--#{$prefix}#{$color}-rgb)) !important;
     }
 }
 

package/badge/badge-config.model.d.ts

@@ -0,0 +1,14 @@
+import { BgColorStyleType, ColorStyleType } from '@updevs/sdk/types';
+import { TextModel } from '@updevs/sdk';
+import { BadgeConfig } from './badge.config';
+export declare class BadgeConfigModel implements BadgeConfig {
+    bgColor: BgColorStyleType;
+    textColor?: ColorStyleType;
+    text?: TextModel;
+    isOutline: boolean;
+    isPill: boolean;
+    isNotification: boolean;
+    isBlinking: boolean;
+    customClasses: string;
+    constructor(init?: BadgeConfig);
+}

package/badge/badge.component.d.ts

@@ -0,0 +1,24 @@
+import { BgColorStyleType, ColorStyleType } from '@updevs/sdk/types';
+import { TextModel } from '@updevs/sdk';
+import { BadgeConfig } from './badge.config';
+import * as i0 from "@angular/core";
+export declare class BadgeComponent {
+    hostClasses: string;
+    config: import("@angular/core").InputSignal<BadgeConfig | undefined>;
+    bgColor: import("@angular/core").InputSignal<BgColorStyleType>;
+    textColor: import("@angular/core").InputSignal<ColorStyleType | undefined>;
+    text: import("@angular/core").InputSignal<TextModel | undefined>;
+    isOutline: import("@angular/core").InputSignal<boolean>;
+    isPill: import("@angular/core").InputSignal<boolean>;
+    isNotification: import("@angular/core").InputSignal<boolean>;
+    isBlinking: import("@angular/core").InputSignal<boolean>;
+    customClasses: import("@angular/core").InputSignal<string>;
+    get badgeText(): string;
+    private readonly configModel;
+    private readonly classes;
+    private readonly defaultClass;
+    private readonly textService;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "upd-badge", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "isOutline": { "alias": "isOutline"; "required": false; "isSignal": true; }; "isPill": { "alias": "isPill"; "required": false; "isSignal": true; }; "isNotification": { "alias": "isNotification"; "required": false; "isSignal": true; }; "isBlinking": { "alias": "isBlinking"; "required": false; "isSignal": true; }; "customClasses": { "alias": "customClasses"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
+}

package/badge/badge.config.d.ts

@@ -0,0 +1,12 @@
+import { BgColorStyleType, ColorStyleType } from '@updevs/sdk/types';
+import { TextModel } from '@updevs/sdk';
+export interface BadgeConfig {
+    bgColor?: BgColorStyleType;
+    textColor?: ColorStyleType;
+    text?: TextModel;
+    isOutline?: boolean;
+    isPill?: boolean;
+    isNotification?: boolean;
+    isBlinking?: boolean;
+    customClasses?: string;
+}

package/badge/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './badge.component';
+export * from './badge.config';
+export * from './upd-badge.module';

package/badge/upd-badge.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./badge.component";
+import * as i2 from "@angular/common";
+export declare class UpdBadgeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdBadgeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UpdBadgeModule, [typeof i1.BadgeComponent], [typeof i2.CommonModule], [typeof i1.BadgeComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UpdBadgeModule>;
+}

package/button/button.component.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter } from '@angular/core';
+import { IconModel } from '@updevs/icons';
+import { TextModel } from '@updevs/sdk';
+import { ButtonModel } from '@updevs/sdk/layout';
+import { LeftRightType, OptionalType, BrandType, BgColorStyleType } from '@updevs/sdk/types';
+import { BadgeConfig } from '@updevs/components/badge';
+import * as i0 from "@angular/core";
+export declare class ButtonComponent {
+    get classes(): string[];
+    get titleAttr(): OptionalType<string>;
+    /**
+     * Emitted when the button is clicked.
+     * **NOTE:** The name of the event can not be 'click'. It would generate a conflict with the HTML event of same name.
+     * That would cause strange behaviors like preventing `isDisabled` from working correctly.
+     */
+    readonly clicked: EventEmitter<any>;
+    model: import("@angular/core").InputSignal<ButtonModel | undefined>;
+    text: import("@angular/core").InputSignal<TextModel | undefined>;
+    brandColorStyle: import("@angular/core").InputSignal<BrandType | undefined>;
+    customClasses: import("@angular/core").InputSignal<string | undefined>;
+    isOutline: import("@angular/core").InputSignal<boolean>;
+    isGhost: import("@angular/core").InputSignal<boolean>;
+    isSquare: import("@angular/core").InputSignal<boolean>;
+    isPill: import("@angular/core").InputSignal<boolean>;
+    isIcon: import("@angular/core").InputSignal<boolean>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Whether the button should act as a list (top-bottom alignment instead of left-right related to neighbors).
+     */
+    isList: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Whether the button should be floating in the bottom right corner.
+     */
+    isFloating: import("@angular/core").InputSignal<boolean>;
+    isAction: import("@angular/core").InputSignal<boolean>;
+    isNavigationLink: import("@angular/core").InputSignal<boolean>;
+    isLink: import("@angular/core").InputSignal<boolean>;
+    shouldIgnoreBtnClass: import("@angular/core").InputSignal<boolean>;
+    iconModel: import("@angular/core").InputSignal<IconModel | undefined>;
+    iconPosition: import("@angular/core").InputSignal<LeftRightType>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    isActive: import("@angular/core").InputSignal<boolean>;
+    badgeConfig: import("@angular/core").InputSignal<BadgeConfig | undefined>;
+    colorStyle: import("@angular/core").InputSignal<BgColorStyleType | undefined>;
+    size: import("@angular/core").InputSignal<import("@updevs/sdk/types").SizeType>;
+    title: import("@angular/core").InputSignal<TextModel | undefined>;
+    get mainText(): string;
+    get _iconModel(): OptionalType<IconModel>;
+    get _iconPosition(): LeftRightType;
+    get _isIcon(): boolean;
+    private get sizeClass();
+    private _size;
+    private _title;
+    private _colorStyle;
+    private _brandColorStyle;
+    private buttonClasses;
+    private readonly textService;
+    onClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "upd-button", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "brandColorStyle": { "alias": "brandColorStyle"; "required": false; "isSignal": true; }; "customClasses": { "alias": "customClasses"; "required": false; "isSignal": true; }; "isOutline": { "alias": "isOutline"; "required": false; "isSignal": true; }; "isGhost": { "alias": "isGhost"; "required": false; "isSignal": true; }; "isSquare": { "alias": "isSquare"; "required": false; "isSignal": true; }; "isPill": { "alias": "isPill"; "required": false; "isSignal": true; }; "isIcon": { "alias": "isIcon"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isList": { "alias": "isList"; "required": false; "isSignal": true; }; "isFloating": { "alias": "isFloating"; "required": false; "isSignal": true; }; "isAction": { "alias": "isAction"; "required": false; "isSignal": true; }; "isNavigationLink": { "alias": "isNavigationLink"; "required": false; "isSignal": true; }; "isLink": { "alias": "isLink"; "required": false; "isSignal": true; }; "shouldIgnoreBtnClass": { "alias": "shouldIgnoreBtnClass"; "required": false; "isSignal": true; }; "iconModel": { "alias": "iconModel"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "badgeConfig": { "alias": "badgeConfig"; "required": false; "isSignal": true; }; "colorStyle": { "alias": "colorStyle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], false, never>;
+}

package/button/upd-button.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./button.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@updevs/icons";
+import * as i4 from "@updevs/components/badge";
+export declare class UpdButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UpdButtonModule, [typeof i1.ButtonComponent], [typeof i2.CommonModule, typeof i3.UpdIconsModule, typeof i4.UpdBadgeModule], [typeof i1.ButtonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UpdButtonModule>;
+}

package/calendar/calendar.component.d.ts

@@ -0,0 +1,127 @@
+import { AfterContentInit, AfterViewChecked, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { OptionalType } from '@updevs/sdk/types';
+import { DateRangeModel } from './models/date-range.model';
+import { CalendarViewType } from './types/calendar-view.type';
+import { CalendarUserEventModel } from './models/calendar-user-event.model';
+import { CalendarCellClassFunctionType } from './types/calendar-cell-class-function.type';
+import { CalendarMonthViewComponent } from './components/calendar-month-view/calendar-month-view.component';
+import { CalendarYearViewComponent } from './components/calendar-year-view/calendar-year-view.component';
+import { CalendarMultiYearViewComponent } from './components/calendar-multi-year-view/calendar-multi-year-view.component';
+import * as i0 from "@angular/core";
+export declare class CalendarComponent implements AfterContentInit, AfterViewChecked, OnChanges {
+    /** Reference to the current month view component. */
+    monthView?: CalendarMonthViewComponent;
+    /** Reference to the current year view component. */
+    yearView?: CalendarYearViewComponent;
+    /** Reference to the current multi-year view component. */
+    multiYearView?: CalendarMultiYearViewComponent;
+    /** A date representing the period (month or year) to start the calendar in. */
+    get startAt(): OptionalType<Date>;
+    set startAt(value: OptionalType<Date>);
+    /**
+     * Whether the calendar should be started in month or year view.
+     */
+    startView: CalendarViewType;
+    /**
+     * The currently selected date.
+     */
+    get selected(): DateRangeModel | OptionalType<Date>;
+    set selected(value: DateRangeModel | OptionalType<Date>);
+    /**
+     * The minimum selectable date.
+     */
+    get minDate(): OptionalType<Date>;
+    set minDate(value: OptionalType<Date>);
+    /**
+     * The maximum selectable date.
+     */
+    get maxDate(): OptionalType<Date>;
+    set maxDate(value: OptionalType<Date>);
+    /**
+     * Function used to filter which dates are selectable.
+     */
+    dateFilter?: (date: Date) => boolean;
+    /** Function that can be used to add custom CSS classes to dates. */
+    dateClass?: CalendarCellClassFunctionType;
+    /** 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;
+    /** Whether the user is currently selecting a range of dates. */
+    isRange: boolean;
+    /** Emits when the currently selected date changes. */
+    readonly selectedChange: EventEmitter<OptionalType<Date>>;
+    /**
+     * Emits the year chosen in multiyear view.
+     * This doesn't imply a change on the selected date.
+     */
+    readonly yearSelected: EventEmitter<Date>;
+    /**
+     * Emits the month chosen in year view.
+     * This doesn't imply a change on the selected date.
+     */
+    readonly monthSelected: EventEmitter<Date>;
+    /**
+     * Emits when the current view changes.
+     */
+    readonly viewChanged: EventEmitter<CalendarViewType>;
+    /** Emits when any date is selected. */
+    readonly userSelection: EventEmitter<CalendarUserEventModel<OptionalType<Date>>>;
+    /** Emits a new date range value when the user completes a drag drop operation. */
+    readonly userDragDrop: EventEmitter<CalendarUserEventModel<DateRangeModel>>;
+    /**
+     * The current active date. This determines which time period is shown and which date is
+     * highlighted when using keyboard navigation.
+     */
+    get activeDate(): Date;
+    set activeDate(value: Date);
+    /** Whether the calendar is in month view. */
+    get currentView(): CalendarViewType;
+    set currentView(value: CalendarViewType);
+    /** Origin of active drag, or null when dragging is not active. */
+    protected _activeDrag?: CalendarUserEventModel<Date>;
+    private _clampedActiveDate;
+    private _startAt?;
+    private _selected?;
+    private _minDate?;
+    private _maxDate?;
+    /**
+     * Used for scheduling that focus should be moved to the active cell on the next tick.
+     * We need to schedule it, rather than do it immediately, because we have to wait
+     * for Angular to re-evaluate the view children.
+     */
+    private _moveFocusOnNextTick;
+    private _currentView;
+    private readonly dateService;
+    private readonly _changeDetectorRef;
+    ngAfterContentInit(): void;
+    ngAfterViewChecked(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /** Focuses the active date. */
+    focusActiveCell(): void;
+    /** Updates today's date after an update of the active date */
+    updateTodaysDate(): void;
+    /** Handles date selection in the month view. */
+    _dateSelected(event: CalendarUserEventModel<OptionalType<Date>>): void;
+    /** Handles year selection in the multiyear view. */
+    _yearSelectedInMultiYearView(normalizedYear: Date): void;
+    /** Handles month selection in the year view. */
+    _monthSelectedInYearView(normalizedMonth: Date): void;
+    /** Handles year/month selection in the multi-year/year views. */
+    _goToDateInView(date: Date, view: CalendarViewType): void;
+    /** Called when the user starts dragging to change a date range. */
+    _dragStarted(event: CalendarUserEventModel<Date>): void;
+    /**
+     * Called when a drag completes. It may end in cancelation or in the selection
+     * of a new range.
+     */
+    _dragEnded(event: CalendarUserEventModel<OptionalType<DateRangeModel>>): void;
+    /** Returns the component instance that corresponds to the current calendar view. */
+    private _getCurrentViewComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "upd-calendar", never, { "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "isRange": { "alias": "isRange"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "userSelection": "userSelection"; "userDragDrop": "userDragDrop"; }, never, never, false, never>;
+}