@edm-sdui/sdui 1.0.1 → 1.0.2

package/src/lib/core/view-models/uiscreen.viewmodel.ts

@@ -1,115 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, catchError, finalize, Observable, of } from 'rxjs';
-import { UIScreen } from '../uicomposition/models/uiscreen';
-import { UIScreenService } from '../services/uiscreen.service';
-import { UIScreenIdentifier } from '../uicomposition/enums/uiscreen-identifier';
-import { Location } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
-import { tap } from 'rxjs/operators';
-
-export const SDUI_URL_PARAM = 'sduiUrl';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UIScreenViewModel {
-  private uiScreenSubject = new BehaviorSubject<UIScreen | null>(null);
-  private isLoadingSubject = new BehaviorSubject<boolean>(false);
-  private errorSubject = new BehaviorSubject<string | null>(null);
-  private navigationHistorySubject = new BehaviorSubject<string[]>([]);
-  private canGoBackSubject = new BehaviorSubject<boolean>(false);
-  private currentUrlSubject = new BehaviorSubject<string | null>(null);
-
-  public uiScreen$ = this.uiScreenSubject.asObservable();
-  public isLoading$ = this.isLoadingSubject.asObservable();
-  public error$ = this.errorSubject.asObservable();
-  public navigationHistory$ = this.navigationHistorySubject.asObservable();
-  public canGoBack$ = this.canGoBackSubject.asObservable();
-  public currentUrl$ = this.currentUrlSubject.asObservable();
-
-  constructor(
-    private uiScreenService: UIScreenService,
-    private location: Location //private router: Router, //private route: ActivatedRoute
-  ) {
-    console.debug('[UIScreenViewModel] Inicializado');
-  }
-
-  /**
-   * Atualiza o estado do botão de voltar com base no tamanho do histórico
-   */
-  private updateCanGoBack(): void {
-    const history = this.navigationHistorySubject.getValue();
-    const canGoBack = history.length > 1;
-    console.debug(
-      `[UIScreenViewModel] Histórico: ${history.length} item(s), pode voltar: ${canGoBack}`
-    );
-    this.canGoBackSubject.next(canGoBack);
-  }
-
-  loadUIScreen(url: string, shouldUpdateHistory: boolean = true, shouldUpdateBrowserUrl: boolean = false): void {
-    console.debug(`[UIScreenViewModel] Carregando tela: ${url}`);
-
-    if (shouldUpdateHistory) {
-      const history = this.navigationHistorySubject.getValue();
-      this.navigationHistorySubject.next([...history, url]);
-      this.updateCanGoBack();
-    }
-
-    if (shouldUpdateBrowserUrl) {
-      this.location.go(url);
-  }
-
-    this.loadUIScreenInternal(url);
-  }
-
-  private loadUIScreenInternal(url: string): void {
-    this.isLoadingSubject.next(true);
-    this.errorSubject.next(null);
-
-    this.uiScreenService
-      .getUIScreen(url)
-      .pipe(
-        tap(() => console.debug('[UIScreenViewModel] URL carregada:', url)),
-        finalize(() => this.isLoadingSubject.next(false)),
-        catchError((error) => {
-          this.errorSubject.next(`Erro ao carregar tela: ${error.message}`);
-          return of(null);
-        })
-      )
-      .subscribe((screen: UIScreen | null) => {
-        if (screen) {
-          console.debug('[UIScreenViewModel] nova screen:', screen.identifier);
-          this.currentUrlSubject.next(url);
-          this.uiScreenSubject.next(screen);
-        } else {
-          console.debug('[UIScreenViewModel] nova screen nula!');
-        }
-      });
-  }
-
-  /**
-   * Volta para a tela anterior
-   */
-  goBack(): void {
-    const history = this.navigationHistorySubject.getValue();
-
-    if (history.length > 1) {
-      // Remove o último item da pilha
-      const newHistory = history.slice(0, -1);
-      const previousUrl = newHistory[newHistory.length - 1];
-
-      console.debug(`[UIScreenViewModel] Voltando para: ${previousUrl}`);
-      this.navigationHistorySubject.next(newHistory);
-      this.location.back();
-      this.updateCanGoBack();
-      this.loadUIScreenInternal(previousUrl);
-    }
-  }
-
-  /**
-   * Verifica se é possível voltar
-   */
-  canGoBack(): boolean {
-    return this.navigationHistorySubject.getValue().length > 1;
-  }
-}

