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

package/.eslintrc.json

@@ -0,0 +1,39 @@
+{
+    "extends": ["../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts"],
+            "rules": {
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "upd",
+                        "style": "camelCase"
+                    }
+                ],
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": "upd",
+                        "style": "kebab-case"
+                    }
+                ]
+            }
+        },
+        {
+            "files": ["*.html"],
+            "extends": ["plugin:@nx/angular-template"],
+            "rules": {}
+        },
+        {
+            "files": ["*.json"],
+            "parser": "jsonc-eslint-parser",
+            "rules": {
+                "@nx/dependency-checks": "error"
+            }
+        }
+    ]
+}

package/README.md

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

package/assets/styles/_bootstrap-components.scss

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

package/assets/styles/_seven-columns.scss

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

package/assets/styles/_updevs.scss

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

package/assets/styles/_variables.scss

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

package/badge/index.ts

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

package/badge/ng-package.json

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

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

@@ -0,0 +1,21 @@
+import { BgColorStyleType, ColorStyleType } from '@updevs/sdk/layout';
+import { TextModel } from '@updevs/sdk';
+
+import { BadgeConfig } from './badge.config';
+
+export class BadgeConfigModel implements BadgeConfig {
+    bgColor: BgColorStyleType = 'primary';
+    textColor?: ColorStyleType;
+    text?: TextModel;
+    isOutline = false;
+    isPill = false;
+    isNotification = false;
+    isBlinking = false;
+    customClasses = '';
+
+    constructor(init?: BadgeConfig) {
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}

package/badge/src/badge.component.html

@@ -0,0 +1,5 @@
+@if (!!badgeText) {
+    {{ badgeText }}
+} @else {
+    <ng-content></ng-content>
+}

package/badge/src/badge.component.scss

@@ -0,0 +1 @@
+

package/badge/src/badge.component.spec.ts

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

package/badge/src/badge.component.ts

@@ -0,0 +1,54 @@
+import { Component, computed, HostBinding, effect, inject, input } from '@angular/core';
+import { BgColorStyleType, ColorStyleType } from '@updevs/sdk/layout';
+import { TextModel, TextService } from '@updevs/sdk';
+
+import { BadgeConfig } from './badge.config';
+import { BadgeConfigModel } from './badge-config.model';
+
+@Component({
+    selector: 'upd-badge',
+    templateUrl: './badge.component.html',
+    styleUrl: './badge.component.scss'
+})
+export class BadgeComponent {
+    @HostBinding('class') hostClasses = '';
+
+    config = input<BadgeConfig>();
+    bgColor = input<BgColorStyleType>('primary');
+    textColor = input<ColorStyleType>();
+    text = input<TextModel>();
+    isOutline = input<boolean>(false);
+    isPill = input<boolean>(false);
+    isNotification = input<boolean>(false);
+    isBlinking = input<boolean>(false);
+    customClasses = input<string>('');
+
+    get badgeText(): string {
+        return this.textService.getText(this.text() || this.configModel().text);
+    }
+
+    private readonly configModel = computed(() => new BadgeConfigModel(this.config()));
+    private readonly classes = computed(() =>
+        [
+            (!!this.config() && !this.configModel().isOutline) || !this.isOutline()
+                ? `bg-${!!this.config() ? this.configModel().bgColor : this.bgColor()}`
+                : '',
+            !!this.textColor() || (!!this.config() && this.configModel().textColor)
+                ? `text-${!!this.config() ? this.configModel().textColor : this.textColor()}`
+                : '',
+            this.isOutline() || (!!this.config() && this.configModel().isOutline) ? 'badge-outline' : '',
+            this.isPill() || (!!this.config() && this.configModel().isPill) ? 'badge-pill' : '',
+            this.isNotification() || (!!this.config() && this.configModel().isNotification) ? 'badge-notification' : '',
+            this.isBlinking() || (!!this.config() && this.configModel().isBlinking) ? 'badge-blink' : ''
+        ].join(' ')
+    );
+    private readonly defaultClass = 'badge';
+    private readonly textService = inject(TextService);
+
+    constructor() {
+        effect(() => {
+            this.hostClasses = this.defaultClass + ` ${this.customClasses()} ${this.classes()}`;
+        });
+        this.hostClasses = this.defaultClass;
+    }
+}

package/badge/src/badge.config.ts

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

package/badge/src/public-api.ts

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

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

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

package/button/index.ts

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

package/button/ng-package.json

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

package/button/src/button.component.html

@@ -0,0 +1,45 @@
+<ng-template #userContentTpl>
+    @if (!!_iconModel && _iconPosition === 'left') {
+        <upd-icon [model]="_iconModel" [tablerIconSize]="_iconModel.tablerIconSize || 20"
+            [heroIconSize]="_iconModel.heroIconSize || 'small'">
+        </upd-icon>
+    }
+
+    <div [class.mx-1]="!!_iconModel && !_isIcon">
+        <ng-content></ng-content>
+    </div>
+
+    @if (!!badgeConfig()) {
+        <upd-badge [config]="badgeConfig()"></upd-badge>
+    }
+
+    @if (!!_iconModel && _iconPosition === 'right') {
+        <upd-icon [model]="_iconModel" [tablerIconSize]="_iconModel.tablerIconSize || 20"
+            [heroIconSize]="_iconModel.heroIconSize || 'small'">
+        </upd-icon>
+    }
+</ng-template>
+
+@if (!mainText) {
+    <ng-container [ngTemplateOutlet]="userContentTpl"></ng-container>
+} @else {
+    @if (!!_iconModel && _iconPosition === 'left') {
+        <upd-icon [model]="_iconModel" [tablerIconSize]="_iconModel.tablerIconSize || 20"
+            [heroIconSize]="_iconModel.heroIconSize || 'small'">
+        </upd-icon>
+    }
+
+    <span [class.mx-1]="!!_iconModel">
+        {{ mainText }}
+    </span>
+
+    @if (!!badgeConfig()) {
+        <upd-badge [config]="badgeConfig()"></upd-badge>
+    }
+
+    @if (!!_iconModel && _iconPosition === 'right') {
+        <upd-icon [model]="_iconModel" [tablerIconSize]="_iconModel.tablerIconSize || 20"
+            [heroIconSize]="_iconModel.heroIconSize || 'small'">
+        </upd-icon>
+    }
+}

package/button/src/button.component.scss

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

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

@@ -0,0 +1,176 @@
+import {
+    Component,
+    ViewEncapsulation,
+    Output,
+    EventEmitter,
+    HostBinding,
+    HostListener,
+    inject,
+    input,
+    computed
+} from '@angular/core';
+import { IconModel } from '@updevs/icons';
+import { TextModel, TextService } from '@updevs/sdk';
+import { BrandType, ButtonModel, BgColorStyleType, ButtonSizeType } from '@updevs/sdk/layout';
+import { LeftRightType, OptionalType } from '@updevs/sdk/types';
+import { BadgeConfig } from '@updevs/components/badge';
+
+@Component({
+    selector: 'upd-button',
+    templateUrl: './button.component.html',
+    styleUrls: ['./button.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ButtonComponent {
+    @HostBinding('class') get classes(): string[] {
+        return this.buttonClasses();
+    }
+    @HostBinding('title') get titleAttr(): OptionalType<string> {
+        return this.textService.getText(this._title());
+    }
+
+    /**
+     * 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>();
+
+    model = input<ButtonModel>();
+    text = input<TextModel>();
+    brandColorStyle = input<BrandType>();
+    customClasses = input<string>();
+    isOutline = input(false);
+    isGhost = input(false);
+    isSquare = input(false);
+    isPill = input(false);
+    isIcon = input(false);
+    isLoading = input(false);
+    /**
+     * Whether the button should act as a list (top-bottom alignment instead of left-right related to neighbors).
+     */
+    isList = input(false);
+    /**
+     * Whether the button should be floating in the bottom right corner.
+     */
+    isFloating = input(false);
+    isAction = input(false);
+    isNavigationLink = input(false);
+    isLink = input(false);
+    shouldIgnoreBtnClass = input(false);
+    iconModel = input<IconModel>();
+    iconPosition = input<LeftRightType>('left');
+    isDisabled = input(false);
+    isActive = input(false);
+    badgeConfig = input<BadgeConfig>();
+    colorStyle = input<BgColorStyleType>();
+    size = input<ButtonSizeType>('regular');
+    title = input<TextModel>();
+
+    get mainText(): string {
+        return this.textService.getText(this.text());
+    }
+    get _iconModel(): OptionalType<IconModel> {
+        return this.model()?.iconModel?.() || this.iconModel();
+    }
+    get _iconPosition(): LeftRightType {
+        return this.model()?.iconPosition() || this.iconPosition();
+    }
+    get _isIcon(): boolean {
+        return this.model()?.isIcon() || this.isIcon();
+    }
+
+    private get sizeClass(): string {
+        switch (this._size()) {
+            case 'large':
+                return 'btn-lg';
+            case 'small':
+                return 'btn-sm';
+            default:
+                return '';
+        }
+    }
+    private _size = computed(() => !!this.model() ? this.model()!.size() : this.size());
+    private _title = computed(() => !!this.model() && !!this.model()?.title ? this.model()!.title!() : this.title());
+    private _colorStyle = computed(() => !!this.model() && !!this.model()?.colorStyle ? this.model()!.colorStyle!() : this.colorStyle());
+    private _brandColorStyle = computed(() =>
+        !!this.model() && !!this.model()?.brandColorStyle ? this.model()!.brandColorStyle!() : this.brandColorStyle()
+    );
+    private buttonClasses = computed(() => {
+        const isLink = this.model()?.isLink() || this.isLink();
+        const outlineCls = this.model()?.isOutline() || this.isOutline() ? 'outline-' : '';
+        const ghostCls = this.model()?.isGhost() || this.isGhost() ? 'ghost-' : '';
+        const lClasses: string[] = this.model()?.shouldIgnoreBtnClass() || this.shouldIgnoreBtnClass() ? [] : ['btn'];
+        const customClasses = this.model()?.customClasses?.().split(' ') || this.customClasses()?.split(' ') || [];
+
+        if (!isLink && (!!outlineCls || !!ghostCls || !!this._colorStyle() || !!this._brandColorStyle())) {
+            lClasses.push(`btn-${outlineCls || ghostCls}${this._colorStyle() || this._brandColorStyle()}`);
+        } else if (!!this._colorStyle() || !!this._brandColorStyle()) {
+            lClasses.push(`link-${this._colorStyle() || this._brandColorStyle()}`);
+        }
+
+        if (this.model()?.isSquare() || this.isSquare()) {
+            lClasses.push('btn-square');
+        }
+
+        if (this.model()?.isPill() || this.isPill()) {
+            lClasses.push('btn-pill');
+        }
+
+        if (this._isIcon) {
+            lClasses.push('btn-icon');
+        }
+
+        if (this.model()?.isLoading() || this.isLoading()) {
+            lClasses.push('btn-loading');
+        }
+
+        if (this.model()?.isList() || this.isList()) {
+            lClasses.push('btn-list');
+        }
+
+        if (this.model()?.isFloating() || this.isFloating()) {
+            lClasses.push('btn-floating');
+        }
+
+        if (this.model()?.isAction() || this.isAction()) {
+            lClasses.push('btn-action');
+        }
+
+        if (this.model()?.isNavigationLink() || this.isNavigationLink()) {
+            lClasses.push('nav-link');
+        }
+
+        if (isLink) {
+            lClasses.push('btn-link');
+        }
+
+        if (this.model()?.isActive() || this.isActive()) {
+            lClasses.push('active');
+        }
+
+        if (this.model()?.isDisabled() || this.isDisabled()) {
+            lClasses.push('disabled');
+        }
+
+        if (!!this.badgeConfig() && (this.badgeConfig()!.isBlinking || this.badgeConfig()!.isNotification)) {
+            lClasses.push('position-relative');
+        }
+
+        lClasses.push(this.sizeClass);
+
+        return [...lClasses, ...customClasses];
+    });
+    private readonly textService = inject(TextService);
+
+    @HostListener('click', ['$event'])
+    onClick(event: MouseEvent): void {
+        if (!!this.model() && !!this.model()?.clickFunction) {
+            this.model()!.clickFunction!({ event, data: this });
+        } else {
+            this.clicked.emit(event);
+        }
+
+        event.stopPropagation();
+    }
+}

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

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

package/calendar/index.ts

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

package/calendar/ng-package.json

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

package/calendar/src/assets/i18n/en.json

@@ -0,0 +1,16 @@
+{
+    "UpDevs": {
+        "Calendar": {
+            "PreviousMonth": "Previous month",
+            "PreviousYear": "Previous year",
+            "PreviousMultiYear": "Previous 24 years",
+            "NextMonth": "Next month",
+            "NextYear": "Next year",
+            "NextMultiYear": "Next 24 years",
+            "SwitchToMultiYearView": "Choose month and year",
+            "SwitchToMonthView": "Choose date",
+            "YearRange": "{{start}} \u2013 {{end}}",
+            "YearRangeLabel": "{{start}} to {{end}}"
+        }
+    }
+}

package/calendar/src/assets/i18n/pt.json

@@ -0,0 +1,16 @@
+{
+    "UpDevs": {
+        "Calendar": {
+            "PreviousMonth": "Mês anterior",
+            "PreviousYear": "Ano anterior",
+            "PreviousMultiYear": "24 anos anteriores",
+            "NextMonth": "Próximo mês",
+            "NextYear": "Próximo ano",
+            "NextMultiYear": "Próximos 24 anos",
+            "SwitchToMultiYearView": "Escolha mês e ano",
+            "SwitchToMonthView": "Escolha uma data",
+            "YearRange": "{{start}} \u2013 {{end}}",
+            "YearRangeLabel": "{{start}} até {{end}}"
+        }
+    }
+}