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

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/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"
-    }
-}

package/card/src/card.component.html

@@ -1,105 +0,0 @@
-<ng-template *ngIf="!hoverEffect; else linkTpl" [ngTemplateOutlet]="structureTpl"></ng-template>
-
-<!-- Template for cards that are links -->
-<ng-template #linkTpl>
-    <a href="#" class="card" [ngClass]="classes">
-        <ng-template [ngTemplateOutlet]="structureTpl"></ng-template>
-    </a>
-</ng-template>
-
-<ng-template #structureTpl>
-    <!-- Ribbon -->
-    <div *ngIf="!!ribbonBackground" class="ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}">
-        <span *ngIf="!!ribbonText; else ribbonIconTpl">{{ribbonText}}</span>
-        <ng-template #ribbonIconTpl>
-            <upd-icon [model]="ribbonIcon" wrapperClasses="icon" [removeDefaultClasses]="true"></upd-icon>
-        </ng-template>
-    </div>
-
-    <!-- Status -->
-    <div *ngIf="!!statusBackground" class="card-status-{{statusPosition}} bg-{{statusBackground}}"></div>
-
-    <!-- Stamp -->
-    <div *ngIf="!!stampIcon" class="card-stamp">
-        <div class="card-stamp-icon bg-{{stampBackground}}">
-            <upd-icon [model]="stampIcon" wrapperClasses="icon" [removeDefaultClasses]="true"></upd-icon>
-        </div>
-    </div>
-
-    <!-- Header section -->
-    <div *ngIf="showHeader && (!!title || !!headerTemplate?.templateRef)" class="card-header" [class.card-header-light]="useLightHeader">
-        <ng-container *ngIf="!headerTemplate?.templateRef; else customHeaderTpl">
-            <h3 class="card-title">{{title}} <span *ngIf="!!subtitle" class="card-subtitle">{{subtitle}}</span></h3>
-        </ng-container>
-        <ng-template #customHeaderTpl [ngTemplateOutlet]="headerTemplate?.templateRef || null"></ng-template>
-
-        <!-- Actions -->
-        <div *ngIf="!!actionsTemplate || actions.length > 0" class="card-actions">
-            <ng-container *ngIf="actions.length > 0; else customActionsTpl">
-                <upd-button *ngFor="let btn of actions" [model]="btn" customClasses="me-1"></upd-button>
-            </ng-container>
-            <ng-template #customActionsTpl [ngTemplateOutlet]="actionsTemplate?.templateRef || null"></ng-template>
-        </div>
-    </div>
-
-    <!-- Body -->
-    <ng-container *ngIf="!!imageTemplate; else bodyTpl">
-        <ng-template *ngIf="imagePosition === 'left' || imagePosition === 'right'; else bodyWithTopBottomImageTpl"
-            [ngTemplateOutlet]="bodyWithSideImageTpl"></ng-template>
-    </ng-container>
-
-    <!-- Footer -->
-    <div *ngIf="!!footerText || !!footerTemplate" class="card-footer" [class.card-footer-transparent]="isFooterTransparent">
-        <ng-container *ngIf="!footerTemplate?.templateRef; else customFooterTpl">
-            <span *ngIf="!!footerText">{{footerText}}</span>
-        </ng-container>
-        <ng-template #customFooterTpl [ngTemplateOutlet]="footerTemplate?.templateRef || null"></ng-template>
-    </div>
-
-    <!-- Progress bar -->
-    <div *ngIf="showProgressBar" class="progress progress-sm card-progress">
-        <div class="progress-bar" [style.width.%]="progress" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0"
-            aria-valuemax="100">
-        </div>
-    </div>
-</ng-template>
-
-<!-- Body with an image on either side -->
-<ng-template #bodyWithSideImageTpl>
-    <div class="row row-0">
-        <div class="col-3" [class.order-md-last]="imagePosition === 'right'">
-            <div class="card-image-{{imagePosition}}">
-                <ng-template [ngTemplateOutlet]="imageTemplate!.templateRef"></ng-template>
-            </div>
-        </div>
-        <div class="col">
-            <ng-template [ngTemplateOutlet]="bodyTpl"></ng-template>
-        </div>
-    </div>
-</ng-template>
-
-<!-- Body with an image on top or bottom -->
-<ng-template #bodyWithTopBottomImageTpl>
-    <div *ngIf="imagePosition === 'top'" class="img-responsive-21x9 card-img-top">
-        <div class="card-image-{{imagePosition}}">
-            <ng-template [ngTemplateOutlet]="imageTemplate!.templateRef"></ng-template>
-        </div>
-    </div>
-    <ng-template [ngTemplateOutlet]="bodyTpl"></ng-template>
-    <div *ngIf="imagePosition === 'bottom'" class="img-responsive-21x9 card-img-bottom">
-        <div class="card-image-{{imagePosition}}">
-            <ng-template [ngTemplateOutlet]="imageTemplate!.templateRef"></ng-template>
-        </div>
-    </div>
-</ng-template>
-
-<!-- Body -->
-<ng-template #bodyTpl>
-    <div class="card-body">
-        <!-- If title was set, but the header section is hidden, we add the title to the body -->
-        <ng-container *ngIf="!showHeader && !!title">
-            <h3 class="card-title">{{title}} <span *ngIf="!!subtitle" class="card-subtitle">{{subtitle}}</span></h3>
-        </ng-container>
-        <ng-content></ng-content>
-    </div>
-</ng-template>