package/src/lib/directives/uiview.directive.ts

@@ -1,207 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  Host,
-  HostListener,
-  Input,
-  OnChanges,
-  Optional,
-  Renderer2,
-  SimpleChanges,
-} from '@angular/core';
-import { UIView } from '../core/uicomposition/models/uiview';
-import { UIPadding } from '../core/uitheme/models/uipadding';
-import { UIBackground } from '../core/uitheme/models/uibackground';
-import { UIAction } from '../core/uitheme/models/uiaction';
-import { UIAlignment } from '../core/uitheme/models/uialignment';
-import { UIShadow } from '../core/uitheme/models/uishadow';
-import { UIRadius } from '../core/uitheme/models/uiradius';
-import { UISpacing } from '../core/uitheme/models/uispacing';
-import { spaceMapping } from '../core/uitheme/mapping/space-mapping';
-import { colorMapping } from '../core/uitheme/mapping/color-mapping';
-import { padMapping } from '../core/uitheme/mapping/pad-mapping';
-import { radiusMapping } from '../core/uitheme/mapping/radius-mapping';
-import { alignmentMapping } from '../core/uitheme/mapping/alignment-mapping';
-import { Router } from '@angular/router';
-import { UIScreenViewModel } from '../core/view-models/uiscreen.viewmodel';
-import { UIActionService } from '../core/services/ui-action.service';
-
-@Directive({
-  selector: '[edmSduiView]',
-  standalone: false,
-})
-export class UIViewDirective implements OnChanges {
-  @Input() edmSduiView?: UIView;
-  @Input() disableClick: boolean = false;
-
-  constructor(
-    private elementRef: ElementRef,
-    private renderer: Renderer2,
-    private router: Router,
-    private actionService: UIActionService,
-    @Optional() private screenViewModel: UIScreenViewModel
-  ) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.edmSduiView) {
-      this.applyStyles(this.edmSduiView);
-    }
-  }
-
-  private applyStyles(uiView: UIView) {
-    if (uiView.padding) {
-      this.applyPadding(uiView.padding);
-    }
-
-    if (uiView.background) {
-      this.applyBackground(uiView.background);
-    }
-
-    if (uiView.action) {
-      this.applyAction(uiView.action);
-    }
-
-    if (uiView.alignment) {
-      this.applyAlignment(uiView.alignment);
-    }
-
-    if (uiView.shadow) {
-      this.applyShadow(uiView.shadow);
-    }
-
-    if (uiView.radius) {
-      this.applyRadius(uiView.radius);
-    }
-
-    if (uiView.spacing) {
-      this.applySpacing(uiView.spacing);
-    }
-  }
-
-  private applyPadding(uiPadding: UIPadding) {
-    if (uiPadding.top) {
-      const padValue = padMapping[uiPadding.top];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'margin-top',
-        padValue
-      );
-    }
-    if (uiPadding.left) {
-      const padValue = padMapping[uiPadding.left];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'margin-left',
-        padValue
-      );
-    }
-    if (uiPadding.right) {
-      const padValue = padMapping[uiPadding.right];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'margin-right',
-        padValue
-      );
-    }
-    if (uiPadding.bottom) {
-      const padValue = padMapping[uiPadding.bottom];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'margin-bottom',
-        padValue
-      );
-    }
-  }
-
-  private applyBackground(uiBackground: UIBackground) {
-    if (uiBackground.backgroundColor) {
-      const backgroundColor = colorMapping[uiBackground.backgroundColor];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'background-color',
-        backgroundColor
-      );
-    }
-  }
-
-  private applyAction(uiAction: UIAction) {
-    if (this.disableClick) {
-      return;
-    }
-
-    this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
-  }
-
-  private applyAlignment(uiAlignment: UIAlignment) {
-    if (uiAlignment.alignment) {
-      // console.debug('alignment:', uiAlignment.alignment);
-      const alignment = alignmentMapping[uiAlignment.alignment];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'align-items',
-        alignment
-      );
-    }
-  }
-
-  private applyShadow(uiShadow: UIShadow) {}
-
-  private applyRadius(uiRadius: UIRadius) {
-    if (uiRadius.topLeft) {
-      const radius = radiusMapping[uiRadius.topLeft];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'border-top-left-radius',
-        radius
-      );
-    }
-
-    if (uiRadius.topRight) {
-      const radius = radiusMapping[uiRadius.topRight];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'border-top-right-radius',
-        radius
-      );
-    }
-
-    if (uiRadius.bottomLeft) {
-      const radius = radiusMapping[uiRadius.bottomLeft];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'border-bottom-left-radius',
-        radius
-      );
-    }
-
-    if (uiRadius.bottomRight) {
-      const radius = radiusMapping[uiRadius.bottomRight];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'border-bottom-right-radius',
-        radius
-      );
-    }
-  }
-
-  private applySpacing(uiSpacing: UISpacing) {
-    if (uiSpacing.spacing) {
-      const spacingValue = spaceMapping[uiSpacing.spacing];
-      this.renderer.setStyle(
-        this.elementRef.nativeElement,
-        'gap',
-        spacingValue
-      );
-    }
-  }
-
-  @HostListener('click', ['$event'])
-  onClick(event: Event): void {
-    if (this.disableClick) return;
-
-    if (this.edmSduiView?.action) {
-      event.stopPropagation();
-      this.actionService.execute(this.edmSduiView.action);
-    }
-  }
-}

