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

package/list/list.component.d.ts

@@ -0,0 +1,61 @@
+import { OnInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { ListItem } from './models/list-item';
+import { ListItemModel } from './models/list-item.model';
+import * as i0 from "@angular/core";
+export declare class ListComponent implements OnInit, OnChanges {
+    localWrapperClasses: string;
+    /**
+     * List items.
+     * If provided, the single will be considered static.
+     */
+    items?: ListItem[];
+    /**
+     * Whether the content should overflow or not.
+     */
+    shouldOverflow: boolean;
+    /**
+     * Whether the list will fit the layout of the container.
+     * If set to false, the list's round borders will be visible. It'll have a detached behavior.
+     */
+    isFlush: boolean;
+    isVisible: boolean;
+    isHoverable: boolean;
+    shouldDisplayItemsCounter: boolean;
+    wrapperClasses: string;
+    /**
+     * Maximum height of the component.
+     * Note: The unit should also be provided, i.e.: 350px, 35rem, etc.
+     */
+    maxHeight?: string;
+    /**
+     * Translation key used to inform no records have been found.
+     * If translation is not being used, you can insert the custom text here as well.
+     */
+    noRecordsFoundKey?: string;
+    /**
+     * Translation key used to describe 1 item found.
+     * If translation is not being used, you can insert the custom text here as well.
+     */
+    itemFoundKey?: string;
+    /**
+     * Translation key used to describe items (plural) found.
+     * If translation is not being used, you can insert the custom text here as well.
+     */
+    itemsFoundKey?: string;
+    readonly checkboxChanged: EventEmitter<ListItem>;
+    readonly selectedItem: EventEmitter<ListItem>;
+    listItems: ListItemModel[];
+    currentSelection: ListItem[];
+    private localBackupItems;
+    private readonly renderer;
+    private readonly elementRef;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    onCheckboxChange(item: ListItem, isChecked: boolean): void;
+    onSelectItem(evt: any, item: ListItem): void;
+    private setupItems;
+    private setupStyle;
+    private updateWrapperClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "upd-list", never, { "items": { "alias": "items"; "required": false; }; "shouldOverflow": { "alias": "shouldOverflow"; "required": false; }; "isFlush": { "alias": "isFlush"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "isHoverable": { "alias": "isHoverable"; "required": false; }; "shouldDisplayItemsCounter": { "alias": "shouldDisplayItemsCounter"; "required": false; }; "wrapperClasses": { "alias": "wrapperClasses"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "noRecordsFoundKey": { "alias": "noRecordsFoundKey"; "required": false; }; "itemFoundKey": { "alias": "itemFoundKey"; "required": false; }; "itemsFoundKey": { "alias": "itemsFoundKey"; "required": false; }; }, { "checkboxChanged": "checkboxChanged"; "selectedItem": "selectedItem"; }, never, never, false, never>;
+}

package/list/{src/models/list-item.ts → models/list-item.d.ts}

@@ -1,7 +1,5 @@
 import { BgColorStyleType } from '@updevs/sdk/layout';
-
 import { BadgePositionType } from './badge-position.type';
-
 export interface ListItem {
     id?: any;
     text?: string;

package/list/{src/models/list-item.model.ts → models/list-item.model.d.ts}

@@ -1,9 +1,7 @@
 import { BgColorStyleType } from '@updevs/sdk/layout';
-
 import { ListItem } from './list-item';
 import { BadgePositionType } from './badge-position.type';
-
-export class ListItemModel implements ListItem {
+export declare class ListItemModel implements ListItem {
     id?: any;
     text?: string;
     description?: string;
@@ -19,17 +17,8 @@ export class ListItemModel implements ListItem {
     badgeText?: string;
     badgePosition?: BadgePositionType;
     children?: ListItemModel[];
-    get hasLeftBox(): boolean {
-        return !!this.leftBoxImage || !!this.leftBoxText || !!this.badgeColor || this.hasCheckbox === true;
-    }
-    get hasLeftBadge(): boolean {
-        return !!this.badgeColor && this.badgePosition === 'left';
-    }
-    get hasBottomRightBadge(): boolean {
-        return !!this.badgeColor && this.badgePosition === 'left-box-bottom-right';
-    }
-
-    constructor(init?: ListItem) {
-        Object.assign(this, init);
-    }
+    get hasLeftBox(): boolean;
+    get hasLeftBadge(): boolean;
+    get hasBottomRightBadge(): boolean;
+    constructor(init?: ListItem);
 }

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

@@ -0,0 +1,13 @@
+import { TranslocoService } from '@ngneat/transloco';
+import * as i0 from "@angular/core";
+import * as i1 from "./list.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@ngneat/transloco";
+import * as i4 from "@updevs/components/form-controls/checkbox";
+import * as i5 from "@updevs/icons";
+export declare class UpdListModule {
+    constructor(translocoService: TranslocoService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UpdListModule, [typeof i1.ListComponent], [typeof i2.CommonModule, typeof i3.TranslocoModule, typeof i4.UpdCheckboxModule, typeof i5.UpdIconsModule], [typeof i1.ListComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UpdListModule>;
+}

package/package.json

@@ -1,22 +1,115 @@
 {
-    "name": "@updevs/components",
-    "version": "1.0.0-alpha.5",
-    "scripts": {
-        "build": "ng build @updevs/components"
-    },
-    "peerDependencies": {
-        "@angular/common": "^16.2.7",
-        "@angular/core": "^16.2.7",
-        "@ngneat/transloco": "^6.0.0",
-        "@updevs/icons": "^1.0.4",
-        "@updevs/sdk": "^1.0.0-alpha.15"
-    },
-    "dependencies": {
-        "tslib": "^2.3.0"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "sideEffects": false,
-    "gitHead": "fefaa9763a38b9d550479ba3ada524dff43094bf"
-}
+  "name": "@updevs/components",
+  "version": "1.0.0-alpha.8",
+  "peerDependencies": {
+    "@angular/common": "^18.0.1",
+    "@angular/core": "^18.0.1",
+    "@ngneat/transloco": "^6.0.0",
+    "@updevs/icons": "^1.0.7",
+    "@updevs/sdk": "^1.0.0-alpha.18"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/updevs-components.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/updevs-components.mjs",
+      "esm": "./esm2022/updevs-components.mjs",
+      "default": "./fesm2022/updevs-components.mjs"
+    },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "esm2022": "./esm2022/button/updevs-components-button.mjs",
+      "esm": "./esm2022/button/updevs-components-button.mjs",
+      "default": "./fesm2022/updevs-components-button.mjs"
+    },
+    "./card": {
+      "types": "./card/index.d.ts",
+      "esm2022": "./esm2022/card/updevs-components-card.mjs",
+      "esm": "./esm2022/card/updevs-components-card.mjs",
+      "default": "./fesm2022/updevs-components-card.mjs"
+    },
+    "./dropdown": {
+      "types": "./dropdown/index.d.ts",
+      "esm2022": "./esm2022/dropdown/updevs-components-dropdown.mjs",
+      "esm": "./esm2022/dropdown/updevs-components-dropdown.mjs",
+      "default": "./fesm2022/updevs-components-dropdown.mjs"
+    },
+    "./form": {
+      "types": "./form/index.d.ts",
+      "esm2022": "./esm2022/form/updevs-components-form.mjs",
+      "esm": "./esm2022/form/updevs-components-form.mjs",
+      "default": "./fesm2022/updevs-components-form.mjs"
+    },
+    "./layout": {
+      "types": "./layout/index.d.ts",
+      "esm2022": "./esm2022/layout/updevs-components-layout.mjs",
+      "esm": "./esm2022/layout/updevs-components-layout.mjs",
+      "default": "./fesm2022/updevs-components-layout.mjs"
+    },
+    "./link": {
+      "types": "./link/index.d.ts",
+      "esm2022": "./esm2022/link/updevs-components-link.mjs",
+      "esm": "./esm2022/link/updevs-components-link.mjs",
+      "default": "./fesm2022/updevs-components-link.mjs"
+    },
+    "./list": {
+      "types": "./list/index.d.ts",
+      "esm2022": "./esm2022/list/updevs-components-list.mjs",
+      "esm": "./esm2022/list/updevs-components-list.mjs",
+      "default": "./fesm2022/updevs-components-list.mjs"
+    },
+    "./popover": {
+      "types": "./popover/index.d.ts",
+      "esm2022": "./esm2022/popover/updevs-components-popover.mjs",
+      "esm": "./esm2022/popover/updevs-components-popover.mjs",
+      "default": "./fesm2022/updevs-components-popover.mjs"
+    },
+    "./form-controls/checkbox": {
+      "types": "./form-controls/checkbox/index.d.ts",
+      "esm2022": "./esm2022/form-controls/checkbox/updevs-components-form-controls-checkbox.mjs",
+      "esm": "./esm2022/form-controls/checkbox/updevs-components-form-controls-checkbox.mjs",
+      "default": "./fesm2022/updevs-components-form-controls-checkbox.mjs"
+    },
+    "./form-controls/input": {
+      "types": "./form-controls/input/index.d.ts",
+      "esm2022": "./esm2022/form-controls/input/updevs-components-form-controls-input.mjs",
+      "esm": "./esm2022/form-controls/input/updevs-components-form-controls-input.mjs",
+      "default": "./fesm2022/updevs-components-form-controls-input.mjs"
+    },
+    "./form-controls/radio": {
+      "types": "./form-controls/radio/index.d.ts",
+      "esm2022": "./esm2022/form-controls/radio/updevs-components-form-controls-radio.mjs",
+      "esm": "./esm2022/form-controls/radio/updevs-components-form-controls-radio.mjs",
+      "default": "./fesm2022/updevs-components-form-controls-radio.mjs"
+    },
+    "./form-controls/select": {
+      "types": "./form-controls/select/index.d.ts",
+      "esm2022": "./esm2022/form-controls/select/updevs-components-form-controls-select.mjs",
+      "esm": "./esm2022/form-controls/select/updevs-components-form-controls-select.mjs",
+      "default": "./fesm2022/updevs-components-form-controls-select.mjs"
+    },
+    "./form-controls/textarea": {
+      "types": "./form-controls/textarea/index.d.ts",
+      "esm2022": "./esm2022/form-controls/textarea/updevs-components-form-controls-textarea.mjs",
+      "esm": "./esm2022/form-controls/textarea/updevs-components-form-controls-textarea.mjs",
+      "default": "./fesm2022/updevs-components-form-controls-textarea.mjs"
+    },
+    "./form-controls/time-picker": {
+      "types": "./form-controls/time-picker/index.d.ts",
+      "esm2022": "./esm2022/form-controls/time-picker/updevs-components-form-controls-time-picker.mjs",
+      "esm": "./esm2022/form-controls/time-picker/updevs-components-form-controls-time-picker.mjs",
+      "default": "./fesm2022/updevs-components-form-controls-time-picker.mjs"
+    }
+  }
+}

package/popover/popover.component.d.ts

@@ -0,0 +1,22 @@
+import { SimpleChanges, OnInit, OnChanges, TemplateRef } from '@angular/core';
+import { TopBottomLeftRightType } from '@updevs/sdk/types';
+import * as i0 from "@angular/core";
+export declare class PopoverComponent implements OnInit, OnChanges {
+    classes: string;
+    popperPlacement: string;
+    readonly role = "tooltip";
+    title?: string;
+    text?: string;
+    titleTemplate?: TemplateRef<any>;
+    template?: TemplateRef<any>;
+    placement: TopBottomLeftRightType;
+    customClasses?: string;
+    get isVisible(): boolean;
+    private _isVisible;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    setVisible(isVisible: boolean): void;
+    private updateClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "upd-popover", never, { "title": { "alias": "title"; "required": false; }; "text": { "alias": "text"; "required": false; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; }; "template": { "alias": "template"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "customClasses": { "alias": "customClasses"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/popover/popover.directive.d.ts

@@ -0,0 +1,33 @@
+import { TemplateRef } from '@angular/core';
+import { TopBottomLeftRightType } from '@updevs/sdk/types';
+import * as i0 from "@angular/core";
+export declare class PopoverDirective {
+    text?: string;
+    title?: string;
+    popoverTitleTemplate?: TemplateRef<any>;
+    popoverTemplate?: TemplateRef<any>;
+    placement: TopBottomLeftRightType;
+    customClasses?: string;
+    /**
+     * This makes the popover behave like a tooltip.
+     * It means it'll show/hide depending on whether the mouse is over or not the element.
+     */
+    actAsTooltip: boolean;
+    private popoverComponentRef?;
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly viewContainerRef;
+    private readonly ngZone;
+    private readonly injector;
+    private readonly positioningService;
+    private readonly dynamicComponentLoaderService;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onClick(): void;
+    private initPopover;
+    private disposePopover;
+    private setupPopover;
+    private updatePosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverDirective, "[updPopover]", never, { "text": { "alias": "updPopover"; "required": false; }; "title": { "alias": "updPopoverTitle"; "required": false; }; "popoverTitleTemplate": { "alias": "updPopoverTitleTemplate"; "required": false; }; "popoverTemplate": { "alias": "updPopoverTemplate"; "required": false; }; "placement": { "alias": "updPopoverPlacement"; "required": false; }; "customClasses": { "alias": "updPopoverCustomClasses"; "required": false; }; "actAsTooltip": { "alias": "updPopoverActAsTooltip"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./popover.component";
+import * as i2 from "./popover.directive";
+import * as i3 from "@angular/common";
+export declare class UpdPopoverModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdPopoverModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UpdPopoverModule, [typeof i1.PopoverComponent, typeof i2.PopoverDirective], [typeof i3.CommonModule], [typeof i1.PopoverComponent, typeof i2.PopoverDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UpdPopoverModule>;
+}

package/CHANGELOG.md

@@ -1,8 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# 1.0.0-alpha.1 (2023-01-16)
-
-**Note:** Version bump only for package @updevs/components

package/button/index.ts

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

package/button/ng-package.json

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

package/button/src/button.component.html

@@ -1,8 +0,0 @@
-<ng-template #userContentTpl>
-    <ng-content></ng-content>
-</ng-template>
-
-<ng-container *ngIf="!text; else textTpl" [ngTemplateOutlet]="userContentTpl"></ng-container>
-<ng-template #textTpl>
-    {{text}}
-</ng-template>

package/button/src/button.component.scss

@@ -1,5 +0,0 @@
-.btn-icon {
-    .icon {
-        margin: 0 calc(-1 * var(--upd-btn-padding-x)) 0 calc(-1 * var(--upd-btn-padding-x)) !important;
-    }
-}

package/button/src/button.component.spec.ts

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

package/button/src/button.component.ts

@@ -1,154 +0,0 @@
-import {
-    Component,
-    Input,
-    ViewEncapsulation,
-    Output,
-    EventEmitter,
-    OnInit,
-    OnChanges,
-    SimpleChanges,
-    HostBinding,
-    HostListener
-} from '@angular/core';
-import { ColorStyleType, BrandType, ButtonModel } from '@updevs/sdk/layout';
-
-@Component({
-    selector: 'upd-button',
-    templateUrl: './button.component.html',
-    styleUrls: ['./button.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class ButtonComponent implements OnInit, OnChanges {
-    @HostBinding('class') classes: string[] = [];
-
-    @Input() text?: string;
-    @Input() model?: ButtonModel;
-    @Input() colorStyle?: ColorStyleType;
-    @Input() brandColorStyle?: BrandType;
-    @Input() customClasses?: string;
-    @Input() isActive = false;
-    @Input() isDisabled = false;
-    @Input() isOutline = false;
-    @Input() isGhost = false;
-    @Input() isSquare = false;
-    @Input() isPill = false;
-    @Input() isIcon = false;
-    @Input() isLoading = false;
-    /**
-     * Whether the button should act as a list (top-bottom alignment instead of left-right related to neighbors).
-     */
-    @Input() isList = false;
-    /**
-     * Whether the button should be floating in the bottom right corner.
-     */
-    @Input() isFloating = false;
-    @Input() isAction = false;
-    @Input() isNavigationLink = false;
-    @Input() shouldIgnoreBtnClass = false;
-
-    /**
-     * 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.
-     */
-    @Output() readonly clicked = new EventEmitter<any>();
-
-    ngOnInit(): void {
-        this.setupFromModel();
-        this.updateClasses();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (!!changes['model']) {
-            this.setupFromModel();
-        }
-
-        this.updateClasses();
-    }
-
-    @HostListener('click', ['$event'])
-    onClick(event: MouseEvent): void {
-        if (!!this.model && !!this.model.clickFunction) {
-            this.model.clickFunction(event);
-        } else {
-            this.clicked.emit(undefined);
-        }
-
-        event.stopPropagation();
-    }
-
-    private updateClasses(): void {
-        const outlineCls = this.isOutline ? 'outline-' : '';
-        const ghostCls = this.isGhost ? 'ghost-' : '';
-        const lClasses: string[] = this.shouldIgnoreBtnClass ? [] : ['btn'];
-
-        if (!!outlineCls || !!ghostCls || !!this.colorStyle || !!this.brandColorStyle) {
-            lClasses.push(`btn-${outlineCls || ghostCls}${this.colorStyle || this.brandColorStyle}`);
-        }
-
-        if (this.isSquare) {
-            lClasses.push('btn-square');
-        }
-
-        if (this.isPill) {
-            lClasses.push('btn-pill');
-        }
-
-        if (this.isIcon) {
-            lClasses.push('btn-icon');
-        }
-
-        if (this.isLoading) {
-            lClasses.push('btn-loading');
-        }
-
-        if (this.isList) {
-            lClasses.push('btn-list');
-        }
-
-        if (this.isFloating) {
-            lClasses.push('btn-floating');
-        }
-
-        if (this.isAction) {
-            lClasses.push('btn-action');
-        }
-
-        if (this.isNavigationLink) {
-            lClasses.push('nav-link');
-        }
-
-        if (this.isActive) {
-            lClasses.push('active');
-        }
-
-        if (this.isDisabled) {
-            lClasses.push('disabled');
-        }
-
-        this.classes = [...lClasses, ...(this.customClasses?.split(' ') || [])];
-    }
-
-    private setupFromModel(): void {
-        if (!this.model) {
-            return;
-        }
-
-        this.text = this.model.text;
-        this.colorStyle = this.model.colorStyle;
-        this.brandColorStyle = this.model.brandColorStyle;
-        this.customClasses += this.model.customClasses || '';
-        this.isActive = this.model.isActive;
-        this.isDisabled = this.model.isDisabled;
-        this.isOutline = this.model.isOutline;
-        this.isGhost = this.model.isGhost;
-        this.isSquare = this.model.isSquare;
-        this.isPill = this.model.isPill;
-        this.isIcon = this.model.isIcon;
-        this.isLoading = this.model.isLoading;
-        this.isList = this.model.isList;
-        this.isFloating = this.model.isFloating;
-        this.isAction = this.model.isAction;
-        this.isNavigationLink = this.model.isNavigationLink;
-    }
-}

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

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ButtonComponent } from './button.component';
-
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    declarations: [
-        ButtonComponent
-    ],
-    exports: [
-        ButtonComponent
-    ]
-})
-export class UpdButtonModule {}

package/card/index.ts

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

package/card/ng-package.json

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