package/card/src/card.component.scss

@@ -1,47 +0,0 @@
-.card-image-right {
-    @extend .w-100 !optional;
-    @extend .h-100 !optional;
-
-    > img {
-        @extend .w-100 !optional;
-        @extend .h-100 !optional;
-        @extend .object-cover !optional;
-        @extend .card-img-end !optional;
-    }
-}
-
-.card-image-left {
-    @extend .w-100 !optional;
-    @extend .h-100 !optional;
-
-    > img {
-        @extend .w-100 !optional;
-        @extend .h-100 !optional;
-        @extend .object-cover !optional;
-        @extend .card-img-start !optional;
-    }
-}
-
-.card-image-top {
-    @extend .w-100 !optional;
-    @extend .h-100 !optional;
-
-    > img {
-        @extend .w-100 !optional;
-        @extend .h-100 !optional;
-        @extend .object-cover !optional;
-        @extend .card-img-top !optional;
-    }
-}
-
-.card-image-bottom {
-    @extend .w-100 !optional;
-    @extend .h-100 !optional;
-
-    > img {
-        @extend .w-100 !optional;
-        @extend .h-100 !optional;
-        @extend .object-cover !optional;
-        @extend .card-img-bottom !optional;
-    }
-}

package/card/src/card.component.spec.ts

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

package/card/src/card.component.ts

@@ -1,112 +0,0 @@
-import {
-    Component,
-    Input,
-    ContentChild,
-    SimpleChanges,
-    OnInit,
-    OnChanges,
-    ViewEncapsulation, HostBinding
-} from '@angular/core';
-import { BgColorStyleType, ButtonModel } from '@updevs/sdk/layout';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-import { IconModel } from '@updevs/icons';
-
-import { CardFooterDirective } from './directives/card-footer.directive';
-import { CardHeaderDirective } from './directives/card-header.directive';
-import { HoverEffectType } from './types/hover-effect.type';
-import { CardStateType } from './types/card-state.type';
-import { StatusPositionType } from './types/status-position.type';
-import { RibbonStyleType } from './types/ribbon-style.type';
-import { CardStyleType } from './types/card-style.type';
-import { CardImageDirective } from './directives/card-image.directive';
-import { CardActionsDirective } from './directives/card-actions.directive';
-
-@Component({
-    selector: 'upd-card',
-    templateUrl: './card.component.html',
-    styleUrls: ['./card.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class CardComponent implements OnInit, OnChanges {
-    @HostBinding('class') @Input() wrapperClasses = '';
-    @ContentChild(CardHeaderDirective) headerTemplate?: CardHeaderDirective;
-    @ContentChild(CardFooterDirective) footerTemplate?: CardFooterDirective;
-    @ContentChild(CardImageDirective) imageTemplate?: CardImageDirective;
-    @ContentChild(CardActionsDirective) actionsTemplate?: CardActionsDirective;
-
-    @Input() title?: string;
-    @Input() subtitle?: string;
-    @Input() hoverEffect?: HoverEffectType;
-    @Input() state?: CardStateType;
-    @Input() type?: CardStyleType;
-    @Input() imagePosition?: TopBottomLeftRightType;
-    @Input() bgColor?: BgColorStyleType;
-    @Input() stampIcon?: IconModel;
-    @Input() stampBackground: BgColorStyleType = 'primary';
-    @Input() statusBackground?: BgColorStyleType;
-    @Input() statusPosition: StatusPositionType = 'top';
-    @Input() ribbonBackground?: BgColorStyleType;
-    @Input() ribbonStyle: RibbonStyleType = 'default';
-    @Input() ribbonIcon?: IconModel = { tablerIcon: 'star' };
-    @Input() ribbonText?: string;
-    @Input() rotate?: 'right' | 'left';
-    @Input() removeBorder = false;
-    @Input() useLightHeader = false;
-    /**
-     * Whether the header should be displayed.
-     */
-    @Input() showHeader = true;
-    @Input() isFooterTransparent = false;
-    @Input() footerText?: string;
-    @Input() showProgressBar = false;
-    @Input() progress?: number;
-    @Input() actions: ButtonModel[] = [];
-
-    classes: string[] = [];
-
-    ngOnInit(): void {
-        this.updateClasses();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.updateClasses();
-    }
-
-    private updateClasses(): void {
-        const lClasses: string[] = [];
-
-        if (this.removeBorder) {
-            lClasses.push('card-borderless');
-        }
-
-        if (!!this.hoverEffect) {
-            lClasses.push('card-link');
-
-            if (this.hoverEffect !== 'default') {
-                lClasses.push(`card-link-${this.hoverEffect}`);
-            }
-        }
-
-        if (!!this.state) {
-            lClasses.push(`card-${this.state}`);
-        }
-
-        if (!!this.bgColor) {
-            lClasses.push(`bg-${this.bgColor}`);
-        }
-
-        if (!!this.rotate) {
-            lClasses.push(`card-rotate-${this.rotate}`);
-        }
-
-        if (!!this.type) {
-            lClasses.push(`card-${this.type}`);
-        }
-
-        if (!!this.hoverEffect) {
-            this.classes = [...lClasses];
-        } else {
-            this.wrapperClasses = 'card ' + lClasses.join(' ');
-        }
-    }
-}

package/card/src/directives/card-actions.directive.spec.ts

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

package/card/src/directives/card-actions.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updCardActions]'
-})
-export class CardActionsDirective {
-    constructor(
-        public templateRef: TemplateRef<any>
-    ) {
-    }
-}

