@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.100

package/package.json

@@ -1,19 +1,132 @@
 {
-    "name": "@updevs/components",
-    "version": "1.0.0-alpha.1",
-    "scripts": {
-        "build": "ng-packagr"
+  "name": "@updevs/components",
+  "version": "1.0.0-alpha.100",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eestein/updevs-sdk-angular.git",
+    "directory": "libs/components"
+  },
+  "peerDependencies": {
+    "@angular/common": "^18.0.1 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^18.0.1 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@jsverse/transloco": "^7.4.2",
+    "@jsverse/transloco-messageformat": "^7.0.1",
+    "@updevs/icons": "^1.0.9",
+    "@updevs/sdk": "^1.0.0-alpha.48"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "sideEffects": false,
+  "module": "fesm2022/updevs-components.mjs",
+  "typings": "types/updevs-components.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
     },
-    "peerDependencies": {
-        "@angular/common": "^15.1.0",
-        "@angular/core": "^15.1.0"
+    ".": {
+      "types": "./types/updevs-components.d.ts",
+      "default": "./fesm2022/updevs-components.mjs"
     },
-    "dependencies": {
-        "tslib": "^2.3.0"
+    "./badge": {
+      "types": "./types/updevs-components-badge.d.ts",
+      "default": "./fesm2022/updevs-components-badge.mjs"
     },
-    "publishConfig": {
-        "access": "public"
+    "./button": {
+      "types": "./types/updevs-components-button.d.ts",
+      "default": "./fesm2022/updevs-components-button.mjs"
     },
-    "sideEffects": false,
-    "gitHead": "667e1860a13227cae79371443c3acd9594c75f39"
-}
+    "./calendar": {
+      "types": "./types/updevs-components-calendar.d.ts",
+      "default": "./fesm2022/updevs-components-calendar.mjs"
+    },
+    "./card": {
+      "types": "./types/updevs-components-card.d.ts",
+      "default": "./fesm2022/updevs-components-card.mjs"
+    },
+    "./drag-and-drop": {
+      "types": "./types/updevs-components-drag-and-drop.d.ts",
+      "default": "./fesm2022/updevs-components-drag-and-drop.mjs"
+    },
+    "./dropdown": {
+      "types": "./types/updevs-components-dropdown.d.ts",
+      "default": "./fesm2022/updevs-components-dropdown.mjs"
+    },
+    "./form": {
+      "types": "./types/updevs-components-form.d.ts",
+      "default": "./fesm2022/updevs-components-form.mjs"
+    },
+    "./form-controls/abstractions": {
+      "types": "./types/updevs-components-form-controls-abstractions.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-abstractions.mjs"
+    },
+    "./form-controls/checkbox": {
+      "types": "./types/updevs-components-form-controls-checkbox.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-checkbox.mjs"
+    },
+    "./form-controls/date-picker": {
+      "types": "./types/updevs-components-form-controls-date-picker.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-date-picker.mjs"
+    },
+    "./form-controls/file-upload": {
+      "types": "./types/updevs-components-form-controls-file-upload.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-file-upload.mjs"
+    },
+    "./form-controls/input": {
+      "types": "./types/updevs-components-form-controls-input.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-input.mjs"
+    },
+    "./form-controls/radio": {
+      "types": "./types/updevs-components-form-controls-radio.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-radio.mjs"
+    },
+    "./form-controls/select": {
+      "types": "./types/updevs-components-form-controls-select.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-select.mjs"
+    },
+    "./form-controls/textarea": {
+      "types": "./types/updevs-components-form-controls-textarea.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-textarea.mjs"
+    },
+    "./form-controls/time-picker": {
+      "types": "./types/updevs-components-form-controls-time-picker.d.ts",
+      "default": "./fesm2022/updevs-components-form-controls-time-picker.mjs"
+    },
+    "./layout": {
+      "types": "./types/updevs-components-layout.d.ts",
+      "default": "./fesm2022/updevs-components-layout.mjs"
+    },
+    "./link": {
+      "types": "./types/updevs-components-link.d.ts",
+      "default": "./fesm2022/updevs-components-link.mjs"
+    },
+    "./list": {
+      "types": "./types/updevs-components-list.d.ts",
+      "default": "./fesm2022/updevs-components-list.mjs"
+    },
+    "./modal": {
+      "types": "./types/updevs-components-modal.d.ts",
+      "default": "./fesm2022/updevs-components-modal.mjs"
+    },
+    "./paginator": {
+      "types": "./types/updevs-components-paginator.d.ts",
+      "default": "./fesm2022/updevs-components-paginator.mjs"
+    },
+    "./popover": {
+      "types": "./types/updevs-components-popover.d.ts",
+      "default": "./fesm2022/updevs-components-popover.mjs"
+    },
+    "./pricing": {
+      "types": "./types/updevs-components-pricing.d.ts",
+      "default": "./fesm2022/updevs-components-pricing.mjs"
+    },
+    "./table": {
+      "types": "./types/updevs-components-table.d.ts",
+      "default": "./fesm2022/updevs-components-table.mjs"
+    }
+  }
+}

package/types/updevs-components-badge.d.ts

@@ -0,0 +1,44 @@
+import * as _angular_core from '@angular/core';
+import { BgColorStyleType, ColorStyleType } from '@updevs/sdk/types';
+import { TextModel } from '@updevs/sdk';
+import * as i2 from '@angular/common';
+
+interface BadgeConfig {
+    bgColor?: BgColorStyleType;
+    textColor?: ColorStyleType;
+    text?: TextModel;
+    isOutline?: boolean;
+    isPill?: boolean;
+    isNotification?: boolean;
+    isBlinking?: boolean;
+    customClasses?: string;
+}
+
+declare class BadgeComponent {
+    get hostClasses(): string;
+    config: _angular_core.InputSignal<BadgeConfig | undefined>;
+    bgColor: _angular_core.InputSignal<BgColorStyleType>;
+    textColor: _angular_core.InputSignal<ColorStyleType | undefined>;
+    text: _angular_core.InputSignal<TextModel | undefined>;
+    isOutline: _angular_core.InputSignal<boolean>;
+    isPill: _angular_core.InputSignal<boolean>;
+    isNotification: _angular_core.InputSignal<boolean>;
+    isBlinking: _angular_core.InputSignal<boolean>;
+    customClasses: _angular_core.InputSignal<string>;
+    get badgeText(): string;
+    private readonly configModel;
+    private readonly classes;
+    private readonly fullClassString;
+    private readonly textService;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵ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>;
+}
+
+declare class UpdBadgeModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UpdBadgeModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<UpdBadgeModule, [typeof BadgeComponent], [typeof i2.CommonModule], [typeof BadgeComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<UpdBadgeModule>;
+}
+
+export { BadgeComponent, UpdBadgeModule };
+export type { BadgeConfig };

package/types/updevs-components-button.d.ts

@@ -0,0 +1,75 @@
+import * as _angular_core from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import * as _updevs_sdk_types from '@updevs/sdk/types';
+import { OptionalType, BrandType, LeftRightType, BgColorStyleType } from '@updevs/sdk/types';
+import * as i3 from '@updevs/icons';
+import { IconModel } from '@updevs/icons';
+import { TextModel } from '@updevs/sdk';
+import { ButtonModel } from '@updevs/sdk/layout';
+import * as i4 from '@updevs/components/badge';
+import { BadgeConfig } from '@updevs/components/badge';
+import * as i2 from '@angular/common';
+
+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: _angular_core.InputSignal<ButtonModel | undefined>;
+    text: _angular_core.InputSignal<TextModel | undefined>;
+    brandColorStyle: _angular_core.InputSignal<BrandType | undefined>;
+    customClasses: _angular_core.InputSignal<string | undefined>;
+    isOutline: _angular_core.InputSignal<boolean>;
+    isGhost: _angular_core.InputSignal<boolean>;
+    isSquare: _angular_core.InputSignal<boolean>;
+    isPill: _angular_core.InputSignal<boolean>;
+    isIcon: _angular_core.InputSignal<boolean>;
+    isLoading: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the button should act as a list (top-bottom alignment instead of left-right related to neighbors).
+     */
+    isList: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the button should be floating in the bottom right corner.
+     */
+    isFloating: _angular_core.InputSignal<boolean>;
+    isAction: _angular_core.InputSignal<boolean>;
+    isNavigationLink: _angular_core.InputSignal<boolean>;
+    isLink: _angular_core.InputSignal<boolean>;
+    shouldIgnoreBtnClass: _angular_core.InputSignal<boolean>;
+    iconModel: _angular_core.InputSignal<IconModel | undefined>;
+    iconPosition: _angular_core.InputSignal<LeftRightType>;
+    isDisabled: _angular_core.InputSignal<boolean>;
+    isActive: _angular_core.InputSignal<boolean>;
+    badgeConfig: _angular_core.InputSignal<BadgeConfig | undefined>;
+    colorStyle: _angular_core.InputSignal<BgColorStyleType | undefined>;
+    size: _angular_core.InputSignal<_updevs_sdk_types.SizeType>;
+    title: _angular_core.InputSignal<TextModel | undefined>;
+    stopPropagation: _angular_core.InputSignal<boolean>;
+    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: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵ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; }; "stopPropagation": { "alias": "stopPropagation"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], false, never>;
+}
+
+declare class UpdButtonModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UpdButtonModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<UpdButtonModule, [typeof ButtonComponent], [typeof i2.CommonModule, typeof i3.UpdIconsModule, typeof i4.UpdBadgeModule], [typeof ButtonComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<UpdButtonModule>;
+}
+
+export { ButtonComponent, UpdButtonModule };

