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

package/button/src/button.component.ts

@@ -0,0 +1,154 @@
+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/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/button/src/public-api.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+export * from './card-actions.directive';
+export * from './card-footer.directive';
+export * from './card-header.directive';
+export * from './card-image.directive';

package/card/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/card/src/public-api.ts

@@ -0,0 +1,3 @@
+export * from './directives/public-api';
+export * from './upd-card.module';
+export * from './card.component';

package/card/src/types/card-state.type.ts

@@ -0,0 +1 @@
+export type CardStateType = 'active' | 'inactive';

package/card/src/types/card-style.type.ts

@@ -0,0 +1 @@
+export type CardStyleType = 'stacked';

package/card/src/types/hover-effect.type.ts

@@ -0,0 +1 @@
+export type HoverEffectType = 'default' | 'rotate' | 'pop';

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

@@ -0,0 +1,5 @@
+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/types/ribbon-style.type.ts

@@ -0,0 +1 @@
+export type RibbonStyleType = 'default' | 'top' | 'bottom' | 'bookmark' | 'start';

package/card/src/types/status-position.type.ts

@@ -0,0 +1 @@
+export type StatusPositionType = 'top' | 'bottom' | 'start';

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

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

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