package/src/lib/sdui-routing.module.ts

@@ -1,22 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { SduiComponent } from './sdui.component';
-
-const defaultRoutes: Routes = [{ path: 'sdui', component: SduiComponent }];
-
-@NgModule({
-  imports: [RouterModule.forChild(defaultRoutes)],
-  exports: [RouterModule],
-})
-export class SduiRoutingModule {
-  static forChild(customPath?: string): ModuleWithProviders<SduiRoutingModule> {
-    const routes = customPath
-      ? [{ path: customPath, component: SduiComponent }]
-      : defaultRoutes;
-
-    return {
-      ngModule: SduiRoutingModule,
-      providers: [],
-    };
-  }
-}

package/src/lib/sdui.component.html

@@ -1,3 +0,0 @@
-<div class="sdui-container">
-  <edm-sdui-uiscreen *ngIf="currentSduiUrl"></edm-sdui-uiscreen>
-</div>

package/src/lib/sdui.component.scss

@@ -1,11 +0,0 @@
-:host {
-  display: contents;
-}
-
-.sdui-container {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  width: 100vw;
-  position: relative;
-}

package/src/lib/sdui.component.ts

@@ -1,65 +0,0 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  OnChanges,
-  SimpleChanges,
-  AfterViewInit,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import {
-  UIScreenViewModel,
-  SDUI_URL_PARAM,
-} from './core/view-models/uiscreen.viewmodel';
-import { take } from 'rxjs/operators';
-
-@Component({
-  selector: 'edm-sdui',
-  templateUrl: './sdui.component.html',
-  styleUrls: ['./sdui.component.scss'],
-  standalone: false,
-})
-export class SduiComponent implements OnInit, AfterViewInit {
-  currentSduiUrl: string | null = null;
-
-  @Input() initialUrl: string | null = null;
-
-  constructor(
-    private route: ActivatedRoute,
-    private viewModel: UIScreenViewModel
-  ) {}
-
-  ngOnInit() {
-    this.viewModel.currentUrl$.subscribe((url) => {
-      this.currentSduiUrl = url;
-    });
-
-    this.route.queryParams.subscribe((params) => {
-      const paramValue = params[SDUI_URL_PARAM];
-
-      const hasValidParam = this.validateParam(paramValue);
-      if (hasValidParam && this.currentSduiUrl !== paramValue) {
-        console.debug('[SduiComponent] carregando sdui do parâmetro...');
-        this.viewModel.loadUIScreen(paramValue);
-      }
-    });
-  }
-
-  ngAfterViewInit(): void {
-    const paramValue = this.route.snapshot.queryParamMap.get(SDUI_URL_PARAM);
-    const hasValidParam = this.validateParam(paramValue);
-
-    if (
-      !hasValidParam &&
-      this.initialUrl &&
-      this.currentSduiUrl !== this.initialUrl
-    ) {
-      console.debug('[SduiComponent] carregando initialUrl:', this.initialUrl);
-      this.viewModel.loadUIScreen(this.initialUrl);
-    }
-  }
-
-  private validateParam(paramValue: any): boolean {
-    return !!paramValue && paramValue.trim() !== '';
-  }
-}