package/types/updevs-components-calendar.d.ts

@@ -0,0 +1,175 @@
+import { OptionalType } from '@updevs/sdk/types';
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+import * as i4 from '@jsverse/transloco';
+import { TranslocoService } from '@jsverse/transloco';
+import * as i2 from '@angular/common';
+import * as i3 from '@updevs/components/button';
+import * as i5 from '@updevs/icons';
+
+interface CalendarUserEventModel<TValue> {
+    value: TValue;
+    event: Event;
+}
+
+/**
+ * A class representing a range of dates.
+ */
+declare class DateRangeModel {
+    /**
+     * The start date of the range.
+     */
+    readonly start?: Date | undefined;
+    /**
+     * The end date of the range.
+     */
+    readonly end?: Date | undefined;
+    constructor(
+    /**
+     * The start date of the range.
+     */
+    start?: Date | undefined, 
+    /**
+     * The end date of the range.
+     */
+    end?: Date | undefined);
+}
+
+declare enum CalendarViewEnum {
+    Days = "days",
+    Months = "months",
+    Years = "years"
+}
+
+interface CalendarDateModel {
+    date: Date;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isInRange?: boolean;
+    isRangeStart?: boolean;
+    isRangeEnd?: boolean;
+}
+
+interface CalendarMonthModel {
+    monthIndex: number;
+    name: string;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+}
+
+interface CalendarYearModel {
+    year: number;
+    isCurrentYear: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+}
+
+interface CalendarSelectedModel {
+    selectedDate?: Date;
+    startDate?: Date;
+    endDate?: Date;
+}
+
+/**
+ * Provides the default date range selection behavior.
+ */
+declare class CalendarRangeStrategyService {
+    private readonly dateService;
+    /**
+     * Called when the user has finished selecting a value.
+     * @param date Date that was selected. Will be null if the user cleared the selection.
+     * @param currentRange Range that is currently show in the calendar.
+     */
+    selectionFinished(date: OptionalType<Date>, currentRange: DateRangeModel): DateRangeModel;
+    /**
+     * Called when the user has activated a new date (e.g. by hovering over
+     * it or moving focus) and the calendar tries to display a date range.
+     *
+     * @param activeDate Date that the user has activated. Will be null if the user moved
+     *    focus to an element that's no a calendar cell.
+     * @param currentRange Range that is currently shown in the calendar.
+     */
+    createPreview(activeDate: OptionalType<Date>, currentRange: DateRangeModel): DateRangeModel;
+    /**
+     * Called when the user has dragged a date in the currently selected range to another
+     * date. Returns the date updated range that should result from this interaction.
+     *
+     * @param dragOrigin The date the user started dragging from.
+     * @param originalRange The originally selected date range.
+     * @param newDate The currently targeted date in the drag operation.
+     */
+    createDrag(dragOrigin: Date, originalRange: DateRangeModel, newDate: Date): OptionalType<DateRangeModel>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarRangeStrategyService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CalendarRangeStrategyService>;
+}
+
+type CalendarViewType = 'month' | 'year' | 'multi-year';
+
+declare class CalendarComponent implements OnInit {
+    readonly selectedDate: _angular_core.InputSignal<OptionalType<Date>>;
+    readonly selectedStartDate: _angular_core.InputSignal<OptionalType<Date>>;
+    readonly selectedEndDate: _angular_core.InputSignal<OptionalType<Date>>;
+    readonly minDate: _angular_core.InputSignal<OptionalType<Date>>;
+    readonly maxDate: _angular_core.InputSignal<OptionalType<Date>>;
+    readonly disabledDatesFilter: _angular_core.InputSignal<OptionalType<(date: Date) => boolean>>;
+    readonly isRange: _angular_core.InputSignal<boolean>;
+    readonly shouldRemoveExternalBorder: _angular_core.InputSignal<boolean>;
+    readonly selected: _angular_core.OutputEmitterRef<OptionalType<CalendarSelectedModel>>;
+    readonly monthChanged: _angular_core.OutputEmitterRef<Date>;
+    CalendarViewEnum: typeof CalendarViewEnum;
+    readonly currentView: _angular_core.WritableSignal<CalendarViewEnum>;
+    readonly currentDate: _angular_core.WritableSignal<Date>;
+    readonly yearRange: _angular_core.WritableSignal<{
+        start: number;
+        end: number;
+    }>;
+    readonly currentYear: _angular_core.Signal<number>;
+    readonly currentMonth: _angular_core.Signal<number>;
+    readonly currentMonthName: _angular_core.Signal<string>;
+    readonly calendarDays: _angular_core.Signal<CalendarDateModel[]>;
+    readonly calendarMonths: _angular_core.Signal<CalendarMonthModel[]>;
+    readonly calendarYears: _angular_core.Signal<CalendarYearModel[]>;
+    readonly weekDayNames: _angular_core.Signal<string[]>;
+    private readonly internalSelectedDate;
+    private readonly internalSelectedStartDate;
+    private readonly internalSelectedEndDate;
+    private readonly dateService;
+    private rangeSelectionState;
+    ngOnInit(): void;
+    onHeaderClick(): void;
+    onPreviousClick(): void;
+    onNextClick(): void;
+    onDateClick(dateModel: CalendarDateModel): void;
+    onMonthClick(monthModel: CalendarMonthModel): void;
+    onYearClick(yearModel: CalendarYearModel): void;
+    clearSelection(): void;
+    private syncInternalState;
+    private handleRangeSelection;
+    private generateCalendarDays;
+    private generateCalendarMonths;
+    private generateCalendarYears;
+    private isDateSelected;
+    private isDateInRange;
+    private isDateRangeStart;
+    private isDateRangeEnd;
+    private isDateDisabled;
+    private isMonthDisabled;
+    private isYearDisabled;
+    private updateYearRange;
+    private moveYearRange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "upd-calendar", never, { "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; "selectedStartDate": { "alias": "selectedStartDate"; "required": false; "isSignal": true; }; "selectedEndDate": { "alias": "selectedEndDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "disabledDatesFilter": { "alias": "disabledDatesFilter"; "required": false; "isSignal": true; }; "isRange": { "alias": "isRange"; "required": false; "isSignal": true; }; "shouldRemoveExternalBorder": { "alias": "shouldRemoveExternalBorder"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "monthChanged": "monthChanged"; }, never, never, false, never>;
+}
+
+declare class UpdCalendarModule {
+    constructor(translocoService: TranslocoService);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UpdCalendarModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<UpdCalendarModule, [typeof CalendarComponent], [typeof i2.CommonModule, typeof i3.UpdButtonModule, typeof i4.TranslocoDirective, typeof i5.UpdIconsModule], [typeof CalendarComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<UpdCalendarModule>;
+}
+
+export { CalendarComponent, CalendarRangeStrategyService, CalendarViewEnum, DateRangeModel, UpdCalendarModule };
+export type { CalendarDateModel, CalendarMonthModel, CalendarSelectedModel, CalendarUserEventModel, CalendarViewType, CalendarYearModel };

package/types/updevs-components-card.d.ts

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { ButtonModel } from '@updevs/sdk/layout';
+import { TopBottomLeftRightType, BgColorStyleType } from '@updevs/sdk/types';
+import * as i7 from '@updevs/icons';
+import { IconModel } from '@updevs/icons';
+import * as i6 from '@angular/common';
+import * as i8 from '@updevs/components/button';
+
+declare class CardActionsDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardActionsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CardActionsDirective, "ng-template[updCardActions]", never, {}, {}, never, never, false, never>;
+}
+
+declare class CardFooterDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardFooterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CardFooterDirective, "ng-template[updCardFooter]", never, {}, {}, never, never, false, never>;
+}
+
+declare class CardHeaderDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CardHeaderDirective, "ng-template[updCardHeader]", never, {}, {}, never, never, false, never>;
+}
+
+declare class CardImageDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardImageDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CardImageDirective, "ng-template[updCardImage]", never, {}, {}, never, never, false, never>;
+}
+
+type CardStateType = 'active' | 'inactive';
+
+type CardStyleType = 'stacked';
+
+type HoverEffectType = 'default' | 'rotate' | 'pop';
+
+type RibbonStyleType = 'default' | 'top' | 'bottom' | 'bookmark' | 'start';
+
+type StatusPositionType = 'top' | 'bottom' | 'start';
+
+declare class CardComponent implements OnInit, OnChanges {
+    wrapperClasses: string;
+    headerTemplate?: CardHeaderDirective;
+    footerTemplate?: CardFooterDirective;
+    imageTemplate?: CardImageDirective;
+    actionsTemplate?: CardActionsDirective;
+    title?: string;
+    subtitle?: string;
+    hoverEffect?: HoverEffectType;
+    state?: CardStateType;
+    type?: CardStyleType;
+    imagePosition?: TopBottomLeftRightType;
+    bgColor?: BgColorStyleType;
+    stampIcon?: IconModel;
+    stampBackground: BgColorStyleType;
+    statusBackground?: BgColorStyleType;
+    statusPosition: StatusPositionType;
+    ribbonBackground?: BgColorStyleType;
+    ribbonStyle: RibbonStyleType;
+    ribbonIcon?: IconModel;
+    ribbonText?: string;
+    rotate?: 'right' | 'left';
+    removeBorder: boolean;
+    useLightHeader: boolean;
+    /**
+     * Whether the header should be displayed.
+     */
+    showHeader: boolean;
+    isFooterTransparent: boolean;
+    footerText?: string;
+    showProgressBar: boolean;
+    progress?: number;
+    actions: ButtonModel[];
+    classes: string[];
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private updateClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "upd-card", never, { "wrapperClasses": { "alias": "wrapperClasses"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "hoverEffect": { "alias": "hoverEffect"; "required": false; }; "state": { "alias": "state"; "required": false; }; "type": { "alias": "type"; "required": false; }; "imagePosition": { "alias": "imagePosition"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "stampIcon": { "alias": "stampIcon"; "required": false; }; "stampBackground": { "alias": "stampBackground"; "required": false; }; "statusBackground": { "alias": "statusBackground"; "required": false; }; "statusPosition": { "alias": "statusPosition"; "required": false; }; "ribbonBackground": { "alias": "ribbonBackground"; "required": false; }; "ribbonStyle": { "alias": "ribbonStyle"; "required": false; }; "ribbonIcon": { "alias": "ribbonIcon"; "required": false; }; "ribbonText": { "alias": "ribbonText"; "required": false; }; "rotate": { "alias": "rotate"; "required": false; }; "removeBorder": { "alias": "removeBorder"; "required": false; }; "useLightHeader": { "alias": "useLightHeader"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "isFooterTransparent": { "alias": "isFooterTransparent"; "required": false; }; "footerText": { "alias": "footerText"; "required": false; }; "showProgressBar": { "alias": "showProgressBar"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, {}, ["headerTemplate", "footerTemplate", "imageTemplate", "actionsTemplate"], ["*"], false, never>;
+}
+
+declare class UpdCardModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdCardModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UpdCardModule, [typeof CardComponent, typeof CardHeaderDirective, typeof CardFooterDirective, typeof CardImageDirective, typeof CardActionsDirective], [typeof i6.CommonModule, typeof i7.UpdIconsModule, typeof i8.UpdButtonModule], [typeof CardComponent, typeof CardHeaderDirective, typeof CardFooterDirective, typeof CardImageDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UpdCardModule>;
+}
+
+export { CardActionsDirective, CardComponent, CardFooterDirective, CardHeaderDirective, CardImageDirective, UpdCardModule };
+export type { CardStateType, CardStyleType, HoverEffectType, RibbonStyleType, StatusPositionType };

package/types/updevs-components-drag-and-drop.d.ts

@@ -0,0 +1,74 @@
+import { TextModel, TextService } from '@updevs/sdk';
+import * as _angular_core from '@angular/core';
+import { WritableSignal, OnInit } from '@angular/core';
+import * as i2 from '@angular/common';
+import * as i3 from '@updevs/icons';
+
+interface DragAndDropItem {
+    name: string;
+    text: TextModel;
+    isDisabled?: boolean;
+    canDrag?: boolean;
+}
+
+interface DragAndDropColumnConfig {
+    name: string;
+    title?: TextModel;
+    items: DragAndDropItem[];
+    canBeEmpty?: boolean;
+}
+
+interface DragAndDropConfig {
+    columns: DragAndDropColumnConfig[];
+    showHandler?: boolean;
+    canReorder?: boolean;
+}
+
+declare class DragAndDropItemModel implements DragAndDropItem {
+    name: string;
+    text: TextModel;
+    isDisabled: boolean;
+    canDrag: boolean;
+    canBeEmpty: boolean;
+    isBeingDragged: _angular_core.WritableSignal<boolean>;
+    origin?: string;
+    get isDraggable(): boolean;
+    constructor(init: DragAndDropItem);
+}
+
+declare class DragAndDropColumnModel {
+    name: string;
+    title?: TextModel;
+    items: WritableSignal<DragAndDropItemModel[]>;
+    constructor(init: DragAndDropColumnConfig);
+}
+
+declare class DragAndDropComponent implements OnInit {
+    config: _angular_core.InputSignal<DragAndDropConfig>;
+    columns: _angular_core.ModelSignal<DragAndDropColumnModel[]>;
+    readonly showHandler: _angular_core.Signal<boolean>;
+    readonly canReorder: _angular_core.Signal<boolean>;
+    readonly textService: TextService;
+    private readonly isReordering;
+    private readonly draggedItem;
+    private dragEnterCounter;
+    ngOnInit(): void;
+    canShowHandler(item: DragAndDropItemModel): boolean;
+    startDrag(event: DragEvent, item: DragAndDropItemModel, origin: string): void;
+    endDrag(item: DragAndDropItemModel): void;
+    drop(event: DragEvent, destination: string): void;
+    dragOver(event: DragEvent, destination: string): void;
+    dragEnter(): void;
+    dragLeave(columnName: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DragAndDropComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DragAndDropComponent, "upd-drag-and-drop", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, { "columns": "columnsChange"; }, never, never, false, never>;
+}
+
+declare class UpdDragAndDropModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UpdDragAndDropModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<UpdDragAndDropModule, [typeof DragAndDropComponent], [typeof i2.CommonModule, typeof i3.UpdIconsModule], [typeof DragAndDropComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<UpdDragAndDropModule>;
+}
+
+export { DragAndDropColumnModel, DragAndDropComponent, UpdDragAndDropModule };
+export type { DragAndDropColumnConfig, DragAndDropConfig, DragAndDropItem };