package/card/src/directives/card-footer.directive.spec.ts

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

package/card/src/directives/card-footer.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updCardFooter]'
-})
-export class CardFooterDirective {
-    constructor(
-        public templateRef: TemplateRef<any>
-    ) {
-    }
-}

package/card/src/directives/card-header.directive.spec.ts

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

package/card/src/directives/card-header.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updCardHeader]'
-})
-export class CardHeaderDirective {
-    constructor(
-        public templateRef: TemplateRef<any>
-    ) {
-    }
-}

package/card/src/directives/card-image.directive.spec.ts

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

package/card/src/directives/card-image.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updCardImage]'
-})
-export class CardImageDirective {
-    constructor(
-        public templateRef: TemplateRef<any>
-    ) {
-    }
-}

package/card/src/types/public-api.ts

@@ -1,5 +0,0 @@
-export * from './card-state.type';
-export * from './card-style.type';
-export * from './hover-effect.type';
-export * from './ribbon-style.type';
-export * from './status-position.type';

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

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdButtonModule } from '@updevs/components/button';
-
-import { CardComponent } from './card.component';
-import { CardHeaderDirective } from './directives/card-header.directive';
-import { CardFooterDirective } from './directives/card-footer.directive';
-import { CardImageDirective } from './directives/card-image.directive';
-import { CardActionsDirective } from './directives/card-actions.directive';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdIconsModule,
-        UpdButtonModule
-    ],
-    declarations: [
-        CardComponent,
-        CardHeaderDirective,
-        CardFooterDirective,
-        CardImageDirective,
-        CardActionsDirective
-    ],
-    exports: [
-        CardComponent,
-        CardHeaderDirective,
-        CardFooterDirective,
-        CardImageDirective
-    ]
-})
-export class UpdCardModule {}

package/dropdown/ng-package.json

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

package/dropdown/src/dropdown.component.html

@@ -1,32 +0,0 @@
-<h6 *ngIf="!!header" class="dropdown-header">{{header}}</h6>
-
-<ng-container *ngFor="let item of items">
-    <ng-container [ngSwitch]="item.type">
-        <ng-container *ngSwitchCase="'divider'">
-            <div class="dropdown-divider"></div>
-        </ng-container>
-        <ng-container *ngSwitchCase="'default'">
-            <upd-button [customClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')"
-                [shouldIgnoreBtnClass]="true" (clicked)="onSelect(item)">
-                <upd-icon *ngIf="!!item.icon" [model]="item.icon" customClasses="dropdown-item-icon"></upd-icon>
-                <ng-container *ngIf="!!item.leftBoxText || !!item.leftBoxImage">
-                    <span style="background-image: url({{item.leftBoxImage}})"
-                        class="avatar avatar-xs rounded me-2">{{item.leftBoxText}}</span>
-                </ng-container>
-                {{item.text}}
-                <span *ngIf="!!item.badgeColor" class="badge bg-{{item.badgeColor}} ms-auto">{{item.badgeText}}</span>
-            </upd-button>
-        </ng-container>
-        <ng-container *ngSwitchCase="'radio'">
-            <upd-radio (selected)="onSelect(item)" [label]="item.text" [isChecked]="item.isChecked || false"
-                [wrapperClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')"></upd-radio>
-        </ng-container>
-        <ng-container *ngSwitchCase="'checkbox'">
-            <upd-checkbox (changed)="onCheckboxChange(item, $event)" [label]="item.text" [isChecked]="item.isChecked || false"
-                [isSwitch]="item.isSwitch || false"
-                [wrapperClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')"></upd-checkbox>
-        </ng-container>
-    </ng-container>
-</ng-container>
-
-<ng-content></ng-content>

package/dropdown/src/dropdown.component.scss

@@ -1,19 +0,0 @@
-.dropdown-show {
-    display: inline-block !important;
-    width: 100% !important;
-    position: relative;
-    top: 0 !important;
-    margin-bottom: 1rem !important;
-}
-
-.dropdown-item > .form-check {
-    margin-bottom: 0 !important;
-}
-
-.dropdown-item {
-    cursor: pointer !important;
-}
-
-.dropdown-overflow {
-    overflow-y: auto !important;
-}