package/src/lib/sdui.module.ts

@@ -1,84 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { UIScreenComponent } from './components/uiscreen/uiscreen.component';
-import { SingleColumnLayoutComponent } from './components/uilayout/single-column-layout/single-column-layout.component';
-import { UINavigationComponent } from './components/uilayout/uinavigation/uinavigation.component';
-import { UIComponentComponent } from './components/uicomponent/uicomponent.component';
-import { RowComponent } from './components/uicomponent/row/row.component';
-import { ColumnComponent } from './components/uicomponent/column/column.component';
-import { LabelComponent } from './components/uicomponent/label/label.component';
-import { SpaceComponent } from './components/uicomponent/space/space.component';
-import { ZStackComponent } from './components/uicomponent/zstack/zstack.component';
-import { RowDivisorComponent } from './components/uicomponent/row-divisor/row-divisor.component';
-import { UIViewDirective } from './directives/uiview.directive';
-import { ButtonComponent } from './components/uicomponent/button/button.component';
-import { ImageComponent } from './components/uicomponent/image/image.component';
-import { SDUI_BASE_URL } from './core/tokens/sdui-config.token';
-import { NavigationControlsComponent } from './components/navigation-controls/navigation-controls.component';
-import { SduiComponent } from './sdui.component';
-import { SduiRoutingModule } from './sdui-routing.module';
-import { CenteredContentLayoutComponent } from './components/uilayout/centered-content-layout/centered-content-layout.component';
-import { TagComponent } from './components/uicomponent/tag/tag.component';
-import { SearchBarComponent } from './components/uicomponent/search-bar/search-bar.component';
-
-export interface SduiModuleConfig {
-  baseUrl: string;
-  routePath?: string;
-}
-
-@NgModule({
-  declarations: [
-    // UIComposite
-    UIScreenComponent,
-    UINavigationComponent,
-
-    // Layout
-    SingleColumnLayoutComponent,
-    CenteredContentLayoutComponent,
-
-    // UIComponents
-    UIComponentComponent,
-    RowComponent,
-    RowDivisorComponent,
-    ColumnComponent,
-    ZStackComponent,
-    LabelComponent,
-    SpaceComponent,
-    ButtonComponent,
-    ImageComponent,
-    TagComponent,
-    SearchBarComponent,
-
-    // diretivas
-    UIViewDirective,
-
-    // navegação
-    NavigationControlsComponent,
-
-    // componente base da lib
-    SduiComponent,
-  ],
-  imports: [CommonModule, RouterModule],
-  exports: [SduiComponent],
-  providers: [],
-})
-export class SduiModule {
-  static forRoot(config: SduiModuleConfig): ModuleWithProviders<SduiModule> {
-    return {
-      ngModule: SduiModule,
-      providers: [
-        {
-          provide: SDUI_BASE_URL,
-          useValue: config.baseUrl,
-        },
-      ],
-    };
-  }
-
-  static forRouting(
-    config?: SduiModuleConfig
-  ): ModuleWithProviders<SduiRoutingModule> {
-    return SduiRoutingModule.forChild(config?.routePath);
-  }
-}

package/src/public-api.ts

@@ -1,16 +0,0 @@
-/*
- * Public API Surface of sdui
- */
-
-// Módulo principal
-export { SduiModule } from './lib/sdui.module';
-
-// Componente principal para uso direto
-export { SduiComponent } from './lib/sdui.component';
-
-// Constantes e interfaces para configuração
-export { SDUI_URL_PARAM } from './lib/core/view-models/uiscreen.viewmodel';
-export { SduiModuleConfig } from './lib/sdui.module';
-
-// Roteamento (opcional, apenas se necessário)
-// export { SduiRoutingModule } from './lib/sdui-routing.module';

package/tsconfig.lib.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "types": [],
-    "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  },
-  "exclude": ["src/test.ts", "**/*.spec.ts"]
-}

package/tsconfig.spec.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc/libs/sdui",
-    "module": "CommonJS",
-    "target": "ES2022",
-    "types": ["jasmine"],
-    "lib": ["ES2022", "DOM"]
-  },
-  "files": ["src/test.ts"],
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
-}